adds the ability to have a custom tablist-tab-wrapper

Author: mperrotti

examples/index.html

@@ -161,7 +161,7 @@ <h2>Panel with extra buttons</h2>
 
   </main>
 
-  <script src="../dist/index.js" type="module"></script>
-  <!-- <script src="https://unpkg.com/@github/tab-container-element@latest/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

@@ -283,15 +283,13 @@ export class TabContainerElement extends HTMLElement {
         } else {
           customTabListWrapper.setAttribute('slot', 'tablist')
         }
-      }
-      else if (customTabList && customTabList.closest(this.tagName) === this) {
+      } else if (customTabList && customTabList.closest(this.tagName) === this) {
         if (manualSlotsSupported) {
           tabListSlot.assign(customTabList)
         } else {
           customTabList.setAttribute('slot', 'tablist')
         }
-      }
-      else {
+      } else {
         this.#tabListTabWrapper.role = 'tablist'
         if (manualSlotsSupported) {
           tabListSlot.assign(...[...this.children].filter(e => e.matches('[role=tab]')))
@@ -312,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')
+    })
+  })
 })