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

fix(combobox): aria-expanded always on elm with role=combobox

Browse source
This commit is contained in:
Thijs Louisse 2021-04-08 12:44:34 +02:00
parent 0dc706b6f9
commit e301ef9657
3 changed files with 36 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/sour-books-dress.md Normal file
View file

@ -0,0 +1,7 @@
---
'@lion/combobox': patch
---
### Bug Fixes
**combobox**: aria-expanded always applied on element with role=combobox

1
packages/combobox/src/LionCombobox.js
View file

@ -740,6 +740,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
return /** @type {OverlayConfig} */ ({
...withDropdownConfig(),
elementToFocusAfterHide: undefined,
invokerNode: this._comboboxNode,
});
}

28
packages/combobox/test/lion-combobox.test.js
View file

@ -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`
<lion-combobox name="foo" ._ariaVersion="${'1.0'}">
<lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
<lion-option .choiceValue="${'20'}">Item 2</lion-option>
</lion-combobox>
`));
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`
<lion-combobox name="foo" ._ariaVersion="${'1.1'}">
<lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
<lion-option .choiceValue="${'20'}">Item 2</lion-option>
</lion-combobox>
`));
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`
<lion-combobox name="foo">