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

fix: changed selectors for invokers and content to only select slotte…

.changeset/silly-beds-teach.md

@@ -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

packages/ui/components/accordion/src/LionAccordion.js

@@ -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) {

packages/ui/components/accordion/test/lion-accordion.test.js

@@ -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', () => {