Skip to content

Commit 5b1c00e

Browse files
committed
fix(material/stepper): add text for screen readers to indicate when step is complete
1 parent 2c48fc8 commit 5b1c00e

File tree

2 files changed

+7
-0
lines changed

2 files changed

+7
-0
lines changed

src/material/stepper/step-header.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
1111
<ng-container *ngSwitchDefault [ngSwitch]="state">
1212
<span *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
13+
<span class="cdk-visually-hidden"
14+
*ngIf="state == 'done' || state == 'edit'">
15+
{{_intl.completedScreenReaderLabel}}
16+
</span>
1317
<mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
1418
</ng-container>
1519
</div>

src/material/stepper/stepper-intl.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export class MatStepperIntl {
2121

2222
/** Label that is rendered below optional steps. */
2323
optionalLabel: string = 'Optional';
24+
25+
/** Label that is used to indicate step as completed to screen readers. */
26+
completedScreenReaderLabel: string = 'Completed';
2427
}
2528

2629

0 commit comments

Comments
 (0)