fix: Focus trap: remove delay when focusing on first/last item when w…

…rapping focus (#4966) * fix: Focus trap: remove delay when focusing on first/last item when wrapping focus * remove comment about delay, remove test clock ticks
BrightspaceUI · Sep 9, 2024 · 357b885 · 357b885
1 parent f78aed3
commit 357b885
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 6 deletions.
diff --git 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
@@ -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'));
 				});