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

Author: amysorto

src/material/stepper/step-header.html

@@ -10,6 +10,12 @@
       [ngTemplateOutletContext]="_getIconContext()"></ng-container>
     <ng-container *ngSwitchDefault [ngSwitch]="state">
       <span *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>
     </ng-container>
   </div>

src/material/stepper/stepper-intl.ts

@@ -21,6 +21,12 @@ 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. */
+  completedLabel: string = 'Completed';
+
+  /** Label that is used to indicate step as editable to screen readers. */
+  editableLabel: string = 'Editable';
 }
 
 

tools/public_api_guard/material/stepper.md

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