fix(chip-list): use role = listbox only if chip list is not empty (#7664)

Author: tinayuangao

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', () => {

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<any>, 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; }