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

Merge pull request #1934 from ing-bank/fix/accordion-selector-fix

Browse source 
fix: changed selectors for invokers and content to only select slotte…
This commit is contained in:
Danny Moerkerke 2023-03-15 09:35:53 +01:00 committed by GitHub
commit 075d5077bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/silly-beds-teach.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
lion-accordion: changed selectors for invokers and content to only select slotted elements that are direct descendants. This is to prevent that slotted elements in accordion content and invokers are also selected and the amount of invokers and content is incorrect

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

@ -171,12 +171,12 @@ export class LionAccordion extends LitElement {
const invokers = /** @type {HTMLElement[]} */ ([
...Array.from(existingInvokers),
...Array.from(this.querySelectorAll('[slot="invoker"]')),
...Array.from(this.querySelectorAll(':scope > [slot="invoker"]')),
]);
const contents = /** @type {HTMLElement[]} */ ([
...Array.from(existingContent),
...Array.from(this.querySelectorAll('[slot="content"]')),
...Array.from(this.querySelectorAll(':scope > [slot="content"]')),
]);
if (invokers.length !== contents.length) {

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

@ -126,6 +126,37 @@ describe('<lion-accordion>', () => {
);
stub.restore();
});
it('does not select any elements with slot="invoker" and slot="content" inside slotted elements', async () => {
const stub = sinon.stub(console, 'warn');
const el = /** @type {LionAccordion} */ (
await fixture(html`
<lion-accordion>
<h2 slot="invoker">
<button>invoker 1</button>
<button slot="invoker">Nested invoker</button>
</h2>
<h2 slot="invoker"><button>invoker 2</button></h2>
<div slot="content">
content 1
<p slot="content">Nested content 1</p>
</div>
<div slot="content">
content 2
<p slot="content">Nested content 2</p>
</div>
</lion-accordion>
`)
);
const invokers = Array.from(getInvokers(el));
const contents = Array.from(getContents(el));
expect(stub.called).to.be.false;
expect(invokers.length).to.equal(contents.length);
stub.restore();
});
});
describe('Accordion navigation', () => {