diff --git a/.changeset/olive-mirrors-grab.md b/.changeset/olive-mirrors-grab.md
deleted file mode 100644
index e4e2b36de..000000000
--- a/.changeset/olive-mirrors-grab.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@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 5f41ad47e..fa08bc864 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, aTimeout } from '@open-wc/testing';
+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';
@@ -166,24 +166,4 @@ 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 dd4361f69..85c1b2446 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(null);
+ expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
await elObj.openCalendar();
- expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
+ expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true');
await elObj.closeCalendar();
- expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
+ expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
});
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 d47dabd5b..6a6f13d69 100644
--- a/packages/ui/components/overlays/src/OverlayController.js
+++ b/packages/ui/components/overlays/src/OverlayController.js
@@ -640,14 +640,13 @@ export class OverlayController extends EventTarget {
__setupTeardownAccessibility({ phase }) {
if (phase === 'init') {
this.__storeOriginalAttrs(this.contentNode, ['role', 'id']);
- const isModal = this.hasBackdrop;
if (this.invokerNode) {
- const attributesToStore = ['aria-labelledby', 'aria-describedby'];
- if (!isModal) {
- attributesToStore.push('aria-expanded');
- }
- this.__storeOriginalAttrs(this.invokerNode, attributesToStore);
+ this.__storeOriginalAttrs(this.invokerNode, [
+ 'aria-expanded',
+ 'aria-labelledby',
+ 'aria-describedby',
+ ]);
}
if (!this.contentNode.id) {
@@ -662,7 +661,7 @@ export class OverlayController extends EventTarget {
}
this.contentNode.setAttribute('role', 'tooltip');
} else {
- if (this.invokerNode && !isModal) {
+ if (this.invokerNode) {
this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
}
if (!this.contentNode.getAttribute('role')) {
@@ -1093,7 +1092,7 @@ export class OverlayController extends EventTarget {
// @ts-ignore
this.__wrappingDialogNode.close();
// @ts-ignore
- this.__wrappingDialogNode.show();
+ this.__wrappingDialogNode.showModal();
}
// else {
this.enableTrapsKeyboardFocus();
@@ -1300,8 +1299,7 @@ export class OverlayController extends EventTarget {
if (phase === 'init' || phase === 'teardown') {
this.__setupTeardownAccessibility({ phase });
}
- const isModal = this.hasBackdrop;
- if (this.invokerNode && !this.isTooltip && !isModal) {
+ if (this.invokerNode && !this.isTooltip) {
this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`);
}
}