diff --git a/.changeset/thick-pandas-exist.md b/.changeset/thick-pandas-exist.md new file mode 100644 index 000000000..f9dee8a7c --- /dev/null +++ b/.changeset/thick-pandas-exist.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[accordion] make accordion closeable again diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js index c7c19979d..6c58bd3ad 100644 --- a/packages/ui/components/accordion/src/LionAccordion.js +++ b/packages/ui/components/accordion/src/LionAccordion.js @@ -451,7 +451,7 @@ export class LionAccordion extends LitElement { if (indexFound === -1) { expandedNewValues.push(indexClicked); - } else if (expandedNewValues.includes(indexFound)) { + } else { expandedNewValues.splice(indexFound, 1); } diff --git a/packages/ui/components/accordion/test/lion-accordion.test.js b/packages/ui/components/accordion/test/lion-accordion.test.js index c3489f7d9..d5e16b8fc 100644 --- a/packages/ui/components/accordion/test/lion-accordion.test.js +++ b/packages/ui/components/accordion/test/lion-accordion.test.js @@ -1,5 +1,6 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; import '@lion/ui/define/lion-accordion.js'; @@ -309,11 +310,14 @@ describe('', () => { * > content content to be preloaded. */ describe('User interaction', () => { - it('opens a invoker on click', async () => { + it('opens/close an invoker on click', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); const invokers = getInvokers(el); invokers[1].firstElementChild?.dispatchEvent(new Event('click')); expect(el.expanded).to.deep.equal([1]); + + invokers[1].firstElementChild?.dispatchEvent(new Event('click')); + expect(el.expanded).to.deep.equal([]); }); it('selects a invoker on click', async () => { @@ -323,12 +327,13 @@ describe('', () => { expect(el.focusedIndex).to.equal(1); }); - it.skip('opens/close invoker on [enter] and [space]', async () => { + it('opens/close invoker on [enter] and [space]', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); const invokers = getInvokers(el); - invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); + invokers[0].getElementsByTagName('button')[0].focus(); + await sendKeys({ press: 'Enter' }); expect(el.expanded).to.deep.equal([0]); - invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); + await sendKeys({ press: 'Space' }); expect(el.expanded).to.deep.equal([]); });