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

…24025) Fixes that the text inside the icon was being read out when the user interacts with the stepper header using assistive technology.
angular · Dec 14, 2021 · 470abdf · 470abdf
1 parent 24180d1
commit 470abdf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/material/stepper/step-header.html b/src/material/stepper/step-header.html
@@ -9,10 +9,10 @@
       [ngTemplateOutlet]="iconOverrides[state]"
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
     <ng-container *ngSwitchDefault [ngSwitch]="state">
-      <span *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
+      <span aria-hidden="true" *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
       <span class="cdk-visually-hidden" *ngIf="state === 'done'">{{_intl.completedLabel}}</span>
       <span class="cdk-visually-hidden" *ngIf="state === 'edit'">{{_intl.editableLabel}}</span>
-      <mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
+      <mat-icon aria-hidden="true" *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
     </ng-container>
   </div>
 </div>

diff --git a/src/material/stepper/stepper.spec.ts b/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 span');
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {