diff --git a/examples/index.html b/examples/index.html index 12fc8e7..238e319 100644 --- a/examples/index.html +++ b/examples/index.html @@ -67,27 +67,6 @@

Horizontal (custom tablist and tablist-wrapper)

-

Horizontal (custom tablist and tablist-tab-wrapper)

- - -
-
- - - -
-
-
- Panel 1 -
- - -
-

Vertical (shadow tablist)

@@ -144,7 +123,7 @@

Set initially selected tab

Set default tab

- + diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts index 2374f00..ebccbd9 100644 --- a/src/tab-container-element.ts +++ b/src/tab-container-element.ts @@ -110,7 +110,7 @@ export class TabContainerElement extends HTMLElement { static observedAttributes = ['vertical'] get #tabList() { - const wrapper = this.querySelector('[slot=tablist-wrapper],[slot=tablist-tab-wrapper]') + const wrapper = this.querySelector('[slot=tablist-wrapper]') if (wrapper?.closest(this.tagName) === this) { return wrapper.querySelector('[role=tablist]') as HTMLElement } @@ -127,7 +127,7 @@ export class TabContainerElement extends HTMLElement { } get #tabListTabWrapper() { - return this.shadowRoot!.querySelector('slot[part="tablist-tab-wrapper"]')! + return this.shadowRoot!.querySelector('div[part="tablist-tab-wrapper"]')! } get #beforeTabsSlot() { @@ -189,7 +189,7 @@ export class TabContainerElement extends HTMLElement { tabListContainer.style.display = 'flex' tabListContainer.setAttribute('part', 'tablist-wrapper') tabListContainer.setAttribute('name', 'tablist-wrapper') - const tabListTabWrapper = document.createElement('slot') + const tabListTabWrapper = document.createElement('div') tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper') tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper') const tabListSlot = document.createElement('slot') @@ -299,14 +299,10 @@ export class TabContainerElement extends HTMLElement { if (!this.#setupComplete) { const tabListSlot = this.#tabListSlot const tabListWrapper = this.#tabListWrapper - const tabListTabWrapper = this.#tabListTabWrapper const customTabList = this.querySelector('[role=tablist]') const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]') - const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]') if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) { assignSlotWithFallback(tabListWrapper, customTabListWrapper) - } else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) { - assignSlotWithFallback(tabListTabWrapper, customTabListTabWrapper) } else if (customTabList && customTabList.closest(this.tagName) === this) { assignSlotWithFallback(tabListSlot, customTabList) } else { @@ -326,11 +322,7 @@ export class TabContainerElement extends HTMLElement { const afterSlotted: Element[] = [] let autoSlotted = beforeSlotted for (const child of this.children) { - if ( - child.getAttribute('role') === 'tab' || - child.getAttribute('role') === 'tablist' || - child.getAttribute('slot') === 'tablist-tab-wrapper' - ) { + if (child.getAttribute('role') === 'tab' || child.getAttribute('role') === 'tablist') { autoSlotted = afterTabSlotted continue } diff --git a/test/test.js b/test/test.js index f5dce71..a65a03d 100644 --- a/test/test.js +++ b/test/test.js @@ -719,54 +719,4 @@ describe('tab-container', function () { assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible') }) }) - - describe('with custom tablist-tab-wrapper', function () { - beforeEach(function () { - document.body.innerHTML = ` - -
-
- - - -
-
- -
- Panel 2 -
- -
- ` - tabs = Array.from(document.querySelectorAll('button')) - panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) - }) - - afterEach(function () { - // Check to make sure we still have accessible markup after the test finishes running. - expect(document.body).to.be.accessible() - - document.body.innerHTML = '' - }) - - it('has accessible markup', function () { - expect(document.body).to.be.accessible() - }) - - it('the second tab is still selected', function () { - assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected') - assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible') - }) - - it('selects the clicked tab', function () { - tabs[0].click() - - assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected') - assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible') - }) - }) })