feat(material-experimental/mdc-chips): Allow custom role for ChipSet (#20829)

The default mat-chip-set role is 'presentation' if chips are
present, and null if there are no chips. Some users want to
specify custom roles, in particular 'list' (they would use
'listitem' for the chips, which have no default role).
Currently this isn't possible, because mat-chip-set overwrites
their custom role with 'presentation'. Add an Input to allow a
custom role.

Author: vanessanschmitt

src/material-experimental/mdc-chips/chip-set.spec.ts

@@ -67,9 +67,15 @@ describe('MDC-based MatChipSet', () => {
         expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
       }));
 
-      it('should have role presentation', () => {
+      it('should have role presentation by default', () => {
         expect(chipSetNativeElement.getAttribute('role')).toBe('presentation');
       });
+
+      it('should allow a custom role to be specified', () => {
+        chipSetInstance.role = 'list';
+        fixture.detectChanges();
+        expect(chipSetNativeElement.getAttribute('role')).toBe('list');
+      });
     });
   });
 

src/material-experimental/mdc-chips/chip-set.ts

@@ -132,7 +132,19 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   get empty(): boolean { return this._chips.length === 0; }
 
   /** The ARIA role applied to the chip set. */
-  get role(): string | null { return this.empty ? null : 'presentation'; }
+  @Input()
+  get role(): string | null {
+    if (this._role) {
+      return this._role;
+    } else {
+      return this.empty ? null : 'presentation';
+    }
+  }
+
+  set role(value: string | null) {
+    this._role = value;
+  }
+  private _role: string|null = null;
 
   /** Whether any of the chips inside of this chip-set has focus. */
   get focused(): boolean { return this._hasFocusedChip(); }