fix(material-experimental/mdc-chips): remove aria-hidden from… (#18054)

The MDC-based `MatChipRemove` extends the `MatChipTrailingIcon` which has `aria-hidden`, however the `MatChipRemove` is focusable which is invalid. These changes clear the `aria-hidden` from the remove icon.

Author: crisbeto

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

@@ -84,7 +84,7 @@ const _MatChipRemoveMixinBase:
   CanDisableCtor &
   HasTabIndexCtor &
   typeof MatChipRemoveBase =
-    mixinTabIndex(mixinDisabled(MatChipRemoveBase));
+    mixinTabIndex(mixinDisabled(MatChipRemoveBase), 0);
 
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
@@ -95,9 +95,11 @@ const _MatChipRemoveMixinBase:
  *
  * Example:
  *
- *     `<mat-chip>
- *       <mat-icon matChipRemove>cancel</mat-icon>
- *     </mat-chip>`
+ * ```
+ * <mat-chip>
+ *   <mat-icon matChipRemove>cancel</mat-icon>
+ * </mat-chip>
+ * ```
  */
 @Directive({
   selector: '[matChipRemove]',
@@ -109,6 +111,9 @@ const _MatChipRemoveMixinBase:
     'role': 'button',
     '(click)': 'interaction.next($event)',
     '(keydown)': 'interaction.next($event)',
+
+    // We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon.
+    '[attr.aria-hidden]': 'null',
   }
 })
 export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex {

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

@@ -78,6 +78,14 @@ describe('MDC-based Chip Remove', () => {
 
       expect(chipNativeElement.classList.contains('mdc-chip--exit')).toBe(false);
     });
+
+    it('should not make the element aria-hidden when it is focusable', () => {
+      const buttonElement = chipNativeElement.querySelector('button')!;
+
+      expect(buttonElement.getAttribute('tabindex')).toBe('0');
+      expect(buttonElement.hasAttribute('aria-hidden')).toBe(false);
+    });
+
   });
 });