Merge pull request #95 from github/fix-accessibility-issue

Fixes tablist-tab-wrapper accessibility violation by reverting div->slot change
github · May 9, 2024 · 2f856f1 · 2f856f1
2 parents ce86c9b + 4b09f51
commit 2f856f1
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 84 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -67,27 +67,6 @@ <h2>Horizontal (custom tablist and tablist-wrapper)</h2>
       </div>
     </tab-container>
 
-    <h2>Horizontal (custom tablist and tablist-tab-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>
@@ -144,7 +123,7 @@ <h2>Set initially selected tab</h2>
 
     <h2>Set default tab</h2>
 
-    <tab-container default-tab-index="1">
+    <tab-container default-tab="1">
       <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>

diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -110,7 +110,7 @@ export class TabContainerElement extends HTMLElement {
   static observedAttributes = ['vertical']
 
   get #tabList() {
-    const wrapper = this.querySelector('[slot=tablist-wrapper],[slot=tablist-tab-wrapper]')
+    const wrapper = this.querySelector('[slot=tablist-wrapper]')
     if (wrapper?.closest(this.tagName) === this) {
       return wrapper.querySelector('[role=tablist]') as HTMLElement
     }
@@ -127,7 +127,7 @@ export class TabContainerElement extends HTMLElement {
   }
 
   get #tabListTabWrapper() {
-    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot[part="tablist-tab-wrapper"]')!
+    return this.shadowRoot!.querySelector<HTMLElement>('div[part="tablist-tab-wrapper"]')!
   }
 
   get #beforeTabsSlot() {
@@ -189,7 +189,7 @@ export class TabContainerElement extends HTMLElement {
     tabListContainer.style.display = 'flex'
     tabListContainer.setAttribute('part', 'tablist-wrapper')
     tabListContainer.setAttribute('name', 'tablist-wrapper')
-    const tabListTabWrapper = document.createElement('slot')
+    const tabListTabWrapper = document.createElement('div')
     tabListTabWrapper.setAttribute('part', 'tablist-tab-wrapper')
     tabListTabWrapper.setAttribute('name', 'tablist-tab-wrapper')
     const tabListSlot = document.createElement('slot')
@@ -299,14 +299,10 @@ export class TabContainerElement extends HTMLElement {
     if (!this.#setupComplete) {
       const tabListSlot = this.#tabListSlot
       const tabListWrapper = this.#tabListWrapper
-      const tabListTabWrapper = this.#tabListTabWrapper
       const customTabList = this.querySelector('[role=tablist]')
       const customTabListWrapper = this.querySelector('[slot=tablist-wrapper]')
-      const customTabListTabWrapper = this.querySelector('[slot=tablist-tab-wrapper]')
       if (customTabListWrapper && customTabListWrapper.closest(this.tagName) === this) {
         assignSlotWithFallback(tabListWrapper, customTabListWrapper)
-      } else if (customTabListTabWrapper && customTabListTabWrapper.closest(this.tagName) === this) {
-        assignSlotWithFallback(tabListTabWrapper, customTabListTabWrapper)
       } else if (customTabList && customTabList.closest(this.tagName) === this) {
         assignSlotWithFallback(tabListSlot, customTabList)
       } else {
@@ -326,11 +322,7 @@ 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' ||
-            child.getAttribute('slot') === 'tablist-tab-wrapper'
-          ) {
+          if (child.getAttribute('role') === 'tab' || child.getAttribute('role') === 'tablist') {
             autoSlotted = afterTabSlotted
             continue
           }

diff --git a/test/test.js b/test/test.js
@@ -719,54 +719,4 @@ describe('tab-container', function () {
       assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
     })
   })
-
-  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')
-    })
-  })
 })