Skip to content

Commit 390e11b

Browse files
committed
fix(cdk-experimental/listbox): address feedback
1 parent 3607e09 commit 390e11b

File tree

1 file changed

+30
-3
lines changed

1 file changed

+30
-3
lines changed

src/cdk-experimental/listbox/listbox.ts

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ import {
2222
} from '@angular/core';
2323
import {ActiveDescendantKeyManager, Highlightable, ListKeyManagerOption} from '@angular/cdk/a11y';
2424
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';
2631
import {SelectionModel} from '@angular/cdk/collections';
2732
import {BehaviorSubject, combineLatest, defer, merge, Observable, Subject} from 'rxjs';
2833
import {filter, mapTo, startWith, switchMap, take, takeUntil} from 'rxjs/operators';
@@ -83,6 +88,18 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
8388
}
8489
private _disabled: boolean = false;
8590

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+
86103
/** The option's host element */
87104
readonly element: HTMLElement = inject(ElementRef).nativeElement;
88105

@@ -169,7 +186,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
169186
if (this.listbox.useActiveDescendant || this.disabled) {
170187
return -1;
171188
}
172-
return this.isActive() ? 0 : -1;
189+
return this.isActive() ? this.enabledTabIndex : -1;
173190
}
174191
}
175192

@@ -208,6 +225,16 @@ export class CdkListbox<T = unknown>
208225
/** The id of the option's host element. */
209226
@Input() id = `cdk-listbox-${nextId++}`;
210227

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+
211238
/** The value selected in the listbox, represented as an array of option values. */
212239
@Input('cdkListboxValue')
213240
get value(): readonly T[] {
@@ -597,7 +624,7 @@ export class CdkListbox<T = unknown>
597624
if (this.disabled) {
598625
return -1;
599626
}
600-
return this.useActiveDescendant || !this.listKeyManager.activeItem ? 0 : -1;
627+
return this.useActiveDescendant || !this.listKeyManager.activeItem ? this.enabledTabIndex : -1;
601628
}
602629

603630
/** Initialize the key manager. */

0 commit comments

Comments
 (0)