1.2.5

Release 2020-06-08

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q42/floating-focus-a11y",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"description": "An a11y focus solution that is clear, beautiful and easy to implement.",
 	"keywords": [
 		"a11y",

src/floating-focus.js

@@ -184,6 +184,9 @@ export default class FloatingFocus {
 		if (!offset) {
 			return baseRadius;
 		}
+
+		offset = Math.max(parseFloat(offset), 0);
+
 		return this.addPixels(baseRadius, offset) || '0px';
 	}
 
@@ -192,7 +195,6 @@ export default class FloatingFocus {
 		const padding = targetStyle.outlineOffset || null;
 
 		Object.assign(floater.style, {
-			padding,
 			color: targetStyle.outlineColor,
 			borderWidth: targetStyle.outlineWidth,
 			borderBottomLeftRadius: this.getOffsetBorderRadius(targetStyle.borderBottomLeftRadius, padding),
@@ -203,12 +205,19 @@ export default class FloatingFocus {
 	}
 
 	getFloaterPosition(target) {
+		const targetStyle = window.getComputedStyle(target);
+		// default 4 px padding
+		const padding = parseFloat(targetStyle.outlineOffset) || 4;
+
 		const rect = target.getBoundingClientRect();
 		this.previousTargetRect = rect;
 
-		const { width, height } = rect;
-		const left = rect.left + width / 2;
-		const top = rect.top + height / 2;
+		let { width, height } = rect;
+		width += padding * 2;
+		height += padding * 2;
+
+		const left = rect.left - padding + width / 2;
+		const top = rect.top - padding + height / 2;
 
 		return {
 			left: `${left}px`,

src/floating-focus.scss

@@ -2,7 +2,6 @@
 	$border-size: 2px;
 
 	border: $border-size solid currentColor;
-	padding: 4px;
 	border-radius: 4px;
 	position: fixed;
 	top: 50%;

src/floating-focus.spec.js

@@ -269,7 +269,6 @@ describe('Floating focus', () => {
 
 		floatingFocus.resolveTargetOutlineStyle(target, floater);
 
-		expect(floater.style.padding).toBe(targetStyle.outlineOffset);
 		expect(floater.style.color).toBe(targetStyle.outlineColor);
 		expect(floater.style.borderWidth).toBe(targetStyle.outlineWidth);
 		expect(floater.style.borderBottomLeftRadius).toBe(targetStyle.borderBottomLeftRadius);
@@ -310,6 +309,8 @@ describe('Floating focus', () => {
 		const floatingFocus = new FloatingFocus();
 		const target = document.createElement('div');
 		const floater = floatingFocus.constructFloatingElement();
+		const targetStyle = window.getComputedStyle(target);
+		const padding = targetStyle.outlineOffset || 4;
 
 		const rect = {
 			left: 42,
@@ -324,14 +325,16 @@ 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}px`);
-		expect(floater.style.height).toBe(`${rect.height}px`);
+		expect(floater.style.width).toBe(`${rect.width + padding * 2 }px`);
+		expect(floater.style.height).toBe(`${rect.height + padding * 2}px`);
 	});
 
 	it('Should automatically reposition the \'floater\' when the target element\'s position changes', async () => {
 		const floatingFocus = new FloatingFocus();
 		const target = document.createElement('div');
 		document.body.appendChild(target);
+		const targetStyle = window.getComputedStyle(target);
+		const padding = targetStyle.outlineOffset || 4;
 
 		const rect = {
 			left: 42,
@@ -346,19 +349,19 @@ describe('Floating focus', () => {
 		floatingFocus.enableFloatingFocus();
 		floatingFocus.handleFocus({target}, true);
 
-		expect(floatingFocus.floater.style.height).toBe(`${rect.height}px`);
+		expect(floatingFocus.floater.style.height).toBe(`${rect.height + padding * 2}px`);
 
 		jest.advanceTimersByTime(MONITOR_INTERVAL);
 
 		expect(target.classList.contains('moving')).toBe(false);
 
 		rect.height = 100;
 
-		expect(floatingFocus.floater.style.height).not.toBe(`${rect.height}px`);
+		expect(floatingFocus.floater.style.height).not.toBe(`${rect.height + padding * 2}px`);
 
 		jest.advanceTimersByTime(MONITOR_INTERVAL);
 
-		expect(floatingFocus.floater.style.height).toBe(`${rect.height}px`);
+		expect(floatingFocus.floater.style.height).toBe(`${rect.height + padding * 2}px`);
 		expect(floatingFocus.floater.classList.contains('moving')).toBe(true);
 
 	});