fix(chips): allow for role to be overwritten on chip list and chip

Allows for the ARIA `role` of the `mat-chip-list` and `mat-chip` to be overwritten.

Fixes #15787.

Author: crisbeto

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

@@ -131,6 +131,13 @@ describe('MatChipList', () => {
 
         expect(chipListNativeElement.getAttribute('role')).toBeNull('Expect no role attribute');
       });
+
+      it('should be able to set a custom role', () => {
+        fixture.componentInstance.chipList.role = 'grid';
+        fixture.detectChanges();
+
+        expect(chipListNativeElement.getAttribute('role')).toBe('grid');
+      });
     });
 
     describe('focus behaviors', () => {
@@ -1516,9 +1523,9 @@ class FalsyValueChipList {
 @Component({
   template: `
     <mat-chip-list>
-        <mat-chip *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
-            {{ food.viewValue }}
-        </mat-chip>
+      <mat-chip *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
+        {{ food.viewValue }}
+      </mat-chip>
     </mat-chip-list>
   `
 })
@@ -1529,6 +1536,7 @@ class SelectedChipList {
     {value: 2, viewValue: 'Pasta', selected: true},
   ];
   @ViewChildren(MatChip) chips: QueryList<MatChip>;
+  @ViewChild(MatChipList) chipList: MatChipList;
 }
 
 @Component({

src/material/chips/chip-list.ts

@@ -165,7 +165,18 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   }
 
   /** The ARIA role applied to the chip list. */
-  get role(): string | null { return this.empty ? null : 'listbox'; }
+  @Input()
+  get role(): string | null {
+    if (this._explicitRole) {
+      return this._explicitRole;
+    }
+
+    return this.empty ? null : 'listbox';
+  }
+  set role(role: string | null) {
+    this._explicitRole = role;
+  }
+  private _explicitRole?: string | null;
 
   /** An object used to control when error messages are shown. */
   @Input() errorStateMatcher: ErrorStateMatcher;

src/material/chips/chip.spec.ts

@@ -56,6 +56,17 @@ describe('Chips', () => {
       expect(chipNativeElement.classList).toContain('mat-chip');
       expect(chipNativeElement.classList).toContain('mat-basic-chip');
     });
+
+    it('should have the correct role', () => {
+      expect(chipNativeElement.getAttribute('role')).toBe('option');
+    });
+
+    it('should be able to set a custom role', () => {
+      chipInstance.role = 'gridcell';
+      fixture.detectChanges();
+
+      expect(chipNativeElement.getAttribute('role')).toBe('gridcell');
+    });
   });
 
   describe('MatChip', () => {

src/material/chips/chip.ts

@@ -100,7 +100,7 @@ export class MatChipTrailingIcon {}
   host: {
     'class': 'mat-chip',
     '[attr.tabindex]': 'disabled ? null : -1',
-    'role': 'option',
+    '[attr.role]': 'role',
     '[class.mat-chip-selected]': 'selected',
     '[class.mat-chip-with-avatar]': 'avatar',
     '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
@@ -154,6 +154,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   /** The chip's remove toggler. */
   @ContentChild(forwardRef(() => MatChipRemove), {static: false}) removeIcon: MatChipRemove;
 
+  /** ARIA role that should be applied to the chip. */
+  @Input() role: string = 'option';
+
   /** Whether the chip is selected. */
   @Input()
   get selected(): boolean { return this._selected; }

tools/public_api_guard/material/chips.d.ts

@@ -19,6 +19,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     readonly removed: EventEmitter<MatChipEvent>;
     rippleConfig: RippleConfig & RippleGlobalOptions;
     readonly rippleDisabled: boolean;
+    role: string;
     selectable: boolean;
     selected: boolean;
     readonly selectionChange: EventEmitter<MatChipSelectionChange>;
@@ -108,7 +109,7 @@ export declare class MatChipList extends _MatChipListMixinBase implements MatFor
     ngControl: NgControl;
     placeholder: string;
     required: boolean;
-    readonly role: string | null;
+    role: string | null;
     selectable: boolean;
     readonly selected: MatChip[] | MatChip;
     readonly shouldLabelFloat: boolean;