Merge pull request #24 from github/remove-tabindex-from-panels

Don't set `tabindex` on panels

Author: koddsson

index.js

@@ -78,7 +78,9 @@ function selectTab(tabContainer: TabContainerElement, index: number) {
   }
   for (const panel of panels) {
     panel.hidden = true
-    panel.setAttribute('tabindex', '0')
+    if (!panel.hasAttribute('tabindex') && !panel.hasAttribute('data-tab-container-no-tabstop')) {
+      panel.setAttribute('tabindex', '0')
+    }
   }
 
   selectedTab.setAttribute('aria-selected', 'true')

test/test.js

@@ -26,7 +26,7 @@ describe('tab-container', function() {
         <div role="tabpanel" hidden>
           Panel 2
         </div>
-        <div role="tabpanel" hidden>
+        <div role="tabpanel" hidden data-tab-container-no-tabstop>
           Panel 3
         </div>
       </tab-container>
@@ -94,6 +94,17 @@ describe('tab-container', function() {
       assert.equal(counter, 1)
     })
 
+    it("panels that don't have a `data-tab-container-no-tabstop` attribute have tabindex with value '0'", function() {
+      const tabs = document.querySelectorAll('button')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+
+      tabs[1].click()
+
+      assert.equal(panels[0].getAttribute('tabindex'), '0')
+      assert.equal(panels[1].getAttribute('tabindex'), '0')
+      assert(!panels[2].hasAttribute('tabindex'))
+    })
+
     it('the aria-selected attribute is set to "false" for all tabs that don\'t have a aria-selected attribute', function() {
       for (const tab of document.querySelectorAll('[role="tab"]:not([aria-selected="true"])')) {
         assert.equal(tab.getAttribute('aria-selected'), 'false')