fix(material-experimental/mdc-chips): removed chip still focus… (#18083)

When an MDC chip is removed it gets transitioned to `width: 0`, but it's up to the consumer to remove it from the DOM. This means that it's possible for the user to tab into it. These changes add `display: none` after the animation is done so the element becomes non-focusable.

Author: crisbeto

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

@@ -104,6 +104,17 @@ describe('MDC-based MatChip', () => {
       expect(testComponent.chipRemove).toHaveBeenCalledWith({chip: chipInstance});
     });
 
+    it('should make the chip non-focusable when it is removed', () => {
+      chipInstance.remove();
+      fixture.detectChanges();
+
+      const fakeEvent = createFakeEvent('transitionend');
+      (fakeEvent as any).propertyName = 'width';
+      chipNativeElement.dispatchEvent(fakeEvent);
+
+      expect(chipNativeElement.style.display).toBe('none');
+    });
+
     it('should be able to disable ripples through ripple global options at runtime', () => {
       expect(chipInstance.rippleDisabled).toBe(false, 'Expected chip ripples to be enabled.');
 

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

@@ -266,7 +266,13 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       // future.
     },
     notifyTrailingIconInteraction: () => this.removeIconInteraction.emit(this.id),
-    notifyRemoval: () => this.removed.emit({chip: this}),
+    notifyRemoval: () => {
+      this.removed.emit({ chip: this });
+
+      // When MDC removes a chip it just transitions it to `width: 0px` which means that it's still
+      // in the DOM and it's still focusable. Make it `display: none` so users can't tab into it.
+      this._elementRef.nativeElement.style.display = 'none';
+    },
     getComputedStyleValue: propertyName => {
       // This function is run when a chip is removed so it might be
       // invoked during server-side rendering. Add some extra checks just in case.