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
-
-
- Panel 2
-
-
- Panel 3
-
-
-
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 1
-
-
- Panel 2
-
-
- Panel 3
-
-
- `
- 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')
- })
- })
})