fix(overlays): add tabindex="-1" to prevent tooltips get focus in Saf…

…ari and Firefox
ing-bank · Jan 21, 2025 · 2155e45 · 2155e45
1 parent 5344fde
commit 2155e45
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/.changeset/wise-humans-judge.md b/.changeset/wise-humans-judge.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[overlays] add tabindex="-1" to prevent tooltips get focus in Safari and Firefox
diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js
@@ -620,6 +620,10 @@ export class OverlayController extends EventTarget {
     });
     // @ts-ignore
     wrappingDialogElement.open = true;
+    if (this.isTooltip) {
+      // needed to prevent tooltip getting focus in Safari and Firefox
+      wrappingDialogElement.setAttribute('tabindex', '-1');
+    }
 
     this.__wrappingDialogNode.style.display = 'none';
     this.contentWrapperNode.style.zIndex = '1';

diff --git a/packages/ui/components/overlays/test/OverlayController.test.js b/packages/ui/components/overlays/test/OverlayController.test.js
@@ -1938,6 +1938,19 @@ describe('OverlayController', () => {
         expect(ctrl.contentNode.getAttribute('role')).to.equal('tooltip');
       });
 
+      it('adds tabindex="-1" to the wrappingDialog element', async () => {
+        const invokerNode = /** @type {HTMLElement} */ (
+          await fixture('<div role="button">invoker</div>')
+        );
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          handlesAccessibility: true,
+          isTooltip: true,
+          invokerNode,
+        });
+        expect(ctrl.__wrappingDialogNode?.getAttribute('tabindex')).to.equal('-1');
+      });
+
       describe('Teardown', () => {
         it('restores [role] on dialog content', async () => {
           const invokerNode = /** @type {HTMLElement} */ (