fix(chips): Fix chip and chip list selectable (#9955)

Author: tinayuangao

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

@@ -63,6 +63,16 @@ describe('MatChipList', () => {
       it('should add the `mat-chip-list` class', () => {
         expect(chipListNativeElement.classList).toContain('mat-chip-list');
       });
+
+      it('should not have the aria-selected attribute when is not selectable', () => {
+        testComponent.selectable = false;
+        fixture.detectChanges();
+
+        const chipsValid = chips.toArray().every(chip =>
+            !chip.selectable && !chip._elementRef.nativeElement.hasAttribute('aria-selected'));
+
+        expect(chipsValid).toBe(true);
+      });
     });
 
     describe('with selected chips', () => {
@@ -1027,7 +1037,7 @@ describe('MatChipList', () => {
 
 @Component({
   template: `
-    <mat-chip-list [tabIndex]="tabIndex">
+    <mat-chip-list [tabIndex]="tabIndex" [selectable]="selectable">
       <div *ngFor="let i of [0,1,2,3,4]">
        <div *ngIf="remove != i">
           <mat-chip (select)="chipSelect(i)" (deselect)="chipDeselect(i)">

src/lib/chips/chip-list.ts

@@ -274,12 +274,17 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal';
 
   /**
-   * Whether or not this chip is selectable. When a chip is not selectable,
-   * its selected state is always ignored.
+   * Whether or not this chip list is selectable. When a chip list is not selectable,
+   * the selected states for all the chips inside the chip list are always ignored.
    */
   @Input()
   get selectable(): boolean { return this._selectable; }
-  set selectable(value: boolean) { this._selectable = coerceBooleanProperty(value); }
+  set selectable(value: boolean) { 
+    this._selectable = coerceBooleanProperty(value);
+    if (this.chips) {
+      this.chips.forEach(chip => chip.chipListSelectable = this._selectable);
+    }
+  }
   protected _selectable: boolean = true;
 
   @Input()

src/lib/chips/chip.ts

@@ -134,6 +134,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   /** Whether the chip has focus. */
   _hasFocus: boolean = false;
 
+  /** Whether the chip list is selectable */
+  chipListSelectable: boolean = true;
+
   /** The chip avatar */
   @ContentChild(MatChipAvatar) avatar: MatChipAvatar;
 
@@ -167,11 +170,13 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   protected _value: any;
 
   /**
-   * Whether or not the chips are selectable. When a chip is not selectable,
-   * changes to it's selected state are always ignored.
+   * Whether or not the chip is selectable. When a chip is not selectable,
+   * changes to it's selected state are always ignored. By default a chip is
+   * selectable, and it becomes non-selectable if it's parent chip list is
+   * not selectable.
    */
   @Input()
-  get selectable(): boolean { return this._selectable; }
+  get selectable(): boolean { return this._selectable && this.chipListSelectable; }
   set selectable(value: boolean) {
     this._selectable = coerceBooleanProperty(value);
   }