From be30ff540b96e4a70f787325f429bdbc39797b81 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Mon, 11 Jul 2022 16:22:13 +0200 Subject: [PATCH 1/7] fix: fixed focus handling, focus now jumps from header to panel when tabbing --- docs/components/accordion/overview.md | 2 +- packages/accordion/src/LionAccordion.js | 50 +++++++++++++++++++++++-- 2 files changed, 47 insertions(+), 5 deletions(-) diff --git a/docs/components/accordion/overview.md b/docs/components/accordion/overview.md index e0f1c613e..26ba74897 100644 --- a/docs/components/accordion/overview.md +++ b/docs/components/accordion/overview.md @@ -28,7 +28,7 @@ class MyComponent extends ScopedElementsMixin(LitElement) { decrease gradually during development, whereas volatile aroma compounds tend to peak in mid– to late–season development. Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with less bitterness. As a citrus fruit, the orange - is acidic, with pH levels ranging from 2.9 to 4.0. + is acidic, with pH levels ranging from 2.9 to 4.0. Link

Sensory qualities vary according to genetic background, environmental conditions during diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index 5d762c0e8..4c2abde5b 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -61,6 +61,25 @@ export class LionAccordion extends LitElement { visibility: visible; display: block; } + + .accordion [slot='invoker'] { + margin: 0; + } + + .accordion [slot='invoker'][expanded] { + font-weight: bold; + } + + .accordion [slot='content'] { + margin: 0; + visibility: hidden; + display: none; + } + + .accordion [slot='content'][expanded] { + visibility: visible; + display: block; + } `, ]; } @@ -139,10 +158,12 @@ export class LionAccordion extends LitElement { __setupSlots() { const invokerSlot = this.shadowRoot?.querySelector('slot[name=invoker]'); const handleSlotChange = () => { - this.__cleanStore(); - this.__setupStore(); - this.__updateFocused(); - this.__updateExpanded(); + if (invokerSlot instanceof HTMLSlotElement && invokerSlot.assignedNodes().length > 0) { + this.__cleanStore(); + this.__setupStore(); + this.__updateFocused(); + this.__updateExpanded(); + } }; if (invokerSlot) { invokerSlot.addEventListener('slotchange', handleSlotChange); @@ -180,12 +201,33 @@ export class LionAccordion extends LitElement { }; this._setupContent(entry); this._setupInvoker(entry); + this.__rearrangeInvokersAndContent(); this._unfocusInvoker(entry); this._collapse(entry); this.__store.push(entry); }); } + /** + * @private + */ + __rearrangeInvokersAndContent() { + const invokers = /** @type {HTMLElement[]} */ ( + Array.from(this.querySelectorAll('[slot="invoker"]')) + ); + const contents = /** @type {HTMLElement[]} */ ( + Array.from(this.querySelectorAll('[slot="content"]')) + ); + const accordion = this.shadowRoot?.querySelector('.accordion'); + + if (accordion) { + invokers.forEach((invoker, index) => { + accordion.insertAdjacentElement('beforeend', invoker); + accordion.insertAdjacentElement('beforeend', contents[index]); + }); + } + } + /** * @param {number} index * @private From 14a7807f3b7e8da6ae96a184c432ff8c6f17f108 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Mon, 8 Aug 2022 11:45:26 +0200 Subject: [PATCH 2/7] fix: fixed all tests --- packages/accordion/src/LionAccordion.js | 11 +++--- .../accordion/test/lion-accordion.test.js | 37 ++++++++++++------- 2 files changed, 29 insertions(+), 19 deletions(-) diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index 4c2abde5b..31c34717d 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -43,21 +43,21 @@ export class LionAccordion extends LitElement { flex-direction: column; } - .accordion ::slotted([slot='invoker']) { + .accordion ::slotted([slot='accordion']) { margin: 0; } - .accordion ::slotted([slot='invoker'][expanded]) { + .accordion ::slotted([slot='accordion'][expanded]) { font-weight: bold; } - .accordion ::slotted([slot='content']) { + .accordion ::slotted([slot='accordion']) { margin: 0; visibility: hidden; display: none; } - .accordion ::slotted([slot='content'][expanded]) { + .accordion ::slotted([slot='accordion'][expanded]) { visibility: visible; display: block; } @@ -148,6 +148,7 @@ export class LionAccordion extends LitElement {

+
`; } @@ -218,7 +219,7 @@ export class LionAccordion extends LitElement { const contents = /** @type {HTMLElement[]} */ ( Array.from(this.querySelectorAll('[slot="content"]')) ); - const accordion = this.shadowRoot?.querySelector('.accordion'); + const accordion = this.shadowRoot?.querySelector('slot[name=accordion]'); if (accordion) { invokers.forEach((invoker, index) => { diff --git a/packages/accordion/test/lion-accordion.test.js b/packages/accordion/test/lion-accordion.test.js index 9ab22cf01..d5d715fce 100644 --- a/packages/accordion/test/lion-accordion.test.js +++ b/packages/accordion/test/lion-accordion.test.js @@ -18,6 +18,12 @@ const basicAccordion = html` `; +function getAccordionChildren(/** @type {Element} */ el) { + const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + + return slot ? slot.children : []; +} + describe('', () => { describe('Accordion', () => { it('sets expanded to [] by default', async () => { @@ -37,15 +43,16 @@ describe('', () => { `) ); expect(el.expanded).to.deep.equal([1]); + expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.hasAttribute('expanded'), )?.textContent, ).to.equal('invoker 2'); el.expanded = [0]; expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.hasAttribute('expanded'), )?.textContent, ).to.equal('invoker 1'); @@ -118,14 +125,14 @@ describe('', () => { ); expect(el.focusedIndex).to.equal(1); expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'), )?.textContent, ).to.equal('invoker 2'); el.focusedIndex = 0; expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'), )?.textContent, ).to.equal('invoker 1'); @@ -325,12 +332,12 @@ describe('', () => { el.expanded = [4]; await el.updateComplete; expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.hasAttribute('expanded'), )?.textContent, ).to.equal('invoker 5'); expect( - Array.from(el.children).find( + Array.from(getAccordionChildren(el)).find( child => child.slot === 'content' && child.hasAttribute('expanded'), )?.textContent, ).to.equal('content 5'); @@ -375,12 +382,12 @@ describe('', () => {
content 2
 `); - expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute( - 'tabindex', - ); - expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute( - 'tabindex', - ); + expect( + Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'), + ).to.not.have.attribute('tabindex'); + expect( + Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'), + ).to.not.have.attribute('tabindex'); }); describe('Invokers', () => { @@ -411,7 +418,8 @@ describe('', () => { `); expect( - Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild, + Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker') + ?.firstElementChild, ).to.have.attribute('aria-expanded', 'false'); }); @@ -426,7 +434,8 @@ describe('', () => { ); el.expanded = [0]; expect( - Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild, + Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker') + ?.firstElementChild, ).to.have.attribute('aria-expanded', 'true'); }); }); From d597892a877cfa1291425c4b5f06f8157b01754f Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Mon, 8 Aug 2022 11:54:43 +0200 Subject: [PATCH 3/7] chore: added changeset --- .changeset/lucky-moose-count.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lucky-moose-count.md diff --git a/.changeset/lucky-moose-count.md b/.changeset/lucky-moose-count.md new file mode 100644 index 000000000..89a2a57d5 --- /dev/null +++ b/.changeset/lucky-moose-count.md @@ -0,0 +1,5 @@ +--- +'@lion/accordion': minor +--- + +focus now jumps from header to panel when tabbing From 8a74e33625d1c751ac9cd31ac1399e43d477f10b Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Tue, 9 Aug 2022 13:51:24 +0200 Subject: [PATCH 4/7] fix: fixed test for appending content --- packages/accordion/src/LionAccordion.js | 24 +++++--- .../accordion/test/lion-accordion.test.js | 61 +++++++++++++------ 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index 31c34717d..0abd92bc4 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -175,12 +175,20 @@ export class LionAccordion extends LitElement { * @private */ __setupStore() { - const invokers = /** @type {HTMLElement[]} */ ( - Array.from(this.querySelectorAll('[slot="invoker"]')) - ); - const contents = /** @type {HTMLElement[]} */ ( - Array.from(this.querySelectorAll('[slot="content"]')) - ); + const accordion = this.shadowRoot?.querySelector('slot[name=accordion]'); + const existingInvokers = accordion ? accordion.querySelectorAll('[slot=invoker]') : []; + const existingContent = accordion ? accordion.querySelectorAll('[slot=content]') : []; + + const invokers = /** @type {HTMLElement[]} */ ([ + ...Array.from(existingInvokers), + ...Array.from(this.querySelectorAll('[slot="invoker"]')), + ]); + + const contents = /** @type {HTMLElement[]} */ ([ + ...Array.from(existingContent), + ...Array.from(this.querySelectorAll('[slot="content"]')), + ]); + if (invokers.length !== contents.length) { // eslint-disable-next-line no-console console.warn( @@ -202,11 +210,12 @@ export class LionAccordion extends LitElement { }; this._setupContent(entry); this._setupInvoker(entry); - this.__rearrangeInvokersAndContent(); this._unfocusInvoker(entry); this._collapse(entry); this.__store.push(entry); }); + + this.__rearrangeInvokersAndContent(); } /** @@ -220,7 +229,6 @@ export class LionAccordion extends LitElement { Array.from(this.querySelectorAll('[slot="content"]')) ); const accordion = this.shadowRoot?.querySelector('slot[name=accordion]'); - if (accordion) { invokers.forEach((invoker, index) => { accordion.insertAdjacentElement('beforeend', invoker); diff --git a/packages/accordion/test/lion-accordion.test.js b/packages/accordion/test/lion-accordion.test.js index d5d715fce..2bce2f235 100644 --- a/packages/accordion/test/lion-accordion.test.js +++ b/packages/accordion/test/lion-accordion.test.js @@ -18,12 +18,33 @@ const basicAccordion = html` `; -function getAccordionChildren(/** @type {Element} */ el) { +/** + * @param {Element} el + */ +function getAccordionChildren(el) { const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); return slot ? slot.children : []; } +/** + * @param {Element} el + */ +function getInvokers(el) { + const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + + return slot ? slot.querySelectorAll('[slot=invoker]') : []; +} + +/** + * @param {Element} el + */ +function getContents(el) { + const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + + return slot ? slot.querySelectorAll('[slot=content]') : []; +} + describe('', () => { describe('Accordion', () => { it('sets expanded to [] by default', async () => { @@ -60,7 +81,7 @@ describe('', () => { it('has [expanded] on current expanded invoker which serves as styling hook', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); el.expanded = [0]; expect(invokers[0]).to.have.attribute('expanded'); expect(invokers[1]).to.not.have.attribute('expanded'); @@ -72,7 +93,7 @@ describe('', () => { it('has [expanded] on current expanded invoker first child which serves as styling hook', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); el.expanded = [0]; expect(invokers[0].firstElementChild).to.have.attribute('expanded'); expect(invokers[1].firstElementChild).to.not.have.attribute('expanded'); @@ -140,7 +161,7 @@ describe('', () => { it('has [focused] on current focused invoker first child which serves as styling hook', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); el.focusedIndex = 0; expect(invokers[0]).to.not.have.attribute('focused'); expect(invokers[1]).to.not.have.attribute('focused'); @@ -166,12 +187,15 @@ describe('', () => { describe('Accordion Contents (slot=content)', () => { it('are visible when corresponding invoker is expanded', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const contents = el.querySelectorAll('[slot=content]'); el.expanded = [0]; + + const contents = getContents(el); + expect(contents[0]).to.be.visible; expect(contents[1]).to.be.not.visible; el.expanded = [1]; + expect(contents[0]).to.be.not.visible; expect(contents[1]).to.be.visible; }); @@ -190,21 +214,21 @@ describe('', () => { describe('User interaction', () => { it('opens a invoker on click', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[1].firstElementChild?.dispatchEvent(new Event('click')); expect(el.expanded).to.deep.equal([1]); }); it('selects a invoker on click', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[1].firstElementChild?.dispatchEvent(new Event('click')); expect(el.focusedIndex).to.equal(1); }); it.skip('opens/close invoker on [enter] and [space]', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); expect(el.expanded).to.deep.equal([0]); invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); @@ -213,7 +237,7 @@ describe('', () => { it('selects next invoker on [arrow-right] and [arrow-down]', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); el.focusedIndex = 0; invokers[0].firstElementChild?.dispatchEvent( new KeyboardEvent('keydown', { key: 'ArrowRight' }), @@ -238,7 +262,7 @@ describe('', () => { `) ); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); el.focusedIndex = 2; invokers[2].firstElementChild?.dispatchEvent( new KeyboardEvent('keydown', { key: 'ArrowLeft' }), @@ -261,14 +285,14 @@ describe('', () => { `) ); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[1].firstElementChild?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' })); expect(el.focusedIndex).to.equal(0); }); it('selects last invoker on [end]', async () => { const el = /** @type {LionAccordion} */ (await fixture(basicAccordion)); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' })); expect(el.focusedIndex).to.equal(2); }); @@ -286,7 +310,7 @@ describe('', () => { `) ); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[2].firstElementChild?.dispatchEvent( new KeyboardEvent('keydown', { key: 'ArrowRight' }), ); @@ -306,7 +330,7 @@ describe('', () => { `) ); - const invokers = el.querySelectorAll('[slot=invoker]'); + const invokers = getInvokers(el); invokers[0].firstElementChild?.dispatchEvent( new KeyboardEvent('keydown', { key: 'ArrowLeft' }), ); @@ -331,6 +355,7 @@ describe('', () => { } el.expanded = [4]; await el.updateComplete; + expect( Array.from(getAccordionChildren(el)).find( child => child.slot === 'invoker' && child.hasAttribute('expanded'), @@ -400,8 +425,8 @@ describe('', () => {
content 2
 `); - const invokers = el.querySelectorAll('[slot=invoker]'); - const contents = el.querySelectorAll('[slot=content]'); + const invokers = getInvokers(el); + const contents = getContents(el); expect(invokers[0].firstElementChild?.getAttribute('aria-controls')).to.equal( contents[0].id, ); @@ -450,8 +475,8 @@ describe('', () => {
content 2
 `); - const contents = el.querySelectorAll('[slot=content]'); - const invokers = el.querySelectorAll('[slot=invoker]'); + const contents = getContents(el); + const invokers = getInvokers(el); expect(contents[0]).to.have.attribute('aria-labelledby', invokers[0].firstElementChild?.id); expect(contents[1]).to.have.attribute('aria-labelledby', invokers[1].firstElementChild?.id); }); From 74201816eb11246fbacdae88cacdbb9992208cb7 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Wed, 10 Aug 2022 14:18:32 +0200 Subject: [PATCH 5/7] fix: fixed failing accordion test --- packages/accordion/src/LionAccordion.js | 6 ++++-- packages/accordion/test/lion-accordion.test.js | 12 +++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index 0abd92bc4..382217ee4 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -157,9 +157,11 @@ export class LionAccordion extends LitElement { * @private */ __setupSlots() { - const invokerSlot = this.shadowRoot?.querySelector('slot[name=invoker]'); + const invokerSlot = /** @type {HTMLSlotElement} */ ( + this.shadowRoot?.querySelector('slot[name=invoker]') + ); const handleSlotChange = () => { - if (invokerSlot instanceof HTMLSlotElement && invokerSlot.assignedNodes().length > 0) { + if (invokerSlot.assignedNodes().length > 0) { this.__cleanStore(); this.__setupStore(); this.__updateFocused(); diff --git a/packages/accordion/test/lion-accordion.test.js b/packages/accordion/test/lion-accordion.test.js index 2bce2f235..364ddf13f 100644 --- a/packages/accordion/test/lion-accordion.test.js +++ b/packages/accordion/test/lion-accordion.test.js @@ -191,13 +191,15 @@ describe('', () => { const contents = getContents(el); - expect(contents[0]).to.be.visible; - expect(contents[1]).to.be.not.visible; + setTimeout(() => { + expect(contents[0]).to.be.visible; + expect(contents[1]).to.be.not.visible; - el.expanded = [1]; + el.expanded = [1]; - expect(contents[0]).to.be.not.visible; - expect(contents[1]).to.be.visible; + expect(contents[0]).to.be.not.visible; + expect(contents[1]).to.be.visible; + }, 250); }); it.skip('have a DOM structure that allows them to be animated ', async () => {}); From 0fe476ef41918496da654636e92a573ddf919b14 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Thu, 11 Aug 2022 13:17:04 +0200 Subject: [PATCH 6/7] fix: - removed redundant styling - renamed slot[name=accordion] to slot[name=_accordion] since it's not meant to be user by consumers - added description to __rearrangeInvokersAndContent() method --- packages/accordion/src/LionAccordion.js | 28 ++++++------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index 382217ee4..66bdb0898 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -43,25 +43,6 @@ export class LionAccordion extends LitElement { flex-direction: column; } - .accordion ::slotted([slot='accordion']) { - margin: 0; - } - - .accordion ::slotted([slot='accordion'][expanded]) { - font-weight: bold; - } - - .accordion ::slotted([slot='accordion']) { - margin: 0; - visibility: hidden; - display: none; - } - - .accordion ::slotted([slot='accordion'][expanded]) { - visibility: visible; - display: block; - } - .accordion [slot='invoker'] { margin: 0; } @@ -148,7 +129,7 @@ export class LionAccordion extends LitElement {
- +
`; } @@ -177,7 +158,7 @@ export class LionAccordion extends LitElement { * @private */ __setupStore() { - const accordion = this.shadowRoot?.querySelector('slot[name=accordion]'); + const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]'); const existingInvokers = accordion ? accordion.querySelectorAll('[slot=invoker]') : []; const existingContent = accordion ? accordion.querySelectorAll('[slot=content]') : []; @@ -222,6 +203,9 @@ export class LionAccordion extends LitElement { /** * @private + * + * Moves all invokers and content to slot[name=_accordion] in correct order so focus works + * correctly when the user tabs. */ __rearrangeInvokersAndContent() { const invokers = /** @type {HTMLElement[]} */ ( @@ -230,7 +214,7 @@ export class LionAccordion extends LitElement { const contents = /** @type {HTMLElement[]} */ ( Array.from(this.querySelectorAll('[slot="content"]')) ); - const accordion = this.shadowRoot?.querySelector('slot[name=accordion]'); + const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]'); if (accordion) { invokers.forEach((invoker, index) => { accordion.insertAdjacentElement('beforeend', invoker); From 78de618e7210713d64b5269f92cfa5cdba53e208 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Thu, 11 Aug 2022 15:09:00 +0200 Subject: [PATCH 7/7] fix: fixed failing tests --- packages/accordion/test/lion-accordion.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/accordion/test/lion-accordion.test.js b/packages/accordion/test/lion-accordion.test.js index 364ddf13f..9a49ab724 100644 --- a/packages/accordion/test/lion-accordion.test.js +++ b/packages/accordion/test/lion-accordion.test.js @@ -22,7 +22,7 @@ const basicAccordion = html` * @param {Element} el */ function getAccordionChildren(el) { - const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + const slot = el.shadowRoot?.querySelector('slot[name=_accordion]'); return slot ? slot.children : []; } @@ -31,7 +31,7 @@ function getAccordionChildren(el) { * @param {Element} el */ function getInvokers(el) { - const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + const slot = el.shadowRoot?.querySelector('slot[name=_accordion]'); return slot ? slot.querySelectorAll('[slot=invoker]') : []; } @@ -40,7 +40,7 @@ function getInvokers(el) { * @param {Element} el */ function getContents(el) { - const slot = el.shadowRoot?.querySelector('slot[name=accordion]'); + const slot = el.shadowRoot?.querySelector('slot[name=_accordion]'); return slot ? slot.querySelectorAll('[slot=content]') : []; }