From 357b88516b5208353cc3377bb5a815c588002a4b Mon Sep 17 00:00:00 2001 From: Margaree Peacocke Date: Mon, 9 Sep 2024 14:05:47 -0400 Subject: [PATCH] fix: Focus trap: remove delay when focusing on first/last item when wrapping focus (#4966) * fix: Focus trap: remove delay when focusing on first/last item when wrapping focus * remove comment about delay, remove test clock ticks --- components/focus-trap/focus-trap.js | 6 ++---- components/focus-trap/test/focus-trap.test.js | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/components/focus-trap/focus-trap.js b/components/focus-trap/focus-trap.js index 4e568828e77..aca0ae4df6c 100644 --- a/components/focus-trap/focus-trap.js +++ b/components/focus-trap/focus-trap.js @@ -117,8 +117,7 @@ class FocusTrap extends FocusMixin(LitElement) { // user is exiting trap via forward tabbing... const firstFocusable = getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start')); if (firstFocusable) { - // Delay to re-apply the focus effects as a visual clue when there is only one focusable element - setTimeout(() => firstFocusable.focus(), 50); + firstFocusable.focus(); return; } } @@ -141,8 +140,7 @@ class FocusTrap extends FocusMixin(LitElement) { // user is exiting trap via back tabbing... const lastFocusable = getPreviousFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-end')); if (lastFocusable) { - // Delay to re-apply the focus effects as a visual clue when there is only one focusable element - setTimeout(() => lastFocusable.focus(), 50); + lastFocusable.focus(); return; } } diff --git a/components/focus-trap/test/focus-trap.test.js b/components/focus-trap/test/focus-trap.test.js index 828dd27bdf5..d0df14b4800 100644 --- a/components/focus-trap/test/focus-trap.test.js +++ b/components/focus-trap/test/focus-trap.test.js @@ -106,14 +106,12 @@ describe('d2l-focus-trap', () => { it('wraps to first', async() => { focusTrap.querySelector('#last').focus(); focusTrap.shadowRoot.querySelector('.d2l-focus-trap-end').focus(); - clock.tick(50); expect(document.activeElement).to.equal(elem.querySelector('#first')); }); it('wraps to last', () => { focusTrap.querySelector('#first').focus(); focusTrap.shadowRoot.querySelector('.d2l-focus-trap-start').focus(); - clock.tick(50); expect(document.activeElement).to.equal(elem.querySelector('#last')); });