refactor(material/stepper): cleans up unnecessary roles/attributes

Updates previous fix to Angular Components stepper to remove
unnecessary roles and attributes. Also updates Stepper docs with
latest vertical stepper aria attribute and role changes. Updates
stepper-demo heading level elements for accessibility purposes.

Author: essjay05

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

@@ -85,12 +85,11 @@
     (keydown)="_onKeydown($event)"
     [tabIndex]="_getFocusIndex() === i ? 0 : -1"
     [id]="_getStepLabelId(i)"
-    [attr.role]="orientation === 'horizontal'? 'tab' : 'heading'"
+    [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-level]="orientation === 'vertical'? 4 : undefined"
     [attr.aria-label]="step.ariaLabel || null"
     [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
     [attr.aria-disabled]="orientation === 'horizontal'? _stepIsNavigable(i, step) ? null : true : undefined"

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