fix(material/stepper): assistive technology reading out stepper icon

Fixes that the text inside the icon was being read out when the user interacts with the stepper header using assistive technology.

Author: crisbeto

src/material/stepper/step-header.html

@@ -2,7 +2,10 @@
      [matRippleTrigger]="_getHostElement()"
      [matRippleDisabled]="disableRipple"></div>
 
-<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">
+<div
+  class="mat-step-icon-state-{{state}} mat-step-icon"
+  [class.mat-step-icon-selected]="selected"
+  aria-hidden="true">
   <div class="mat-step-icon-content" [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
     <ng-container
       *ngSwitchCase="true"

src/material/stepper/stepper.spec.ts

@@ -444,6 +444,11 @@ describe('MatStepper', () => {
         stepHeaderNativeElements.every(element => element.querySelector('.mat-focus-indicator')),
       ).toBe(true);
     });
+
+    it('should hide the header icons from assistive technology', () => {
+      const icon = fixture.nativeElement.querySelector('.mat-step-icon');
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {