Use existing default-tab attribute

owenniblock · owenniblock · commit 7a01bd2ab03a · 2024-03-08T15:02:35.000Z
diff --git a/README.md b/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-index=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=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-index="1">
+<tab-container default-tab="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>
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -255,11 +255,11 @@ export class TabContainerElement extends HTMLElement {
   }
 
   get defaultTabIndex(): number {
-    return Number(this.getAttribute('default-tab-index') || -1)
+    return Number(this.getAttribute('default-tab') || -1)
   }
 
   set defaultTabIndex(index: number) {
-    this.setAttribute('default-tab-index', String(index))
+    this.setAttribute('default-tab', String(index))
   }
 
   selectTab(index: number): void {
diff --git a/test/test.js b/test/test.js
@@ -111,7 +111,7 @@ describe('tab-container', function () {
   describe('after tree insertion with defaulTabIndex', function () {
     beforeEach(function () {
       document.body.innerHTML = `
-      <tab-container defaultTabIndex=1>
+      <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>

Original file line number	Diff line number	Diff line change
`@@ -255,11 +255,11 @@ export class TabContainerElement extends HTMLElement {`
`255`	`255`	`}`
`256`	`256`
`257`	`257`	`get defaultTabIndex(): number {`
`258`		`- return Number(this.getAttribute('default-tab-index') \|\| -1)`
	`258`	`+ return Number(this.getAttribute('default-tab') \|\| -1)`
`259`	`259`	`}`
`260`	`260`
`261`	`261`	`set defaultTabIndex(index: number) {`
`262`		`- this.setAttribute('default-tab-index', String(index))`
	`262`	`+ this.setAttribute('default-tab', String(index))`
`263`	`263`	`}`
`264`	`264`
`265`	`265`	`selectTab(index: number): void {`