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

fix(listbox): enable deselection on Enter/Space for multiselect

Browse source
This commit is contained in:
Thijs Louisse 2020-10-28 11:57:21 +01:00
parent 65d0cf9f80
commit 8cd22107ea
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/listbox/src/ListboxMixin.js
View file

@ -348,7 +348,7 @@ const ListboxMixinImplementation = superclass =>
this._uncheckChildren(this.formElements.filter(i => i === index)); this._uncheckChildren(this.formElements.filter(i => i === index));
index.forEach(i => { index.forEach(i => {
if (this.formElements[i]) { if (this.formElements[i]) {
this.formElements[i].checked = true; this.formElements[i].checked = !this.formElements[i].checked;
} }
}); });
return; return;
@ -359,7 +359,11 @@ const ListboxMixinImplementation = superclass =>
this._uncheckChildren(); this._uncheckChildren();
} }
if (this.formElements[index]) { if (this.formElements[index]) {
this.formElements[index].checked = true; if (this.multipleChoice) {
this.formElements[index].checked = !this.formElements[index].checked;
} else {
this.formElements[index].checked = true;
}
} }
} }
} }

18
packages/listbox/test-suites/ListboxMixin.suite.js
View file

@ -370,7 +370,7 @@ export function runListboxMixinSuite(customConfig = {}) {
it('has a reference to the active option', async () => { it('has a reference to the active option', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag} opened has-no-default-selected autocomplete="list"> <${tag} opened has-no-default-selected autocomplete="none">
<${optionTag} .choiceValue=${'10'} id="first">Item 1</${optionTag}> <${optionTag} .choiceValue=${'10'} id="first">Item 1</${optionTag}>
<${optionTag} .choiceValue=${'20'} checked id="second">Item 2</${optionTag}> <${optionTag} .choiceValue=${'20'} checked id="second">Item 2</${optionTag}>
</${tag}> </${tag}>
@ -382,10 +382,6 @@ export function runListboxMixinSuite(customConfig = {}) {
// Normalize // Normalize
el.activeIndex = 0; el.activeIndex = 0;
// el._activeDescendantOwnerNode.dispatchEvent(
// new KeyboardEvent('keydown', { key: 'ArrowDown' }),
// );
await el.updateComplete; await el.updateComplete;
expect(activeDescendantOwner.getAttribute('aria-activedescendant')).to.equal('first'); expect(activeDescendantOwner.getAttribute('aria-activedescendant')).to.equal('first');
activeDescendantOwner.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' })); activeDescendantOwner.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
@ -829,6 +825,10 @@ export function runListboxMixinSuite(customConfig = {}) {
options[1].click(); options[1].click();
expect(options[0].checked).to.equal(true); expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke', 'Chard']); expect(el.modelValue).to.eql(['Artichoke', 'Chard']);
// also deselect
options[1].click();
expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke']);
// Reset // Reset
// @ts-ignore allow protected members in tests // @ts-ignore allow protected members in tests
@ -841,6 +841,10 @@ export function runListboxMixinSuite(customConfig = {}) {
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
expect(options[0].checked).to.equal(true); expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke', 'Chard']); expect(el.modelValue).to.eql(['Artichoke', 'Chard']);
// also deselect
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke']);
// @ts-ignore allow protected // @ts-ignore allow protected
if (el._listboxReceivesNoFocus) { if (el._listboxReceivesNoFocus) {
@ -858,6 +862,10 @@ export function runListboxMixinSuite(customConfig = {}) {
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' })); listbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
expect(options[0].checked).to.equal(true); expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke', 'Chard']); expect(el.modelValue).to.eql(['Artichoke', 'Chard']);
// also deselect
listbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
expect(options[0].checked).to.equal(true);
expect(el.modelValue).to.eql(['Artichoke']);
}); });
describe('Accessibility', () => { describe('Accessibility', () => {