Skip to content

Commit d574326

Browse files
authored
Merge pull request #32 from mwanji/fix-only-set-hidden-and-selected-for-closest-tab-container
fix: only hide tab panels and set aria-selected of closest tab-container
2 parents f151b74 + d0cd9a5 commit d574326

File tree

2 files changed

+31
-6
lines changed

2 files changed

+31
-6
lines changed

src/index.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
function getTabs(el: TabContainerElement): HTMLElement[] {
2+
return Array.from(el.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')).filter(
3+
tab => tab instanceof HTMLElement && tab.closest(el.tagName) === el
4+
)
5+
}
6+
17
export default class TabContainerElement extends HTMLElement {
28
constructor() {
39
super()
@@ -7,7 +13,7 @@ export default class TabContainerElement extends HTMLElement {
713
if (!(target instanceof HTMLElement)) return
814
if (target.closest(this.tagName) !== this) return
915
if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return
10-
const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'))
16+
const tabs = getTabs(this)
1117
const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]'))!)
1218

1319
if (event.code === 'ArrowRight') {
@@ -28,21 +34,21 @@ export default class TabContainerElement extends HTMLElement {
2834
})
2935

3036
this.addEventListener('click', (event: MouseEvent) => {
31-
const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'))
37+
const tabs = getTabs(this)
3238

3339
if (!(event.target instanceof Element)) return
3440
if (event.target.closest(this.tagName) !== this) return
3541

3642
const tab = event.target.closest('[role="tab"]')
37-
if (!tab || !tab.closest('[role="tablist"]')) return
43+
if (!(tab instanceof HTMLElement) || !tab.closest('[role="tablist"]')) return
3844

3945
const index = tabs.indexOf(tab)
4046
selectTab(this, index)
4147
})
4248
}
4349

4450
connectedCallback(): void {
45-
for (const tab of this.querySelectorAll('[role="tablist"] [role="tab"]')) {
51+
for (const tab of getTabs(this)) {
4652
if (!tab.hasAttribute('aria-selected')) {
4753
tab.setAttribute('aria-selected', 'false')
4854
}
@@ -58,8 +64,10 @@ export default class TabContainerElement extends HTMLElement {
5864
}
5965

6066
function selectTab(tabContainer: TabContainerElement, index: number) {
61-
const tabs = tabContainer.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')
62-
const panels = tabContainer.querySelectorAll<HTMLElement>('[role="tabpanel"]')
67+
const tabs = getTabs(tabContainer)
68+
const panels = Array.from(tabContainer.querySelectorAll<HTMLElement>('[role="tabpanel"]')).filter(
69+
panel => panel.closest(tabContainer.tagName) === tabContainer
70+
)
6371

6472
const selectedTab = tabs[index]
6573
const selectedPanel = panels[index]

test/test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,10 @@ describe('tab-container', function () {
177177
assert.deepStrictEqual(nestedTabs.map(isSelected), [false, true], 'nested tabs did change state')
178178
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'top panels changed state')
179179
assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did not change state')
180+
181+
tabs[1].click()
182+
183+
assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did change state')
180184
})
181185

182186
it('only switches closest tab-containers on arrow', () => {
@@ -198,6 +202,19 @@ describe('tab-container', function () {
198202
assert.deepStrictEqual(nestedTabs.map(isSelected), [false, true], 'nested tabs did change state')
199203
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'top panels changed state')
200204
assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did not change state')
205+
206+
tabs[1].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true}))
207+
208+
assert.deepStrictEqual(
209+
nestedPanels.map(isHidden),
210+
[true, false],
211+
'nested panels changed state when top panel changed'
212+
)
213+
assert.deepStrictEqual(
214+
nestedTabs.map(isSelected),
215+
[false, true],
216+
'nested tabs changed state when top panel changed'
217+
)
201218
})
202219
})
203220
})

0 commit comments

Comments
 (0)