Skip to content

Commit 2f856f1

Browse files
authored
Merge pull request #95 from github/fix-accessibility-issue
Fixes tablist-tab-wrapper accessibility violation by reverting div->slot change
2 parents ce86c9b + 4b09f51 commit 2f856f1

File tree

3 files changed

+5
-84
lines changed

3 files changed

+5
-84
lines changed

examples/index.html

+1-22
Original file line numberDiff line numberDiff line change
@@ -67,27 +67,6 @@ <h2>Horizontal (custom tablist and tablist-wrapper)</h2>
6767
</div>
6868
</tab-container>
6969

70-
<h2>Horizontal (custom tablist and tablist-tab-wrapper)</h2>
71-
72-
<tab-container>
73-
<div slot="tablist-tab-wrapper">
74-
<div role="tablist" aria-label="Horizontal Tabs Example">
75-
<button type="button" id="tab-one" role="tab">Tab one</button>
76-
<button type="button" id="tab-two" role="tab">Tab two</button>
77-
<button type="button" id="tab-three" role="tab">Tab three</button>
78-
</div>
79-
</div>
80-
<div role="tabpanel" aria-labelledby="tab-one">
81-
Panel 1
82-
</div>
83-
<div role="tabpanel" aria-labelledby="tab-two" hidden>
84-
Panel 2
85-
</div>
86-
<div role="tabpanel" aria-labelledby="tab-three" hidden>
87-
Panel 3
88-
</div>
89-
</tab-container>
90-
9170
<h2>Vertical (shadow tablist)</h2>
9271

9372
<tab-container>
@@ -144,7 +123,7 @@ <h2>Set initially selected tab</h2>
144123

145124
<h2>Set default tab</h2>
146125

147-
<tab-container default-tab-index="1">
126+
<tab-container default-tab="1">
148127
<button type="button" id="tab-one" role="tab">Tab one</button>
149128
<button type="button" id="tab-two" role="tab">Tab two</button>
150129
<button type="button" id="tab-three" role="tab">Tab three</button>

src/tab-container-element.ts

+4-12
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export class TabContainerElement extends HTMLElement {
110110
static observedAttributes = ['vertical']
111111

112112
get #tabList() {
113-
const wrapper = this.querySelector('[slot=tablist-wrapper],[slot=tablist-tab-wrapper]')
113+
const wrapper = this.querySelector('[slot=tablist-wrapper]')
114114
if (wrapper?.closest(this.tagName) === this) {
115115
return wrapper.querySelector('[role=tablist]') as HTMLElement
116116
}
@@ -127,7 +127,7 @@ export class TabContainerElement extends HTMLElement {
127127
}
128128

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

133133
get #beforeTabsSlot() {
@@ -189,7 +189,7 @@ export class TabContainerElement extends HTMLElement {
189189
tabListContainer.style.display = 'flex'
190190
tabListContainer.setAttribute('part', 'tablist-wrapper')
191191
tabListContainer.setAttribute('name', 'tablist-wrapper')
192-
const tabListTabWrapper = document.createElement('slot')
192+
const tabListTabWrapper = document.createElement('div')
193193
tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper')
194194
tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper')
195195
const tabListSlot = document.createElement('slot')
@@ -299,14 +299,10 @@ export class TabContainerElement extends HTMLElement {
299299
if (!this.#setupComplete) {
300300
const tabListSlot = this.#tabListSlot
301301
const tabListWrapper = this.#tabListWrapper
302-
const tabListTabWrapper = this.#tabListTabWrapper
303302
const customTabList = this.querySelector('[role=tablist]')
304303
const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]')
305-
const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
306304
if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
307305
assignSlotWithFallback(tabListWrapper, customTabListWrapper)
308-
} else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) {
309-
assignSlotWithFallback(tabListTabWrapper, customTabListTabWrapper)
310306
} else if (customTabList && customTabList.closest(this.tagName) === this) {
311307
assignSlotWithFallback(tabListSlot, customTabList)
312308
} else {
@@ -326,11 +322,7 @@ export class TabContainerElement extends HTMLElement {
326322
const afterSlotted: Element[] = []
327323
let autoSlotted = beforeSlotted
328324
for (const child of this.children) {
329-
if (
330-
child.getAttribute('role') === 'tab' ||
331-
child.getAttribute('role') === 'tablist' ||
332-
child.getAttribute('slot') === 'tablist-tab-wrapper'
333-
) {
325+
if (child.getAttribute('role') === 'tab' || child.getAttribute('role') === 'tablist') {
334326
autoSlotted = afterTabSlotted
335327
continue
336328
}

test/test.js

-50
Original file line numberDiff line numberDiff line change
@@ -719,54 +719,4 @@ describe('tab-container', function () {
719719
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
720720
})
721721
})
722-
723-
describe('with custom tablist-tab-wrapper', function () {
724-
beforeEach(function () {
725-
document.body.innerHTML = `
726-
<tab-container>
727-
<div slot="tablist-tab-wrapper">
728-
<div role="tablist">
729-
<button type="button" role="tab">Tab one</button>
730-
<button type="button" role="tab" aria-selected="true">Tab two</button>
731-
<button type="button" role="tab">Tab three</button>
732-
</div>
733-
</div>
734-
<div role="tabpanel" hidden>
735-
Panel 1
736-
</div>
737-
<div role="tabpanel">
738-
Panel 2
739-
</div>
740-
<div role="tabpanel" hidden data-tab-container-no-tabstop>
741-
Panel 3
742-
</div>
743-
</tab-container>
744-
`
745-
tabs = Array.from(document.querySelectorAll('button'))
746-
panels = Array.from(document.querySelectorAll('[role="tabpanel"]'))
747-
})
748-
749-
afterEach(function () {
750-
// Check to make sure we still have accessible markup after the test finishes running.
751-
expect(document.body).to.be.accessible()
752-
753-
document.body.innerHTML = ''
754-
})
755-
756-
it('has accessible markup', function () {
757-
expect(document.body).to.be.accessible()
758-
})
759-
760-
it('the second tab is still selected', function () {
761-
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
762-
assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
763-
})
764-
765-
it('selects the clicked tab', function () {
766-
tabs[0].click()
767-
768-
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
769-
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
770-
})
771-
})
772722
})

0 commit comments

Comments
 (0)