Use shadowdom for tablist and panels

This refactors tab container to make extensive use of the shadowdom.
This allows us to be smarter about a few things:

 - The `role=tablist` can be omitted, and the component will simply provide it.
   This makes it easier to author a tablist that is accessible because the
   only required markup is some `<button role=tab>` with some
   `<button role=panel>`.
 - The `role=panel` gets manually assigned which means it's far harder
   to show two tab-panels at once. With the current implementation it
   can sometimes get into states where more than the current panel is
   visible. With assignedSlot this is close to impossible.
 - Much of the required aria markup can be hidden away in the shadowdom
   which means consumers are less able to influence it, allowing us to
   keep tighter control of it.

Author: keithamus

examples/index.html

@@ -10,7 +10,24 @@
 
     <h1>Tab Container Examples</h1>
 
-    <h2>Horizontal</h2>
+    <h2>Horizontal (shadow tablist)</h2>
+
+    <tab-container>
+      <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 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>Horizontal (custom tablist)</h2>
 
     <tab-container>
       <div role="tablist" aria-label="Horizontal Tabs Example">
@@ -29,7 +46,25 @@ <h2>Horizontal</h2>
       </div>
     </tab-container>
 
-    <h2>Vertical</h2>
+    <h2>Vertical (shadow tablist)</h2>
+
+    <tab-container>
+      <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 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 (custom tablist)</h2>
 
     <tab-container>
       <div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">

src/tab-container-element.ts

@@ -70,14 +70,35 @@ export class TabContainerElement extends HTMLElement {
     return this.querySelector<HTMLElement>('[role=tablist]')
   }
 
+  get #tabListSlot() {
+    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot[part="tablist"]')!
+  }
+
+  get #panelSlot() {
+    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot[part="panel"]')!
+  }
+
   get #tabs() {
+    if (this.#tabListSlot.matches('[role=tablist]')) {
+      return this.#tabListSlot.assignedNodes() as HTMLElement[]
+    }
     return Array.from(this.#tabList?.querySelectorAll<HTMLElement>('[role="tab"]') || []).filter(
       tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this,
     )
   }
 
   #setup = false
+  #internals!: ElementInternals | null
   connectedCallback(): void {
+    this.#internals ||= this.attachInternals ? this.attachInternals() : null
+    const shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open', slotAssignment: 'manual'})
+    const tabListSlot = document.createElement('slot')
+    tabListSlot.setAttribute('part', 'tablist')
+    const panelSlot = document.createElement('slot')
+    panelSlot.setAttribute('part', 'panel')
+    panelSlot.setAttribute('role', 'presentation')
+    shadowRoot.replaceChildren(tabListSlot, panelSlot)
+
     this.addEventListener('keydown', this)
     this.addEventListener('click', this)
     this.selectTab(
@@ -131,6 +152,15 @@ export class TabContainerElement extends HTMLElement {
   }
 
   selectTab(index: number): void {
+    if (!this.#setup) {
+      const customTabList = this.querySelector('[role=tablist]')
+      if (customTabList && customTabList.closest(this.tagName) === this) {
+        this.#tabListSlot.assign(customTabList)
+      } else {
+        this.#tabListSlot.assign(...[...this.children].filter(e => e.matches('[role=tab]')))
+        this.#tabListSlot.role = 'tablist'
+      }
+    }
     const tabs = this.#tabs
     const panels = Array.from(this.querySelectorAll<HTMLElement>('[role="tabpanel"]')).filter(
       panel => panel.closest(this.tagName) === this,
@@ -163,14 +193,14 @@ export class TabContainerElement extends HTMLElement {
       tab.setAttribute('tabindex', '-1')
     }
     for (const panel of panels) {
-      panel.hidden = true
       if (!panel.hasAttribute('tabindex') && !panel.hasAttribute('data-tab-container-no-tabstop')) {
         panel.setAttribute('tabindex', '0')
       }
     }
 
     selectedTab.setAttribute('aria-selected', 'true')
     selectedTab.setAttribute('tabindex', '0')
+    this.#panelSlot.assign(selectedPanel)
     selectedPanel.hidden = false
 
     if (this.#setup) {

test/test.js

@@ -3,7 +3,7 @@ import '../src/index.ts'
 
 describe('tab-container', function () {
   const isSelected = e => e.matches('[aria-selected=true]')
-  const isHidden = e => e.hidden
+  const isHidden = e => !e.assignedSlot
   let tabContainer = null
   let tabs = []
   let panels = []