ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(overlays): add tabindex="-1" to prevent tooltips get focus in Safari and Firefox

Browse source
This commit is contained in:
gerjanvangeest 2025-01-21 10:31:14 +01:00 committed by Thijs Louisse
parent 5344fdeb66
commit 2155e455ee
3 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wise-humans-judge.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[overlays] add tabindex="-1" to prevent tooltips get focus in Safari and Firefox

4
packages/ui/components/overlays/src/OverlayController.js
View file

@ -620,6 +620,10 @@ export class OverlayController extends EventTarget {
}); });
// @ts-ignore // @ts-ignore
wrappingDialogElement.open = true; 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.__wrappingDialogNode.style.display = 'none';
this.contentWrapperNode.style.zIndex = '1'; this.contentWrapperNode.style.zIndex = '1';

13
packages/ui/components/overlays/test/OverlayController.test.js
View file

@ -1938,6 +1938,19 @@ describe('OverlayController', () => {
expect(ctrl.contentNode.getAttribute('role')).to.equal('tooltip'); 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', () => { describe('Teardown', () => {
it('restores [role] on dialog content', async () => { it('restores [role] on dialog content', async () => {
const invokerNode = /** @type {HTMLElement} */ ( const invokerNode = /** @type {HTMLElement} */ (