From d4bccb5ed55d9f3c9b4b6a847ae479cc5e7ef013 Mon Sep 17 00:00:00 2001
From: Sepandard <sepandar.derakhshandeh@gmail.com>
Date: Sat, 26 Sep 2026 13:58:03 +0330
Subject: [PATCH] docs(material/stepper): add aria-label to stepper examples

The stepper examples didn't set an `aria-label`, which meant that the stepper's tablist
and vertical content containers didn't have an accessible name.

Fixes #33853.
---
 .../stepper/stepper-editable/stepper-editable-example.html    | 2 +-
 .../stepper/stepper-errors/stepper-errors-example.html        | 2 +-
 .../stepper/stepper-harness/stepper-harness-example.html      | 2 +-
 .../stepper-header-position-example.html                      | 2 +-
 .../material/stepper/stepper-intl/stepper-intl-example.html   | 2 +-
 .../stepper-label-position-bottom-example.html                | 2 +-
 .../stepper-lazy-content/stepper-lazy-content-example.html    | 2 +-
 .../stepper/stepper-optional/stepper-optional-example.html    | 2 +-
 .../stepper/stepper-overview/stepper-overview-example.html    | 2 +-
 .../stepper-responsive/stepper-responsive-example.html        | 1 +
 .../stepper-signal-forms/stepper-signal-forms-example.html    | 2 +-
 .../stepper/stepper-states/stepper-states-example.html        | 4 ++--
 .../stepper/stepper-vertical/stepper-vertical-example.html    | 2 +-
 13 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
index f5294df6a264..9854177bea78 100644
--- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
+++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
@@ -2,7 +2,7 @@
   {{!isEditable() ? 'Enable edit mode' : 'Disable edit mode'}}
 </button>
 
-<mat-stepper linear #stepper>
+<mat-stepper aria-label="Editable stepper" linear #stepper>
 <!-- #docregion editable -->
   <mat-step [stepControl]="firstFormGroup" [editable]="isEditable()">
 <!-- #enddocregion editable -->
diff --git a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html
index 8f24359835e3..ad315d8be273 100644
--- a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html
+++ b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html
@@ -1,4 +1,4 @@
-<mat-stepper #stepper>
+<mat-stepper aria-label="Stepper with errors" #stepper>
   <mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-harness/stepper-harness-example.html b/src/components-examples/material/stepper/stepper-harness/stepper-harness-example.html
index 8ca35785dbee..0073a9d60e5f 100644
--- a/src/components-examples/material/stepper/stepper-harness/stepper-harness-example.html
+++ b/src/components-examples/material/stepper/stepper-harness/stepper-harness-example.html
@@ -1,4 +1,4 @@
-<mat-stepper>
+<mat-stepper aria-label="Stepper harness example">
   <mat-step>
     <ng-template matStepLabel>One</ng-template>
     <button matStepperNext>Next</button>
diff --git a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html
index 06c357bdd644..3d2ac81a598a 100644
--- a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html
+++ b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html
@@ -1,4 +1,4 @@
-<mat-stepper headerPosition="bottom" #stepper>
+<mat-stepper aria-label="Stepper with header at the bottom" headerPosition="bottom" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
index 3a63f1e68ea3..7705690eea26 100644
--- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
+++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
@@ -10,7 +10,7 @@
       [value]="optionalLabelTextChoice">{{optionalLabelTextChoice}}</mat-radio-button>
   }
 </mat-radio-group>
-<mat-stepper class="demo-stepper" #stepper>
+<mat-stepper aria-label="Internationalized stepper" class="demo-stepper" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
index d2ba6100b717..3f9c5cb468ca 100644
--- a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
+++ b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html
@@ -1,5 +1,5 @@
 <!-- #docregion label-position -->
-<mat-stepper labelPosition="bottom" #stepper>
+<mat-stepper aria-label="Stepper with labels at the bottom" labelPosition="bottom" #stepper>
 <!-- #enddocregion label-position -->
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
diff --git a/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html b/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html
index e5ff21d24375..b9f1b2b4c78e 100644
--- a/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html
+++ b/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html
@@ -1,4 +1,4 @@
-<mat-stepper orientation="vertical">
+<mat-stepper aria-label="Stepper with lazy content" orientation="vertical">
   <mat-step>
     <ng-template matStepLabel>Step 1</ng-template>
     <ng-template matStepContent>
diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
index b0fe17d498c7..045c00d78fb0 100644
--- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
+++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html
@@ -2,7 +2,7 @@
   {{!isOptional() ? 'Enable optional steps' : 'Disable optional steps'}}
 </button>
 
-<mat-stepper linear #stepper>
+<mat-stepper aria-label="Stepper with optional step" linear #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html
index 61a71c2d6334..2e08b51f1185 100644
--- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html
+++ b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html
@@ -1,7 +1,7 @@
 <button matButton="elevated" (click)="isLinear.set(!isLinear())" id="toggle-linear">
   {{!isLinear() ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-stepper [linear]="isLinear()" #stepper>
+<mat-stepper aria-label="Horizontal stepper" [linear]="isLinear()" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
index 31429d631cc5..6d2b18832369 100644
--- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
+++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
@@ -8,6 +8,7 @@
 }
 
 <mat-stepper
+  aria-label="Responsive stepper"
   class="example-stepper"
   [orientation]="(stepperOrientation | async)!">
   <mat-step [stepControl]="firstFormGroup" label="Fill out your name">
diff --git a/src/components-examples/material/stepper/stepper-signal-forms/stepper-signal-forms-example.html b/src/components-examples/material/stepper/stepper-signal-forms/stepper-signal-forms-example.html
index 0376d7160051..4ae0cb69f7db 100644
--- a/src/components-examples/material/stepper/stepper-signal-forms/stepper-signal-forms-example.html
+++ b/src/components-examples/material/stepper/stepper-signal-forms/stepper-signal-forms-example.html
@@ -2,7 +2,7 @@
   {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
 
-<mat-stepper [linear]="isLinear()" #stepper>
+<mat-stepper aria-label="Stepper with signal forms" [linear]="isLinear()" #stepper>
   <mat-step [stepControl]="nameFormGroup">
     <form (submit)="$event.preventDefault()">
       <ng-template matStepLabel>Fill out your name</ng-template>
diff --git a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
index cce56f30f5c4..0be180f0f410 100644
--- a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
+++ b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html
@@ -1,4 +1,4 @@
-<mat-stepper #stepper>
+<mat-stepper aria-label="Stepper with custom states" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -36,7 +36,7 @@
 </mat-stepper>
 
 <!-- #docregion states -->
-<mat-stepper>
+<mat-stepper aria-label="Stepper with custom state icons">
 <!-- #docregion label -->
   <mat-step label="Step 1" state="phone">
     <p>Put down your phones.</p>
diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html
index c7fecc24ccf4..4caf30f4dcc0 100644
--- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html
+++ b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html
@@ -1,7 +1,7 @@
 <button matButton="elevated" (click)="isLinear.set(!isLinear())" id="toggle-linear">
   {{!isLinear() ? 'Enable linear mode' : 'Disable linear mode'}}
 </button>
-<mat-stepper orientation="vertical" [linear]="isLinear()" #stepper>
+<mat-stepper aria-label="Vertical stepper" orientation="vertical" [linear]="isLinear()" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>