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

(cherry picked from commit 2602d2e)

Author: amysorto

src/material/stepper/step-header.html

@@ -10,6 +10,8 @@
       [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';
 }
 
 

src/material/stepper/stepper.spec.ts

@@ -476,6 +476,68 @@ describe('MatStepper', () => {
     }));
   });
 
+  describe('basic stepper with completed label change', () => {
+    let fixture: ComponentFixture<SimpleMatHorizontalStepperApp>;
+
+    beforeEach(() => {
+      fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+    });
+
+    it('should re-render when the completed labels change', inject([MatStepperIntl],
+      (intl: MatStepperIntl) => {
+        const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
+        const stepperComponent: MatStepper = stepperDebugElement.componentInstance;
+
+        stepperComponent.steps.toArray()[0].editable = false;
+        stepperComponent.next();
+        fixture.detectChanges();
+
+        const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
+        const completedLabel = header.querySelector('.cdk-visually-hidden');
+
+        expect(completedLabel).toBeTruthy();
+        expect(completedLabel.textContent).toBe('Completed');
+
+        intl.completedLabel = 'Completada';
+        intl.changes.next();
+        fixture.detectChanges();
+
+        expect(completedLabel.textContent).toBe('Completada');
+    }));
+  });
+
+  describe('basic stepper with editable label change', () => {
+    let fixture: ComponentFixture<SimpleMatHorizontalStepperApp>;
+
+    beforeEach(() => {
+      fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+    });
+
+    it('should re-render when the editable label changes', inject([MatStepperIntl],
+      (intl: MatStepperIntl) => {
+        const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
+        const stepperComponent: MatStepper = stepperDebugElement.componentInstance;
+
+        stepperComponent.steps.toArray()[0].editable = true;
+        stepperComponent.next();
+        fixture.detectChanges();
+
+        const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
+        const editableLabel = header.querySelector('.cdk-visually-hidden');
+
+        expect(editableLabel).toBeTruthy();
+        expect(editableLabel.textContent).toBe('Editable');
+
+        intl.editableLabel = 'Modificabile';
+        intl.changes.next();
+        fixture.detectChanges();
+
+        expect(editableLabel.textContent).toBe('Modificabile');
+    }));
+  });
+
   describe('icon overrides', () => {
     let fixture: ComponentFixture<IconOverridesStepper>;
 

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>;