refactor(aria/combobox): replace tabbable with tabIndex in autocomplete examples

tjshiu · tjshiu · commit 15bf0bf7435b · 2026-04-27T16:22:15.000-07:00
diff --git a/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html b/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html
@@ -30,7 +30,7 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
+        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>
diff --git a/src/components-examples/aria/autocomplete/autocomplete-disabled/autocomplete-disabled-example.html b/src/components-examples/aria/autocomplete/autocomplete-disabled/autocomplete-disabled-example.html
@@ -20,7 +20,7 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption">
+        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>
diff --git a/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html b/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html
@@ -31,7 +31,7 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
+        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>
diff --git a/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html b/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html
@@ -20,7 +20,7 @@
         <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" selectionMode="explicit"
+        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" selectionMode="explicit"
           [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
           @for (country of countries(); track country) {
           <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`<div class="example-no-results">No results found</div>`
`31`	`31`	`}`
`32`	`32`
`33`		`- <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">`
	`33`	`+ <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">`
`34`	`34`	`@for (country of countries(); track country) {`
`35`	`35`	`<div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">`
`36`	`36`	`<span class="example-option-label">{{country}}</span>`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`<div class="example-no-results">No results found</div>`
`21`	`21`	`}`
`22`	`22`
`23`		`- <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption">`
	`23`	`+ <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption">`
`24`	`24`	`@for (country of countries(); track country) {`
`25`	`25`	`<div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">`
`26`	`26`	`<span class="example-option-label">{{country}}</span>`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`<div class="example-no-results">No results found</div>`
`32`	`32`	`}`
`33`	`33`
`34`		`- <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabbable]="false" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">`
	`34`	`+ <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">`
`35`	`35`	`@for (country of countries(); track country) {`
`36`	`36`	`<div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">`
`37`	`37`	`<span class="example-option-label">{{country}}</span>`