diff --git a/.changeset/olive-mirrors-grab.md b/.changeset/olive-mirrors-grab.md new file mode 100644 index 000000000..e4e2b36de --- /dev/null +++ b/.changeset/olive-mirrors-grab.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +add "aria-expanded" attribute only for the non-modal dialogs diff --git a/packages/ui/components/dialog/test/lion-dialog.test.js b/packages/ui/components/dialog/test/lion-dialog.test.js index fa08bc864..5f41ad47e 100644 --- a/packages/ui/components/dialog/test/lion-dialog.test.js +++ b/packages/ui/components/dialog/test/lion-dialog.test.js @@ -1,5 +1,5 @@ /* eslint-disable lit-a11y/no-autofocus */ -import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing'; +import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing'; import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js'; import '@lion/ui/define/lion-dialog.js'; @@ -166,4 +166,24 @@ describe('lion-dialog', () => { el.setAttribute('opened', ''); }); }); + + describe('Accessibility', () => { + it('adds [aria-expanded] to invoker button', async () => { + const el = await fixture( + html` +
Hey there
+ +
`, + ); + const invokerButton = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]')); + + expect(invokerButton.getAttribute('aria-expanded')).to.equal(null); + await invokerButton.click(); + await aTimeout(0); + expect(invokerButton.getAttribute('aria-expanded')).to.equal(null); + await invokerButton.click(); + await aTimeout(0); + expect(invokerButton.getAttribute('aria-expanded')).to.equal(null); + }); + }); }); diff --git a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js index 85c1b2446..dd4361f69 100644 --- a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js @@ -495,11 +495,11 @@ describe('', () => { const el = await fixture(html``); const elObj = new DatepickerInputObject(el); - expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false'); + expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null); await elObj.openCalendar(); - expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true'); + expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null); await elObj.closeCalendar(); - expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false'); + expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null); }); it('is accessible when closed', async () => { diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js index 6a6f13d69..d47dabd5b 100644 --- a/packages/ui/components/overlays/src/OverlayController.js +++ b/packages/ui/components/overlays/src/OverlayController.js @@ -640,13 +640,14 @@ export class OverlayController extends EventTarget { __setupTeardownAccessibility({ phase }) { if (phase === 'init') { this.__storeOriginalAttrs(this.contentNode, ['role', 'id']); + const isModal = this.hasBackdrop; if (this.invokerNode) { - this.__storeOriginalAttrs(this.invokerNode, [ - 'aria-expanded', - 'aria-labelledby', - 'aria-describedby', - ]); + const attributesToStore = ['aria-labelledby', 'aria-describedby']; + if (!isModal) { + attributesToStore.push('aria-expanded'); + } + this.__storeOriginalAttrs(this.invokerNode, attributesToStore); } if (!this.contentNode.id) { @@ -661,7 +662,7 @@ export class OverlayController extends EventTarget { } this.contentNode.setAttribute('role', 'tooltip'); } else { - if (this.invokerNode) { + if (this.invokerNode && !isModal) { this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`); } if (!this.contentNode.getAttribute('role')) { @@ -1092,7 +1093,7 @@ export class OverlayController extends EventTarget { // @ts-ignore this.__wrappingDialogNode.close(); // @ts-ignore - this.__wrappingDialogNode.showModal(); + this.__wrappingDialogNode.show(); } // else { this.enableTrapsKeyboardFocus(); @@ -1299,7 +1300,8 @@ export class OverlayController extends EventTarget { if (phase === 'init' || phase === 'teardown') { this.__setupTeardownAccessibility({ phase }); } - if (this.invokerNode && !this.isTooltip) { + const isModal = this.hasBackdrop; + if (this.invokerNode && !this.isTooltip && !isModal) { this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`); } }