Revert "fix: add aria-expanded attribute only for the non-modal dialogs"

This reverts commit fa832d9.
ing-bank · Aug 27, 2024 · 5f92a72 · 5f92a72
1 parent fa832d9
commit 5f92a72
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 39 deletions.
diff --git a/.changeset/olive-mirrors-grab.md b/.changeset/olive-mirrors-grab.md
diff --git 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` <lion-dialog>
-          <div slot="content" class="dialog">Hey there</div>
-          <button slot="invoker">Popup button</button>
-        </lion-dialog>`,
-      );
-      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
@@ -495,11 +495,11 @@ describe('<lion-input-datepicker>', () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       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
@@ -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'}`);
     }
   }