Merge pull request #78 from github/fix-set-aria-selected

Fix set aria selected
github · Feb 19, 2024 · 7a8fa4a · 7a8fa4a
2 parents 3a0377f + df9d585
commit 7a8fa4a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,8 @@ import '@github/tab-container-element'
 </tab-container>
 ```
 
+If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab=N` attribute to avoid having to set `aria-selected=true` on the desired tab.
+
 ### Events
 
 - `tab-container-change` (bubbles, cancelable): fired on `<tab-container>` before a new tab is selected and visibility is updated. `event.tab` is the tab that will be focused and `tab.panel` is the panel that will be shown if the event isn't cancelled.

diff --git a/examples/index.html b/examples/index.html
@@ -83,6 +83,23 @@ <h2>Vertical (custom tablist)</h2>
       </div>
     </tab-container>
 
+    <h2>Set initially selected tab</h2>
+
+    <tab-container>
+      <button type="button" id="tab-one" role="tab">Tab one</button>
+      <button type="button" id="tab-two" role="tab" aria-selected="true">Tab two</button>
+      <button type="button" id="tab-three" role="tab">Tab three</button>
+      <div role="tabpanel" aria-labelledby="tab-one" hidden>
+        Panel 1
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-two">
+        Panel 2
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-three" hidden>
+        Panel 3
+      </div>
+    </tab-container>
+
     <h2>Panel with extra buttons</h2>
 
     <tab-container>

diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -152,12 +152,8 @@ export class TabContainerElement extends HTMLElement {
 
     this.addEventListener('keydown', this)
     this.addEventListener('click', this)
-    this.selectTab(
-      Math.max(
-        this.#tabs.findIndex(el => el.matches('[aria-selected=true]')),
-        0,
-      ),
-    )
+
+    this.selectTab(-1)
     this.#setupComplete = true
   }
 
@@ -257,6 +253,9 @@ export class TabContainerElement extends HTMLElement {
       this.#beforeTabsSlot.assign(...beforeSlotted)
       this.#afterTabsSlot.assign(...afterTabSlotted)
       this.#afterPanelsSlot.assign(...afterSlotted)
+      const defaultTab = Number(this.getAttribute('default-tab') || -1)
+      const defaultIndex = defaultTab >= 0 ? defaultTab : this.#tabs.findIndex(el => el.matches('[aria-selected=true]'))
+      index = index >= 0 ? index : Math.max(0, defaultIndex)
     }
 
     const tabs = this.#tabs

diff --git a/test/test.js b/test/test.js
@@ -45,6 +45,70 @@ describe('tab-container', function () {
     })
   })
 
+  describe('after tree insertion with aria-selected on second tab', function () {
+    beforeEach(function () {
+      document.body.innerHTML = `
+      <tab-container>
+        <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 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 () {
+      document.body.innerHTML = ''
+    })
+
+    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')
+    })
+  })
+
+  describe('after tree insertion with default-tab', function () {
+    beforeEach(function () {
+      document.body.innerHTML = `
+      <tab-container default-tab=1>
+        <button type="button" role="tab">Tab one</button>
+        <button type="button" role="tab">Tab two</button>
+        <button type="button" role="tab">Tab three</button>
+        <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 () {
+      document.body.innerHTML = ''
+    })
+
+    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')
+    })
+  })
+
   describe('after tree insertion', function () {
     beforeEach(function () {
       document.body.innerHTML = `