From 42cce336735099362bbd84e79acd7f9ddf8e3e7d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 30 Nov 2021 10:09:32 +0100
Subject: [PATCH] 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.
---
 src/material/stepper/step-header.html | 4 ++--
 src/material/stepper/stepper.spec.ts  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/material/stepper/step-header.html b/src/material/stepper/step-header.html
index d4afdce0339a..0924af21e7ed 100644
--- 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
index 6975d3a76bec..d01c71c9ab20 100644
--- 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', () => {