github
diff --git a/‎examples/index.html‎
Lines changed: 1 addition & 1 deletion b/‎examples/index.html‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎index.js‎
Lines changed: 16 additions & 1 deletion b/‎index.js‎
Lines changed: 16 additions & 1 deletion
@@ -8,7 +8,7 @@
 <body>
   <tab-container>
     <div role="tablist">
-      <button type="button" role="tab" aria-selected="true">Tab one</button>
+      <button type="button" role="tab" tabindex="0" aria-selected="true">Tab one</button>
       <button type="button" role="tab" tabindex="-1">Tab two</button>
       <button type="button" role="tab" tabindex="-1">Tab three</button>
     </div>
 
@@ -39,6 +39,21 @@ export default class TabContainerElement extends HTMLElement {
       selectTab(this, index)
     })
   }
+
+  connectedCallback() {
+    for (const tab of this.querySelectorAll('[role="tablist"] [role="tab"]')) {
+      if (!tab.hasAttribute('aria-selected')) {
+        tab.setAttribute('aria-selected', 'false')
+      }
+      if (!tab.hasAttribute('tabindex')) {
+        if (tab.getAttribute('aria-selected') === 'true') {
+          tab.setAttribute('tabindex', '0')
+        } else {
+          tab.setAttribute('tabindex', '-1')
+        }
+      }
+    }
+  }
 }
 
 function selectTab(tabContainer: TabContainerElement, index: number) {
@@ -67,7 +82,7 @@ function selectTab(tabContainer: TabContainerElement, index: number) {
   }
 
   selectedTab.setAttribute('aria-selected', 'true')
-  selectedTab.removeAttribute('tabindex')
+  selectedTab.setAttribute('tabindex', '0')
   selectedTab.focus()
   selectedPanel.hidden = false