fix(material/stepper): add text for screen readers to indicate when step is complete

Author: amysorto

src/material/stepper/step-header.html

@@ -10,6 +10,10 @@
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
     <ng-container *ngSwitchDefault [ngSwitch]="state">
       <span *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
+      <span class="cdk-visually-hidden"
+            *ngIf="state == 'done' || state == 'edit'">
+        {{_intl.completedScreenReaderLabel}}
+      </span>
       <mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
     </ng-container>
   </div>

src/material/stepper/stepper-intl.ts

@@ -21,6 +21,9 @@ export class MatStepperIntl {
 
   /** Label that is rendered below optional steps. */
   optionalLabel: string = 'Optional';
+
+  /** Label that is used to indicate step as completed to screen readers. */
+  completedScreenReaderLabel: string = 'Completed';
 }
 
 

tools/public_api_guard/material/stepper.md

@@ -184,6 +184,7 @@ export interface MatStepperIconContext {
 // @public
 export class MatStepperIntl {
     readonly changes: Subject<void>;
+    completedScreenReaderLabel: string;
     optionalLabel: string;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepperIntl, never>;