diff --git a/.changeset/sour-books-dress.md b/.changeset/sour-books-dress.md new file mode 100644 index 000000000..eff46b5a0 --- /dev/null +++ b/.changeset/sour-books-dress.md @@ -0,0 +1,7 @@ +--- +'@lion/combobox': patch +--- + +### Bug Fixes + +**combobox**: aria-expanded always applied on element with role=combobox diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js index 9f150c977..d001c80d6 100644 --- a/packages/combobox/src/LionCombobox.js +++ b/packages/combobox/src/LionCombobox.js @@ -740,6 +740,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) { return /** @type {OverlayConfig} */ ({ ...withDropdownConfig(), elementToFocusAfterHide: undefined, + invokerNode: this._comboboxNode, }); } diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js index 49e39c5af..d9ff64b91 100644 --- a/packages/combobox/test/lion-combobox.test.js +++ b/packages/combobox/test/lion-combobox.test.js @@ -708,6 +708,34 @@ describe('lion-combobox', () => { expect(comboboxNode.getAttribute('role')).to.equal('combobox'); }); + it('sets aria-expanded to element with role="combobox" in wai-aria 1.0 and 1.1', async () => { + const el = /** @type {LionCombobox} */ (await fixture(html` + + Item 1 + Item 2 + + `)); + const { comboboxNode } = getProtectedMembers(el); + + expect(comboboxNode.getAttribute('aria-expanded')).to.equal('false'); + el.opened = true; + await el.updateComplete; + expect(comboboxNode.getAttribute('aria-expanded')).to.equal('true'); + + const el2 = /** @type {LionCombobox} */ (await fixture(html` + + Item 1 + Item 2 + + `)); + const { comboboxNode: comboboxNode2 } = getProtectedMembers(el2); + + expect(comboboxNode2.getAttribute('aria-expanded')).to.equal('false'); + el2.opened = true; + await el2.updateComplete; + expect(comboboxNode.getAttribute('aria-expanded')).to.equal('true'); + }); + it('makes sure listbox node is not focusable', async () => { const el = /** @type {LionCombobox} */ (await fixture(html`