Merge pull request #90 from github/slot-tablist-wrapper

Custom tablist-tab-wrapper

Author: mperrotti

examples/index.html

@@ -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>
@@ -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>

src/tab-container-element.ts

@@ -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() {
@@ -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')
@@ -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 {
@@ -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
         }

test/test.js

@@ -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')
+    })
+  })
 })