@@ -22,7 +22,12 @@ import {
22
22
} from '@angular/core' ;
23
23
import { ActiveDescendantKeyManager , Highlightable , ListKeyManagerOption } from '@angular/cdk/a11y' ;
24
24
import { DOWN_ARROW , ENTER , LEFT_ARROW , RIGHT_ARROW , SPACE , UP_ARROW } from '@angular/cdk/keycodes' ;
25
- import { BooleanInput , coerceArray , coerceBooleanProperty } from '@angular/cdk/coercion' ;
25
+ import {
26
+ BooleanInput ,
27
+ coerceArray ,
28
+ coerceBooleanProperty ,
29
+ coerceNumberProperty ,
30
+ } from '@angular/cdk/coercion' ;
26
31
import { SelectionModel } from '@angular/cdk/collections' ;
27
32
import { BehaviorSubject , combineLatest , defer , merge , Observable , Subject } from 'rxjs' ;
28
33
import { filter , mapTo , startWith , switchMap , take , takeUntil } from 'rxjs/operators' ;
@@ -83,6 +88,18 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
83
88
}
84
89
private _disabled : boolean = false ;
85
90
91
+ /** The tabindex of the option when it is enabled. */
92
+ @Input ( 'tabindex' )
93
+ get enabledTabIndex ( ) {
94
+ return this . _enabledTabIndex === undefined
95
+ ? this . listbox . enabledTabIndex
96
+ : this . _enabledTabIndex ;
97
+ }
98
+ set enabledTabIndex ( value ) {
99
+ this . _enabledTabIndex = value ;
100
+ }
101
+ private _enabledTabIndex ?: number | null ;
102
+
86
103
/** The option's host element */
87
104
readonly element : HTMLElement = inject ( ElementRef ) . nativeElement ;
88
105
@@ -169,7 +186,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
169
186
if ( this . listbox . useActiveDescendant || this . disabled ) {
170
187
return - 1 ;
171
188
}
172
- return this . isActive ( ) ? 0 : - 1 ;
189
+ return this . isActive ( ) ? this . enabledTabIndex : - 1 ;
173
190
}
174
191
}
175
192
@@ -208,6 +225,16 @@ export class CdkListbox<T = unknown>
208
225
/** The id of the option's host element. */
209
226
@Input ( ) id = `cdk-listbox-${ nextId ++ } ` ;
210
227
228
+ /** The tabindex to use when the listbox is enabled. */
229
+ @Input ( 'tabindex' )
230
+ get enabledTabIndex ( ) {
231
+ return this . _enabledTabIndex === undefined ? 0 : this . _enabledTabIndex ;
232
+ }
233
+ set enabledTabIndex ( value ) {
234
+ this . _enabledTabIndex = value ;
235
+ }
236
+ private _enabledTabIndex ?: number | null ;
237
+
211
238
/** The value selected in the listbox, represented as an array of option values. */
212
239
@Input ( 'cdkListboxValue' )
213
240
get value ( ) : readonly T [ ] {
@@ -597,7 +624,7 @@ export class CdkListbox<T = unknown>
597
624
if ( this . disabled ) {
598
625
return - 1 ;
599
626
}
600
- return this . useActiveDescendant || ! this . listKeyManager . activeItem ? 0 : - 1 ;
627
+ return this . useActiveDescendant || ! this . listKeyManager . activeItem ? this . enabledTabIndex : - 1 ;
601
628
}
602
629
603
630
/** Initialize the key manager. */
0 commit comments