From d504c4a001d652ae0cd24374fac67ac90615044b Mon Sep 17 00:00:00 2001 From: sanneswagerman Date: Thu, 27 Feb 2020 11:54:02 +0100 Subject: [PATCH 1/4] use width instead of padding for offset --- src/floating-focus.js | 17 +++++++++++++---- src/floating-focus.scss | 1 - 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/floating-focus.js b/src/floating-focus.js index 4e915ef..16981b4 100644 --- a/src/floating-focus.js +++ b/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`, diff --git a/src/floating-focus.scss b/src/floating-focus.scss index 0963c4b..35fd2f0 100644 --- a/src/floating-focus.scss +++ b/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%; From df22800c10b8f1af69eea97c47c31476fddf89c6 Mon Sep 17 00:00:00 2001 From: sanneswagerman Date: Thu, 27 Feb 2020 12:27:23 +0100 Subject: [PATCH 2/4] fix tests --- src/floating-focus.spec.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/floating-focus.spec.js b/src/floating-focus.spec.js index 66be3d0..67cd94e 100644 --- a/src/floating-focus.spec.js +++ b/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,7 +349,7 @@ 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); @@ -354,11 +357,11 @@ describe('Floating focus', () => { 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); }); From 7ffc625cfa8d1992b21dc000886e4308351a4655 Mon Sep 17 00:00:00 2001 From: Anton Hogewoning <1681727+CptMeatball@users.noreply.github.com> Date: Mon, 8 Jun 2020 16:04:02 +0200 Subject: [PATCH 3/4] 1.2.5 This bumps the version to 1.2.5, so existing 1.2.4 installs will actually pull in the changes. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 41b5658..12ace5e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@q42/floating-focus-a11y", - "version": "1.2.3", + "version": "1.2.5", "description": "An a11y focus solution that is clear, beautiful and easy to implement.", "keywords": [ "a11y", From 74e496aad77477dc0176a3539876ee00537aed19 Mon Sep 17 00:00:00 2001 From: Anton Hogewoning <1681727+CptMeatball@users.noreply.github.com> Date: Mon, 8 Jun 2020 16:13:00 +0200 Subject: [PATCH 4/4] Also update lockfile to 1.2.5 --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 9c1adf7..59dba09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@q42/floating-focus-a11y", - "version": "1.2.3", + "version": "1.2.5", "lockfileVersion": 1, "requires": true, "dependencies": {