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

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

Browse source 
This reverts commit fa832d900b.
This commit is contained in:
okadurin 2024-08-27 16:48:27 +02:00
parent fa832d900b
commit 5f92a722e6
4 changed files with 12 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/olive-mirrors-grab.md
View file

@ -1,5 +0,0 @@
---
'@lion/ui': patch
---
add "aria-expanded" attribute only for the non-modal dialogs

22
packages/ui/components/dialog/test/lion-dialog.test.js
View file

@ -1,5 +1,5 @@
/* eslint-disable lit-a11y/no-autofocus */ /* 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 { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
import '@lion/ui/define/lion-dialog.js'; import '@lion/ui/define/lion-dialog.js';
@ -166,24 +166,4 @@ describe('lion-dialog', () => {
el.setAttribute('opened', ''); 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);
});
});
}); });

6
packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -495,11 +495,11 @@ describe('<lion-input-datepicker>', () => {
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`); const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el); 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(); await elObj.openCalendar();
expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null); expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('true');
await elObj.closeCalendar(); 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 () => { it('is accessible when closed', async () => {

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

@ -640,14 +640,13 @@ export class OverlayController extends EventTarget {
__setupTeardownAccessibility({ phase }) { __setupTeardownAccessibility({ phase }) {
if (phase === 'init') { if (phase === 'init') {
this.__storeOriginalAttrs(this.contentNode, ['role', 'id']); this.__storeOriginalAttrs(this.contentNode, ['role', 'id']);
const isModal = this.hasBackdrop;
if (this.invokerNode) { if (this.invokerNode) {
const attributesToStore = ['aria-labelledby', 'aria-describedby']; this.__storeOriginalAttrs(this.invokerNode, [
if (!isModal) { 'aria-expanded',
attributesToStore.push('aria-expanded'); 'aria-labelledby',
} 'aria-describedby',
this.__storeOriginalAttrs(this.invokerNode, attributesToStore); ]);
} }
if (!this.contentNode.id) { if (!this.contentNode.id) {
@ -662,7 +661,7 @@ export class OverlayController extends EventTarget {
} }
this.contentNode.setAttribute('role', 'tooltip'); this.contentNode.setAttribute('role', 'tooltip');
} else { } else {
if (this.invokerNode && !isModal) { if (this.invokerNode) {
this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`); this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
} }
if (!this.contentNode.getAttribute('role')) { if (!this.contentNode.getAttribute('role')) {
@ -1093,7 +1092,7 @@ export class OverlayController extends EventTarget {
// @ts-ignore // @ts-ignore
this.__wrappingDialogNode.close(); this.__wrappingDialogNode.close();
// @ts-ignore // @ts-ignore
this.__wrappingDialogNode.show(); this.__wrappingDialogNode.showModal();
} }
// else { // else {
this.enableTrapsKeyboardFocus(); this.enableTrapsKeyboardFocus();
@ -1300,8 +1299,7 @@ export class OverlayController extends EventTarget {
if (phase === 'init' || phase === 'teardown') { if (phase === 'init' || phase === 'teardown') {
this.__setupTeardownAccessibility({ phase }); this.__setupTeardownAccessibility({ phase });
} }
const isModal = this.hasBackdrop; if (this.invokerNode && !this.isTooltip) {
if (this.invokerNode && !this.isTooltip && !isModal) {
this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`); this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`);
} }
} }