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

fix(accordion): make accordion closeable again (#2376)

Browse source
This commit is contained in:
gerjanvangeest 2024-10-14 14:33:20 +02:00 committed by GitHub
parent 577e05eb94
commit 96b09e56d1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/thick-pandas-exist.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[accordion] make accordion closeable again

2
packages/ui/components/accordion/src/LionAccordion.js
View file

@ -451,7 +451,7 @@ export class LionAccordion extends LitElement {
if (indexFound === -1) { if (indexFound === -1) {
expandedNewValues.push(indexClicked); expandedNewValues.push(indexClicked);
} else if (expandedNewValues.includes(indexFound)) { } else {
expandedNewValues.splice(indexFound, 1); expandedNewValues.splice(indexFound, 1);
} }

13
packages/ui/components/accordion/test/lion-accordion.test.js
View file

@ -1,5 +1,6 @@
import { expect, fixture } from '@open-wc/testing'; import { expect, fixture } from '@open-wc/testing';
import { html } from 'lit/static-html.js'; import { html } from 'lit/static-html.js';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon'; import sinon from 'sinon';
import '@lion/ui/define/lion-accordion.js'; import '@lion/ui/define/lion-accordion.js';
@ -309,11 +310,14 @@ describe('<lion-accordion>', () => {
* > content content to be preloaded. * > content content to be preloaded.
*/ */
describe('User interaction', () => { 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 el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = getInvokers(el); const invokers = getInvokers(el);
invokers[1].firstElementChild?.dispatchEvent(new Event('click')); invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
expect(el.expanded).to.deep.equal([1]); 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 () => { it('selects a invoker on click', async () => {
@ -323,12 +327,13 @@ describe('<lion-accordion>', () => {
expect(el.focusedIndex).to.equal(1); 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 el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = getInvokers(el); 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]); 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([]); expect(el.expanded).to.deep.equal([]);
}); });