Skip to content

Commit

Permalink
Merge pull request #90 from github/slot-tablist-wrapper
Browse files Browse the repository at this point in the history
Custom tablist-tab-wrapper
  • Loading branch information
mperrotti authored Apr 22, 2024
2 parents 21f1e2b + 2a0e8d2 commit 66334bc
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 5 deletions.
23 changes: 22 additions & 1 deletion examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,27 @@ <h2>Horizontal (custom tablist)</h2>
</div>
</tab-container>

<h2>Horizontal (custom tablist and tablist-wrapper)</h2>

<tab-container>
<div slot="tablist-tab-wrapper">
<div role="tablist" aria-label="Horizontal Tabs Example">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>

<h2>Vertical (shadow tablist)</h2>

<tab-container>
Expand Down Expand Up @@ -140,7 +161,7 @@ <h2>Panel with extra buttons</h2>

</main>

<!--<script src="../dist/index.js" type="module"></script>-->
<!-- <script src="../dist/index.js" type="module"></script> -->
<script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
</body>
</html>
20 changes: 16 additions & 4 deletions src/tab-container-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export class TabContainerElement extends HTMLElement {
}

get #tabListTabWrapper() {
return this.shadowRoot!.querySelector<HTMLSlotElement>('div[part="tablist-tab-wrapper"]')!
return this.shadowRoot!.querySelector<HTMLSlotElement>('slot[part="tablist-tab-wrapper"]')!
}

get #beforeTabsSlot() {
Expand Down Expand Up @@ -165,8 +165,9 @@ export class TabContainerElement extends HTMLElement {
const tabListContainer = document.createElement('div')
tabListContainer.style.display = 'flex'
tabListContainer.setAttribute('part', 'tablist-wrapper')
const tabListTabWrapper = document.createElement('div')
const tabListTabWrapper = document.createElement('slot')
tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper')
tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper')
const tabListSlot = document.createElement('slot')
tabListSlot.setAttribute('part', 'tablist')
tabListSlot.setAttribute('name', 'tablist')
Expand Down Expand Up @@ -275,7 +276,14 @@ export class TabContainerElement extends HTMLElement {
if (!this.#setupComplete) {
const tabListSlot = this.#tabListSlot
const customTabList = this.querySelector('[role=tablist]')
if (customTabList && customTabList.closest(this.tagName) === this) {
const customTabListWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
if (manualSlotsSupported) {
tabListSlot.assign(customTabListWrapper)
} else {
customTabListWrapper.setAttribute('slot', 'tablist')
}
} else if (customTabList && customTabList.closest(this.tagName) === this) {
if (manualSlotsSupported) {
tabListSlot.assign(customTabList)
} else {
Expand All @@ -302,7 +310,11 @@ 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') {
if (
child.getAttribute('role') === 'tab' ||
child.getAttribute('role') === 'tablist' ||
child.getAttribute('slot') === 'tablist-tab-wrapper'
) {
autoSlotted = afterTabSlotted
continue
}
Expand Down
49 changes: 49 additions & 0 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -669,4 +669,53 @@ describe('tab-container', function () {
)
})
})
describe('with custom tablist-tab-wrapper', function () {
beforeEach(function () {
document.body.innerHTML = `
<tab-container>
<div slot="tablist-tab-wrapper">
<div role="tablist">
<button type="button" role="tab">Tab one</button>
<button type="button" role="tab" aria-selected="true">Tab two</button>
<button type="button" role="tab">Tab three</button>
</div>
</div>
<div role="tabpanel" hidden>
Panel 1
</div>
<div role="tabpanel">
Panel 2
</div>
<div role="tabpanel" hidden data-tab-container-no-tabstop>
Panel 3
</div>
</tab-container>
`
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')
})
})
})

0 comments on commit 66334bc

Please sign in to comment.