refactor(aria/combobox): allow adding tabIndex and default it to 0

goldens/aria/grid/index.api.md

@@ -28,7 +28,7 @@ export class Grid {
     readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
 }

goldens/aria/listbox/index.api.md

@@ -36,7 +36,7 @@ export class Listbox<V> implements OnDestroy {
     readonly value: _angular_core.ModelSignal<V[]>;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
 }

goldens/aria/private/index.api.md

@@ -746,6 +746,9 @@ export class SortedCollection<T extends HasElement> {
     unregister(item: T): void;
 }
 
+// @public
+export function tabIndexTransform(v: string | number | undefined): number | undefined;
+
 // @public
 export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable' | 'expanded'> {
     tabList: SignalLike<TabListPattern>;

goldens/aria/simple-combobox/index.api.md

@@ -26,10 +26,11 @@ export class Combobox extends DeferredContentAware implements OnInit {
     readonly _popup: _angular_core.WritableSignal<ComboboxPopup | undefined>;
     _registerPopup(popup: ComboboxPopup): void;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
     _unregisterPopup(): void;
     readonly value: _angular_core.ModelSignal<string>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox, "[ngCombobox]", ["ngCombobox"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inlineSuggestion": { "alias": "inlineSuggestion"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox, "[ngCombobox]", ["ngCombobox"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inlineSuggestion": { "alias": "inlineSuggestion"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "value": "valueChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox, never>;
 }

goldens/aria/tree/index.api.md

@@ -37,7 +37,7 @@ export class Tree<V> {
     readonly value: _angular_core.ModelSignal<V[]>;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tree<any>, "[ngTree]", ["ngTree"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tree<any>, "[ngTree]", ["ngTree"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree<any>, never>;
 }

src/aria/grid/grid.spec.ts

@@ -974,7 +974,7 @@ describe('Grid directives', () => {
       [softDisabled]="softDisabled()"
       [enableSelection]="enableSelection()"
       [selectionMode]="selectionMode()"
-      [tabIndex]="tabIndex()">
+      [tabindex]="tabIndex()">
       @for (row of gridData(); track $index; let rIndex = $index) {
         <tr ngGridRow [rowIndex]="row.rowIndex">
           @for (cell of row.cells; track $index; let cIndex = $index) {

src/aria/grid/grid.ts

@@ -15,11 +15,10 @@ import {
   ElementRef,
   inject,
   input,
-  numberAttribute,
   Signal,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {GridPattern, GridCellPattern} from '../private';
+import {GridPattern, GridCellPattern, tabIndexTransform} from '../private';
 import {GRID_ROW} from './grid-tokens';
 
 /**
@@ -123,8 +122,8 @@ export class Grid {
 
   /** The tabindex of the grid. */
   readonly tabIndex = input(undefined, {
-    transform: (v: string | number | undefined) =>
-      v === undefined ? undefined : numberAttribute(v),
+    alias: 'tabindex',
+    transform: tabIndexTransform,
   });
 
   /** The UI pattern for the grid. */

src/aria/listbox/listbox.ts

@@ -16,15 +16,19 @@ import {
   inject,
   input,
   model,
-  numberAttribute,
   OnDestroy,
   signal,
   Signal,
   untracked,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {ComboboxListboxPattern, ListboxPattern, SortedCollection} from '../private';
+import {
+  ComboboxListboxPattern,
+  ListboxPattern,
+  SortedCollection,
+  tabIndexTransform,
+} from '../private';
 import {ComboboxPopup} from '../combobox';
 import {Option} from './option';
 import {LISTBOX} from './tokens';
@@ -133,8 +137,8 @@ export class Listbox<V> implements OnDestroy {
 
   /** The tabindex of the listbox. */
   readonly tabIndex = input(undefined, {
-    transform: (v: string | number | undefined) =>
-      v === undefined ? undefined : numberAttribute(v),
+    alias: 'tabindex',
+    transform: tabIndexTransform,
   });
 
   /** The values of the currently selected items. */

src/aria/private/public-api.ts

@@ -28,4 +28,5 @@ export * from './deferred-content';
 export * from './utils/collection';
 export * from './utils/element';
 export * from './utils/element-resolver';
+export * from './utils/transforms';
 export * from './simple-combobox/simple-combobox';

src/aria/private/simple-combobox/simple-combobox.ts

@@ -106,7 +106,8 @@ export class SimpleComboboxPattern {
       manager.on('ArrowDown', () => this.inputs.expanded.set(true));
 
       if (!this.isEditable()) {
-        manager.on(/^(Enter| )$/, () => this.inputs.expanded.set(true));
+        manager.on('Enter', () => this.inputs.expanded.set(true));
+        manager.on(' ', () => this.inputs.expanded.set(true));
       }
 
       return manager;

src/aria/private/utils/BUILD.bazel

@@ -8,6 +8,7 @@ ts_project(
         "collection.ts",
         "element.ts",
         "element-resolver.ts",
+        "transforms.ts",
     ],
     deps = [
         "//:node_modules/@angular/core",

src/aria/private/utils/transforms.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {numberAttribute} from '@angular/core';
+
+/**
+ * Transform function for tabIndex inputs.
+ * Returns undefined if the value is undefined, otherwise converts it to a number.
+ */
+export function tabIndexTransform(v: string | number | undefined): number | undefined {
+  return v === undefined ? undefined : numberAttribute(v);
+}

src/aria/simple-combobox/simple-combobox.spec.ts

@@ -544,6 +544,7 @@ describe('Combobox', () => {
         fixture.detectChanges();
 
         expect(inputElement.disabled).toBe(false);
+        expect(inputElement.getAttribute('disabled')).toBeNull();
         expect(inputElement.getAttribute('aria-disabled')).toBe('true');
       });
 
@@ -562,8 +563,38 @@ describe('Combobox', () => {
         fixture.detectChanges();
 
         expect(inputElement.disabled).toBe(true);
+        expect(inputElement.getAttribute('disabled')).toBe('');
         expect(inputElement.getAttribute('aria-disabled')).toBe('true');
       });
+
+      it('should respect user-defined tabindex when softDisabled is true', () => {
+        fixture.componentInstance.disabled.set(true);
+        fixture.componentInstance.tabIndex.set(0);
+        fixture.detectChanges();
+
+        expect(inputElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('should respect user-defined tabindex when not disabled', () => {
+        fixture.componentInstance.tabIndex.set(0);
+        fixture.detectChanges();
+
+        expect(inputElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('should default to tabindex 0 when not disabled', () => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('tabindex')).toBe('0');
+      });
+
+      it('should force tabindex to -1 when hard-disabled, ignoring user-defined tabindex', () => {
+        fixture.componentInstance.disabled.set(true);
+        fixture.componentInstance.softDisabled.set(false);
+        fixture.componentInstance.tabIndex.set(0);
+        fixture.detectChanges();
+
+        expect(inputElement.getAttribute('tabindex')).toBe('-1');
+      });
     });
   });
 
@@ -1178,6 +1209,7 @@ describe('Combobox', () => {
     [disabled]="disabled()"
     [softDisabled]="softDisabled()"
     [alwaysExpanded]="alwaysExpanded()"
+    [tabindex]="tabIndex()"
     (focusout)="onBlur()"
   />
 
@@ -1203,6 +1235,7 @@ class ComboboxListboxExample {
   disabled = signal(false);
   softDisabled = signal(true);
   alwaysExpanded = signal(false);
+  tabIndex = signal<number | undefined>(undefined);
   popupExpanded = signal(false);
   searchString = signal('');
   value = signal<string[]>([]);

src/aria/simple-combobox/simple-combobox.ts

@@ -19,7 +19,11 @@ import {
   signal,
   Renderer2,
 } from '@angular/core';
-import {DeferredContentAware, SimpleComboboxPattern} from '@angular/aria/private';
+import {
+  DeferredContentAware,
+  SimpleComboboxPattern,
+  tabIndexTransform,
+} from '@angular/aria/private';
 import type {ComboboxPopup} from './simple-combobox-popup';
 
 /**
@@ -51,7 +55,8 @@ import type {ComboboxPopup} from './simple-combobox-popup';
     '[attr.aria-activedescendant]': '_pattern.activeDescendant()',
     '[attr.aria-controls]': '_pattern.popupId()',
     '[attr.aria-haspopup]': '_pattern.popupType()',
-    '[attr.tabindex]': 'disabled() && !softDisabled() ? -1 : null',
+    '[attr.tabindex]':
+      'disabled() && !softDisabled() ? -1 : (tabIndex() !== undefined ? tabIndex() : 0)',
     '[attr.disabled]': 'disabled() && !softDisabled() ? "" : null',
     '(keydown)': '_pattern.onKeydown($event)',
     '(focusin)': '_pattern.onFocusin()',
@@ -81,6 +86,12 @@ export class Combobox extends DeferredContentAware implements OnInit {
   /** Whether the combobox should always remain expanded. */
   readonly alwaysExpanded = input(false, {transform: booleanAttribute});
 
+  /** The tabindex of the combobox. */
+  readonly tabIndex = input(undefined, {
+    alias: 'tabindex',
+    transform: tabIndexTransform,
+  });
+
   /** Whether the combobox is expanded. */
   readonly expanded = model<boolean>(false);
 

src/aria/tree/tree.ts

@@ -15,14 +15,19 @@ import {
   inject,
   input,
   model,
-  numberAttribute,
   signal,
   Signal,
   untracked,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
-import {ComboboxTreePattern, TreeItemPattern, TreePattern, sortDirectives} from '../private';
+import {
+  ComboboxTreePattern,
+  TreeItemPattern,
+  TreePattern,
+  sortDirectives,
+  tabIndexTransform,
+} from '../private';
 import {ComboboxPopup} from '../combobox';
 import type {TreeItem} from './tree-item';
 
@@ -134,8 +139,8 @@ export class Tree<V> {
 
   /** The tabindex of the tree. */
   readonly tabIndex = input(undefined, {
-    transform: (v: string | number | undefined) =>
-      v === undefined ? undefined : numberAttribute(v),
+    alias: 'tabindex',
+    transform: tabIndexTransform,
   });
 
   /** The values of the currently selected items. */

src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html

@@ -9,7 +9,7 @@
     [cdkConnectedOverlayDisableClose]="true">
     <ng-template ngComboboxPopup [combobox]="combobox">
       <div #listbox="ngListbox" ngListbox ngComboboxWidget class="example-listbox example-popup" focusMode="activedescendant"
-        [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()"
+        [tabindex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()"
         [activeDescendant]="listbox.activeDescendant()">
         @for (option of options(); track option) {
         <div class="example-option example-selectable example-stateful" ngOption [value]="option" [label]="option">

src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-auto-select/simple-combobox-autocomplete-auto-select-example.html

@@ -30,7 +30,8 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(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>

src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-disabled/simple-combobox-autocomplete-disabled-example.html

@@ -20,7 +20,7 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(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>

src/components-examples/aria/simple-combobox/simple-combobox-autocomplete-highlight/simple-combobox-autocomplete-highlight-example.html

@@ -31,7 +31,8 @@
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(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>