Adds failing test and example of selected tab functionality

github · Feb 19, 2024 · 0782ff3 · 0782ff3
1 parent 3a0377f
commit 0782ff3
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
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/test/test.js b/test/test.js
@@ -45,6 +45,42 @@ 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>
+      `
+      tabContainer = document.querySelector('tab-container')
+      tabs = Array.from(document.querySelectorAll('button'))
+      panels = Array.from(document.querySelectorAll('[role="tabpanel"]'))
+      events = []
+      tabContainer.addEventListener('tab-container-change', e => events.push(e))
+      tabContainer.addEventListener('tab-container-changed', e => events.push(e))
+    })
+
+    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 = `