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('
invoker
') + ); + 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} */ (