fix(chips): able to remove disabled chip via remove button

Fixes users being able to remove disabled chips by clicking on their remove button.

Fixes #15708.

Author: crisbeto

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

@@ -31,33 +31,54 @@ describe('Chip Remove', () => {
 
   describe('basic behavior', () => {
     it('should applies the `mat-chip-remove` CSS class', () => {
-      let hrefElement = chipNativeElement.querySelector('a')!;
+      let buttonElement = chipNativeElement.querySelector('button')!;
 
-      expect(hrefElement.classList).toContain('mat-chip-remove');
+      expect(buttonElement.classList).toContain('mat-chip-remove');
     });
 
     it('should emits (removed) on click', () => {
-      let hrefElement = chipNativeElement.querySelector('a')!;
+      let buttonElement = chipNativeElement.querySelector('button')!;
 
       testChip.removable = true;
       fixture.detectChanges();
 
       spyOn(testChip, 'didRemove');
 
-      hrefElement.click();
+      buttonElement.click();
+      fixture.detectChanges();
 
       expect(testChip.didRemove).toHaveBeenCalled();
     });
+
+    it('should not remove if parent chip is disabled', () => {
+      let buttonElement = chipNativeElement.querySelector('button')!;
+
+      testChip.disabled = true;
+      testChip.removable = true;
+      fixture.detectChanges();
+
+      spyOn(testChip, 'didRemove');
+
+      buttonElement.click();
+      fixture.detectChanges();
+
+      expect(testChip.didRemove).not.toHaveBeenCalled();
+    });
+
   });
 });
 
 @Component({
   template: `
-    <mat-chip [removable]="removable" (removed)="didRemove()"><a matChipRemove></a></mat-chip>
+    <mat-chip
+      [removable]="removable"
+      [disabled]="disabled"
+      (removed)="didRemove()"><button matChipRemove></button></mat-chip>
   `
 })
 class TestChip {
   removable: boolean;
+  disabled = false;
 
   didRemove() {}
 }

src/lib/chips/chip.ts

@@ -396,8 +396,10 @@ export class MatChipRemove {
 
   /** Calls the parent chip's public `remove()` method if applicable. */
   _handleClick(event: Event): void {
-    if (this._parentChip.removable) {
-      this._parentChip.remove();
+    const parentChip = this._parentChip;
+
+    if (parentChip.removable && !parentChip.disabled) {
+      parentChip.remove();
     }
 
     // We need to stop event propagation because otherwise the event will bubble up to the