From 36b38e0a448de498e04d0c8d573b6e35056b5b54 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Thu, 29 May 2025 17:46:58 +0000
Subject: [PATCH] fix(material/stepper): generalize stepper aria roles

Updates Angular Components Material Stepper to use general
aria roles like group, region, button as opposed to tab, tablist,
tabpanel as this doesn't serve the vertical stepper correctly.

Fixes b/361783174
---
 src/cdk/stepper/step-header.ts      |  2 +-
 src/material/stepper/step-header.ts |  2 +-
 src/material/stepper/stepper.html   | 52 ++++++++++++++++-------------
 src/material/stepper/stepper.ts     |  1 -
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/cdk/stepper/step-header.ts b/src/cdk/stepper/step-header.ts
index f0709e3f9878..26ebcbbcb0f7 100644
--- a/src/cdk/stepper/step-header.ts
+++ b/src/cdk/stepper/step-header.ts
@@ -12,7 +12,7 @@ import {FocusableOption} from '../a11y';
 @Directive({
   selector: '[cdkStepHeader]',
   host: {
-    'role': 'tab',
+    'role': 'button',
   },
 })
 export class CdkStepHeader implements FocusableOption {
diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts
index 998e5d3610ad..705c90a7fdfd 100644
--- a/src/material/stepper/step-header.ts
+++ b/src/material/stepper/step-header.ts
@@ -35,7 +35,7 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat
   host: {
     'class': 'mat-step-header',
     '[class]': '"mat-" + (color || "primary")',
-    'role': 'tab',
+    'role': 'button',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html
index 0f75e58c012b..d90a5304f0a8 100644
--- a/src/material/stepper/stepper.html
+++ b/src/material/stepper/stepper.html
@@ -10,7 +10,7 @@
 
 @switch (orientation) {
   @case ('horizontal') {
-    <div class="mat-horizontal-stepper-wrapper">
+    <div class="mat-horizontal-stepper-wrapper" role="group">
       <div class="mat-horizontal-stepper-header-container">
         @for (step of steps; track step) {
           <ng-container
@@ -27,7 +27,7 @@
           <div
             #animatedContainer
             class="mat-horizontal-stepper-content"
-            role="tabpanel"
+            role="region"
             [id]="_getStepContentId($index)"
             [attr.aria-labelledby]="_getStepLabelId($index)"
             [class]="'mat-horizontal-stepper-content-' + _getAnimationDirection($index)"
@@ -40,28 +40,30 @@
   }
 
   @case ('vertical') {
-    @for (step of steps; track step) {
-      <div class="mat-step">
-        <ng-container
-          [ngTemplateOutlet]="stepTemplate"
-          [ngTemplateOutletContext]="{step}"/>
-        <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="group">
+      @for (step of steps; track step) {
+        <div class="mat-step">
+          <ng-container
+            [ngTemplateOutlet]="stepTemplate"
+            [ngTemplateOutletContext]="{step}"/>
+          <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="region"
+              [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 +76,15 @@
     (keydown)="_onKeydown($event)"
     [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1"
     [id]="_getStepLabelId(step.index())"
-    [attr.aria-posinset]="step.index() + 1"
-    [attr.aria-setsize]="steps.length"
     [attr.aria-controls]="_getStepContentId(step.index())"
-    [attr.aria-selected]="step.isSelected()"
+    [attr.aria-expanded]="orientation === 'vertical' ? step.isSelected() : undefined"
+    [attr.aria-current]="step.isSelected() ? 'step' : undefined"
+    [attr.aria-pressed]="step.isSelected()"
     [attr.aria-label]="step.ariaLabel || null"
     [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
     [attr.aria-disabled]="step.isNavigable() ? null : true"
+    [attr.aria-owns]="_getStepContentId(step.index())"
+    [attr.mat-step-index]="step.index()"
     [index]="step.index()"
     [state]="step.indicatorType()"
     [label]="step.stepLabel || step.label"
diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts
index 6d1399dae0df..69874b427378 100644
--- a/src/material/stepper/stepper.ts
+++ b/src/material/stepper/stepper.ts
@@ -131,7 +131,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,