diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index fd8ba8bda5c2..25a0b60f2bef 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -68,6 +68,8 @@ describe('MatChipList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectedChipList); fixture.detectChanges(); + chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList)); + chipListNativeElement = chipListDebugElement.nativeElement; })); it('should not override chips selected', () => { @@ -77,6 +79,17 @@ describe('MatChipList', () => { expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.'); expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.'); }); + + it('should have role listbox', () => { + expect(chipListNativeElement.getAttribute('role')).toBe('listbox'); + }); + + it('should not have role when empty', () => { + fixture.componentInstance.foods = []; + fixture.detectChanges(); + + expect(chipListNativeElement.getAttribute('role')).toBeNull('Expect no role attribute'); + }); }); describe('focus behaviors', () => { diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 5195bba0badd..f419823e28f6 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -63,10 +63,10 @@ export class MatChipListChange { '[attr.aria-disabled]': 'disabled.toString()', '[attr.aria-invalid]': 'errorState', '[attr.aria-multiselectable]': 'multiple', + '[attr.role]': 'role', '[class.mat-chip-list-disabled]': 'disabled', '[class.mat-chip-list-invalid]': 'errorState', '[class.mat-chip-list-required]': 'required', - 'role': 'listbox', '[attr.aria-orientation]': 'ariaOrientation', 'class': 'mat-chip-list', '(focus)': 'focus()', @@ -170,6 +170,10 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0]; } + get role(): string|null { + return this.empty ? null : 'listbox'; + } + /** Whether the user should be allowed to select multiple chips. */ @Input() get multiple(): boolean { return this._multiple; }