fix(material/stepper): fix nested tabpanel role in stepper

src/cdk/stepper/step-header.ts

@@ -11,9 +11,6 @@ import {FocusableOption} from '@angular/cdk/a11y';
 
 @Directive({
   selector: '[cdkStepHeader]',
-  host: {
-    'role': 'tab',
-  },
 })
 export class CdkStepHeader implements FocusableOption {
   _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);

src/dev-app/stepper/stepper-demo.html

@@ -1,3 +1,4 @@
+<h1>Stepper Demo</h1>
 <p>
   <mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
 </p>
@@ -23,7 +24,7 @@
   </mat-form-field>
 </p>
 
-<h3>Linear Stepper Demo using a single form</h3>
+<h2>Linear Stepper Demo using a single form</h2>
 <form [formGroup]="formGroup">
   <mat-stepper
     #linearStepper="matVerticalStepper"
@@ -77,7 +78,7 @@ <h3>Linear Stepper Demo using a single form</h3>
   </mat-stepper>
 </form>
 
-<h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
+<h2>Linear Horizontal Stepper Demo using a different form for each step</h2>
 <mat-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
                         [disableRipple]="disableRipple"
                         [labelPosition]="showLabelBottom ? 'bottom' : 'end'"
@@ -128,7 +129,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
   </mat-step>
 </mat-stepper>
 
-<h3>Vertical Stepper Demo</h3>
+<h2>Vertical Stepper Demo</h2>
 <mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
 <mat-stepper orientation="vertical" [color]="theme">
   <mat-step [editable]="!isNonEditable">
@@ -184,7 +185,7 @@ <h3>Vertical Stepper Demo</h3>
   </mat-step>
 </mat-stepper>
 
-<h3>Horizontal Stepper Demo with Text Label</h3>
+<h2>Horizontal Stepper Demo with Text Label</h2>
 <mat-stepper [color]="theme">
   <mat-step label="Fill out your name">
     <mat-form-field>
@@ -231,7 +232,7 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
   </mat-step>
 </mat-stepper>
 
-<h3>Horizontal Stepper Demo with Templated Label</h3>
+<h2>Horizontal Stepper Demo with Templated Label</h2>
 <mat-stepper [color]="theme">
   @for (step of steps; track step) {
     <mat-step>
@@ -248,7 +249,7 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
   }
 </mat-stepper>
 
-<h3>Stepper with autosize textarea</h3>
+<h2>Stepper with autosize textarea</h2>
 <mat-stepper [color]="theme">
   <mat-step label="Step 1">
     <mat-form-field>

src/material/stepper/step-header.ts

@@ -35,7 +35,6 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat
   host: {
     'class': 'mat-step-header',
     '[class]': '"mat-" + (color || "primary")',
-    'role': 'tab',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/material/stepper/stepper.html

@@ -11,7 +11,7 @@
 @switch (orientation) {
   @case ('horizontal') {
     <div class="mat-horizontal-stepper-wrapper">
-      <div class="mat-horizontal-stepper-header-container">
+      <div class="mat-horizontal-stepper-header-container" role="tablist">
         @for (step of steps; track step) {
           <ng-container
             [ngTemplateOutlet]="stepTemplate"
@@ -40,28 +40,37 @@
   }
 
   @case ('vertical') {
-    @for (step of steps; track step) {
-      <div class="mat-step">
-        <ng-container
-          [ngTemplateOutlet]="stepTemplate"
-          [ngTemplateOutletContext]="{step, i: $index}"/>
-        <div
-          #animatedContainer
-          class="mat-vertical-content-container"
-          [class.mat-stepper-vertical-line]="!$last"
-          [class.mat-vertical-content-container-active]="selectedIndex === $index"
-          [attr.inert]="selectedIndex === $index ? null : ''">
-          <div class="mat-vertical-stepper-content"
-            role="tabpanel"
-            [id]="_getStepContentId($index)"
-            [attr.aria-labelledby]="_getStepLabelId($index)">
-            <div class="mat-vertical-content">
-              <ng-container [ngTemplateOutlet]="step.content"/>
+    <div class="mat-vertical-stepper-wrapper" role="tree">
+      @for (step of steps; track step) {
+        <div class="mat-step"
+          role="treeitem"
+          [attr.aria-setsize]="steps.length"
+          [attr.aria-posinset]="$index + 1"
+          [attr.aria-selected]="selectedIndex == $index"
+          [attr.aria-controls]="_getStepContentId($index)"
+          [attr.aria-label]="step.ariaLabel || null"
+          [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
+          [attr.aria-disabled]="_stepIsNavigable($index, step) ? null : true">
+          <ng-container
+            [ngTemplateOutlet]="stepTemplate"
+            [ngTemplateOutletContext]="{step, i: $index}"/>
+          <div
+            #animatedContainer
+            class="mat-vertical-content-container"
+            [class.mat-stepper-vertical-line]="!$last"
+            [class.mat-vertical-content-container-active]="selectedIndex === $index"
+            [attr.inert]="selectedIndex === $index ? null : ''">
+            <div class="mat-vertical-stepper-content"
+              [id]="_getStepContentId($index)"
+              [attr.aria-labelledby]="_getStepLabelId($index)">
+              <div class="mat-vertical-content">
+                <ng-container [ngTemplateOutlet]="step.content"/>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    }
+      }
+    </div>
   }
 }
 
@@ -74,13 +83,14 @@
     (keydown)="_onKeydown($event)"
     [tabIndex]="_getFocusIndex() === i ? 0 : -1"
     [id]="_getStepLabelId(i)"
-    [attr.aria-posinset]="i + 1"
-    [attr.aria-setsize]="steps.length"
-    [attr.aria-controls]="_getStepContentId(i)"
-    [attr.aria-selected]="selectedIndex == i"
+    [attr.role]="orientation === 'horizontal'? 'tab' : undefined"
+    [attr.aria-posinset]="orientation === 'horizontal'? i + 1 : undefined"
+    [attr.aria-setsize]="orientation === 'horizontal'? steps.length : undefined"
+    [attr.aria-controls]="orientation === 'horizontal'? _getStepContentId(i) : undefined"
+    [attr.aria-selected]="orientation === 'horizontal'? selectedIndex == i : undefined"
     [attr.aria-label]="step.ariaLabel || null"
     [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
-    [attr.aria-disabled]="_stepIsNavigable(i, step) ? null : true"
+    [attr.aria-disabled]="orientation === 'horizontal'? _stepIsNavigable(i, step) ? null : true : undefined"
     [index]="i"
     [state]="_getIndicatorType(i, step.state)"
     [label]="step.stepLabel || step.label"

src/material/stepper/stepper.md

@@ -228,12 +228,17 @@ export class MyApp {}
 <!-- example(stepper-intl) -->
 
 ### Accessibility
-The stepper is treated as a tabbed view for accessibility purposes, so it is given
-`role="tablist"` by default. The header of step that can be clicked to select the step
+The stepper is treated as a tabbed view for accessibility purposes.
+
+For a horizontal stepper, based on its structure it is given `role="tablist"` by default. The header of step that can be clicked to select the step
 is given `role="tab"`, and the content that can be expanded upon selection is given
 `role="tabpanel"`. `aria-selected` attribute of step header is automatically set based on
 step selection change.
 
+For a vertical stepper, based on its structure it is given `role="tree"` by default. The `.mat-step` of each vertical step that can be clicked to select the step
+is given `role="treeitem"`, and the `.mat-step` gets an `aria-selected` and `aria-expanded` attribute of the `tree-item` is automatically set based on
+step selection change.
+
 The stepper and each step should be given a meaningful label via `aria-label` or `aria-labelledby`.
 
 Prefer vertical steppers when building for small screen sizes, as horizontal

src/material/stepper/stepper.ts

@@ -132,7 +132,6 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
     '[class.mat-stepper-animating]': '_isAnimating()',
     '[style.--mat-stepper-animation-duration]': '_getAnimationDuration()',
     '[attr.aria-orientation]': 'orientation',
-    'role': 'tablist',
   },
   providers: [{provide: CdkStepper, useExisting: MatStepper}],
   encapsulation: ViewEncapsulation.None,