Merge pull request #34 from Q42/Allow-user-defined-focused-outline-of…

…fset-to-be-0 Allow user defined focused outline offset to be 0
Q42 · Nov 19, 2020 · a0bf355 · a0bf355
2 parents 08bccfc + aae10f4
commit a0bf355
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/example/index.html b/example/index.html
@@ -73,7 +73,13 @@
 		label {
 			position: relative;
 			overflow: hidden;
-			outline-style: dashed !important;
+		}
+
+		.file-upload-label.focus {
+			outline-offset: 0;
+			outline-color: orange;
+			outline-width: 2px;
+			outline-style: dashed;
 		}
 
 		input[type="file"] {
@@ -109,7 +115,7 @@
 	<input type="text">
 	<input type="text">
 
-	<label id="file-upload-label">
+	<label id="file-upload-label" class="file-upload-label">
 		<input type="file" focus-target="file-upload-label"/>
 		Please upload a file
 	</label>

diff --git a/src/floating-focus.js b/src/floating-focus.js
@@ -188,8 +188,7 @@ export default class FloatingFocus {
 
 	getFloaterPosition(target) {
 		const targetStyle = window.getComputedStyle(target);
-		// default 4 px padding
-		const padding = parseFloat(targetStyle.outlineOffset) || 4;
+		const padding = parseFloat(targetStyle.outlineOffset || '0px');
 
 		const rect = target.getBoundingClientRect();
 		this.previousTargetRect = rect;

diff --git a/src/floating-focus.spec.js b/src/floating-focus.spec.js
@@ -307,12 +307,12 @@ describe('Floating focus', () => {
 		expect(floater.style.borderBottomLeftRadius).toBe(targetStyle.borderBottomLeftRadius);
 	});
 
-	it('Should reposition \'floater\' based on target position', () => {
+	it.each([4, 0])('Should reposition \'floater\' based on target position -- outline offset %d', (outlineOffset) => {
 		const floatingFocus = new FloatingFocus();
 		const target = document.createElement('div');
 		const floater = floatingFocus.constructFloatingElement();
 		const targetStyle = window.getComputedStyle(target);
-		const padding = targetStyle.outlineOffset || 4;
+		targetStyle.outlineOffset = outlineOffset;
 
 		const rect = {
 			left: 42,
@@ -327,8 +327,8 @@ describe('Floating focus', () => {
 
 		expect(floater.style.left).toBe(`${rect.left + rect.width / 2}px`);
 		expect(floater.style.top).toBe(`${rect.top + rect.height / 2}px`);
-		expect(floater.style.width).toBe(`${rect.width + padding * 2 }px`);
-		expect(floater.style.height).toBe(`${rect.height + padding * 2}px`);
+		expect(floater.style.width).toBe(`${rect.width + outlineOffset * 2 }px`);
+		expect(floater.style.height).toBe(`${rect.height + outlineOffset * 2}px`);
 	});
 
 	it('Should automatically reposition the \'floater\' when the target element\'s position changes', async () => {