diff --git a/packages/ui/components/dialog/test/lion-dialog.test.js b/packages/ui/components/dialog/test/lion-dialog.test.js index 389eaf62d..97b81a22d 100644 --- a/packages/ui/components/dialog/test/lion-dialog.test.js +++ b/packages/ui/components/dialog/test/lion-dialog.test.js @@ -1,3 +1,4 @@ +/* eslint-disable lit-a11y/no-autofocus */ import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing'; import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js'; import '@lion/ui/define/lion-dialog.js'; @@ -72,4 +73,59 @@ describe('lion-dialog', () => { expect(nestedDialogEl.opened).to.be.true; }); }); + + describe('focus', () => { + it('sets focus on contentSlot by default', async () => { + const el = await fixture(html` + + +
+ + +
+
+ `); + // @ts-expect-error [allow-protected-in-tests] + const invokerNode = el._overlayInvokerNode; + invokerNode.focus(); + invokerNode.click(); + const contentNode = el.querySelector('[slot="content"]'); + expect(document.activeElement).to.equal(contentNode); + }); + + it('sets focus on autofocused element', async () => { + const el = await fixture(html` + + +
+ + +
+
+ `); + // @ts-expect-error [allow-protected-in-tests] + const invokerNode = el._overlayInvokerNode; + invokerNode.focus(); + invokerNode.click(); + const input = el.querySelector('input'); + expect(document.activeElement).to.equal(input); + }); + + it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => { + const el = /** @type {LionDialog} */ await fixture(html` + + +
+ + +
+
+ `); + // @ts-expect-error [allow-protected-in-tests] + const invokerNode = el._overlayInvokerNode; + invokerNode.focus(); + invokerNode.click(); + expect(document.activeElement).to.equal(invokerNode); + }); + }); }); diff --git a/packages/ui/components/form-integrations/test/dialog-integrations.test.js b/packages/ui/components/form-integrations/test/dialog-integrations.test.js index a2be44e07..393da46d6 100644 --- a/packages/ui/components/form-integrations/test/dialog-integrations.test.js +++ b/packages/ui/components/form-integrations/test/dialog-integrations.test.js @@ -1,3 +1,4 @@ +/* eslint-disable lit-a11y/no-autofocus */ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit'; import { getAllTagNames } from './helpers/helpers.js'; @@ -70,4 +71,21 @@ describe('Form inside dialog Integrations', () => { 'lion-textarea', ]); }); + + it('sets focus on first focusable element with autofocus', async () => { + const el = /** @type {LionDialog} */ await fixture(html` + + +
+ + +
+
+ `); + // @ts-expect-error [allow-protected-in-tests] + el._overlayInvokerNode.click(); + const lionInput = el.querySelector('[name="input"]'); + // @ts-expect-error [allow-protected-in-tests] + expect(document.activeElement).to.equal(lionInput._focusableNode); + }); });