fix(material/stepper): changes vertical stepper aria attributes to tree-related

Updates Angular Components Stepper vertical stepper to use and match correct
aria attributes to match role=tree instead of using tablist/tab/tabpanel since
moving the tabpanel content outside of the mat-step changes the visual look of
the vertical stepper. WIP: update the docs to mention change of roles for vertical
stepper to tree and its appropriate aria-attributes.

Fixes b/361783174

Author: essjay05

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/material/stepper/stepper.html

@@ -14,7 +14,6 @@
       <div class="mat-horizontal-stepper-header-container" role="tablist">
         @for (step of steps; track step) {
           <ng-container
-            role="tab"
             [ngTemplateOutlet]="stepTemplate"
             [ngTemplateOutletContext]="{step, i: $index}"/>
           @if (!$last) {
@@ -43,21 +42,31 @@
   @case ('vertical') {
     <div class="mat-vertical-stepper-wrapper" role="tree">
       @for (step of steps; track step) {
-        <div class="mat-step" role="treeitem">
-          <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 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">
+          <div role="group">
+            <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>
@@ -76,13 +85,15 @@
     (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' : 'heading'"
+    [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-level]="orientation === 'vertical'? 4 : 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"