From 2155e455eed640fe449c95b88811536728fd2f68 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <Gerjan.van.Geest@ing.com>
Date: Tue, 21 Jan 2025 10:31:14 +0100
Subject: [PATCH] fix(overlays): add tabindex="-1" to prevent tooltips get
 focus in Safari and Firefox

---
 .changeset/wise-humans-judge.md                     |  5 +++++
 .../ui/components/overlays/src/OverlayController.js |  4 ++++
 .../overlays/test/OverlayController.test.js         | 13 +++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 .changeset/wise-humans-judge.md

diff --git a/.changeset/wise-humans-judge.md b/.changeset/wise-humans-judge.md
new file mode 100644
index 000000000..99970c9b4
--- /dev/null
+++ 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
index 04b8cad87..ef785d839 100644
--- 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
index 5ebd4bed7..539455361 100644
--- 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} */ (