Skip to content

Commit dc76c09

Browse files
tinayuangaoandrewseguin
authored andcommitted
fix(chip-list): use role = listbox only if chip list is not empty (#7664)
1 parent bb424e2 commit dc76c09

File tree

2 files changed

+18
-1
lines changed

2 files changed

+18
-1
lines changed

src/lib/chips/chip-list.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ describe('MatChipList', () => {
6868
beforeEach(async(() => {
6969
fixture = TestBed.createComponent(SelectedChipList);
7070
fixture.detectChanges();
71+
chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));
72+
chipListNativeElement = chipListDebugElement.nativeElement;
7173
}));
7274

7375
it('should not override chips selected', () => {
@@ -77,6 +79,17 @@ describe('MatChipList', () => {
7779
expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.');
7880
expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.');
7981
});
82+
83+
it('should have role listbox', () => {
84+
expect(chipListNativeElement.getAttribute('role')).toBe('listbox');
85+
});
86+
87+
it('should not have role when empty', () => {
88+
fixture.componentInstance.foods = [];
89+
fixture.detectChanges();
90+
91+
expect(chipListNativeElement.getAttribute('role')).toBeNull('Expect no role attribute');
92+
});
8093
});
8194

8295
describe('focus behaviors', () => {

src/lib/chips/chip-list.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ export class MatChipListChange {
6363
'[attr.aria-disabled]': 'disabled.toString()',
6464
'[attr.aria-invalid]': 'errorState',
6565
'[attr.aria-multiselectable]': 'multiple',
66+
'[attr.role]': 'role',
6667
'[class.mat-chip-list-disabled]': 'disabled',
6768
'[class.mat-chip-list-invalid]': 'errorState',
6869
'[class.mat-chip-list-required]': 'required',
69-
'role': 'listbox',
7070
'[attr.aria-orientation]': 'ariaOrientation',
7171
'class': 'mat-chip-list',
7272
'(focus)': 'focus()',
@@ -170,6 +170,10 @@ export class MatChipList implements MatFormFieldControl<any>, ControlValueAccess
170170
return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];
171171
}
172172

173+
get role(): string|null {
174+
return this.empty ? null : 'listbox';
175+
}
176+
173177
/** Whether the user should be allowed to select multiple chips. */
174178
@Input()
175179
get multiple(): boolean { return this._multiple; }

0 commit comments

Comments
 (0)