fix: only hide tab panels and set aria-selected of closest tab-container.

Author: mwanji

src/index.ts

@@ -7,7 +7,7 @@ export default class TabContainerElement extends HTMLElement {
       if (!(target instanceof HTMLElement)) return
       if (target.closest(this.tagName) !== this) return
       if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return
-      const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'))
+      const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]')).filter(tab => tab.closest(this.tagName) === this)
       const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]'))!)
 
       if (event.code === 'ArrowRight') {
@@ -58,8 +58,8 @@ export default class TabContainerElement extends HTMLElement {
 }
 
 function selectTab(tabContainer: TabContainerElement, index: number) {
-  const tabs = tabContainer.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')
-  const panels = tabContainer.querySelectorAll<HTMLElement>('[role="tabpanel"]')
+  const tabs = Array.from(tabContainer.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')).filter(tab => tab.closest(tabContainer.tagName) === tabContainer)
+  const panels = Array.from(tabContainer.querySelectorAll<HTMLElement>('[role="tabpanel"]')).filter(panel => panel.closest(tabContainer.tagName) === tabContainer)
 
   const selectedTab = tabs[index]
   const selectedPanel = panels[index]

test/test.js

@@ -177,6 +177,10 @@ describe('tab-container', function () {
       assert.deepStrictEqual(nestedTabs.map(isSelected), [false, true], 'nested tabs did change state')
       assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'top panels changed state')
       assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did not change state')
+
+      tabs[1].click()
+
+      assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did change state')
     })
 
     it('only switches closest tab-containers on arrow', () => {
@@ -198,6 +202,11 @@ describe('tab-container', function () {
       assert.deepStrictEqual(nestedTabs.map(isSelected), [false, true], 'nested tabs did change state')
       assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'top panels changed state')
       assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels did not change state')
+      
+      tabs[1].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true}))
+      
+      assert.deepStrictEqual(nestedPanels.map(isHidden), [true, false], 'nested panels changed state when top panel changed')
+      assert.deepStrictEqual(nestedTabs.map(isSelected), [false, true], 'nested tabs changed state when top panel changed')
     })
   })
 })