From f605fcf0582b5b4233a2ed91b495efa62baefb3a Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Thu, 2 Sep 2021 22:40:55 +0000
Subject: [PATCH] fix(material/stepper): add text for screen readers to
 indicate when step is complete or editable

---
 src/material/stepper/step-header.html      |  2 +
 src/material/stepper/stepper-intl.ts       |  6 +++
 src/material/stepper/stepper.spec.ts       | 62 ++++++++++++++++++++++
 tools/public_api_guard/material/stepper.md |  2 +
 4 files changed, 72 insertions(+)

diff --git a/src/material/stepper/step-header.html b/src/material/stepper/step-header.html
index 2c1709f68d87..d4afdce0339a 100644
--- a/src/material/stepper/step-header.html
+++ b/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>
diff --git a/src/material/stepper/stepper-intl.ts b/src/material/stepper/stepper-intl.ts
index 9e0dab687036..fbb2f9e5a833 100644
--- a/src/material/stepper/stepper-intl.ts
+++ b/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';
 }
 
 
diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts
index b7e79c36fc75..4eb0a7dd9c22 100644
--- a/src/material/stepper/stepper.spec.ts
+++ b/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>;
 
diff --git a/tools/public_api_guard/material/stepper.md b/tools/public_api_guard/material/stepper.md
index 453db6474fff..c9284f1e7a3a 100644
--- a/tools/public_api_guard/material/stepper.md
+++ b/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>;