Change default-tab to default-tab-index

Author: owenniblock

README.md

@@ -31,11 +31,11 @@ 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, where `N` is the 0-based tab index:
+If none of the tabs have `aria-selected=true`, then the first tab will be selected automatically. You can also add the `default-tab-index=N` attribute to avoid having to set `aria-selected=true` on the desired tab, where `N` is the 0-based tab index:
 
 ```html
 <!-- The _second_ tab will be selected -->
-<tab-container default-tab="1">
+<tab-container default-tab-index="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>

custom-elements.json

@@ -196,6 +196,10 @@
               "kind": "field",
               "name": "selectedTabIndex"
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex"
+            },
             {
               "kind": "method",
               "name": "selectTab",
@@ -550,6 +554,13 @@
                 "text": "number"
               }
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex",
+              "type": {
+                "text": "number"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTab",

examples/index.html

@@ -100,6 +100,23 @@ <h2>Set initially selected tab</h2>
       </div>
     </tab-container>
 
+    <h2>Set default tab</h2>
+
+    <tab-container default-tab-index="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>
+      <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>
@@ -123,7 +140,7 @@ <h2>Panel with extra buttons</h2>
 
   </main>
 
-  <!-- <script src="../dist/index.js" type="module"></script> -->
+  <!--<script src="../dist/index.js" type="module"></script>-->
   <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
 </body>
 </html>

src/tab-container-element.ts

@@ -254,6 +254,14 @@ export class TabContainerElement extends HTMLElement {
     this.selectTab(i)
   }
 
+  get defaultTabIndex(): number {
+    return Number(this.getAttribute('default-tab-index') || -1)
+  }
+
+  set defaultTabIndex(index: number) {
+    this.setAttribute('default-tab-index', String(index))
+  }
+
   selectTab(index: number): void {
     if (!this.#setupComplete) {
       const tabListSlot = this.#tabListSlot
@@ -310,7 +318,7 @@ export class TabContainerElement extends HTMLElement {
         for (const el of afterTabSlotted) el.setAttribute('slot', 'after-tabs')
         for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
       }
-      const defaultTab = Number(this.getAttribute('default-tab') || -1)
+      const defaultTab = this.defaultTabIndex
       const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
       index = index >= 0 ? index : Math.max(0, defaultIndex)
     }

test/test.js

@@ -108,10 +108,10 @@ describe('tab-container', function () {
     })
   })
 
-  describe('after tree insertion with default-tab', function () {
+  describe('after tree insertion with defaulTabIndex', function () {
     beforeEach(function () {
       document.body.innerHTML = `
-      <tab-container default-tab=1>
+      <tab-container defaultTabIndex=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>