fix(material/stepper): updates vertical-stepper aria roles

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 {

src/cdk/stepper/stepper.md

@@ -59,10 +59,10 @@ resetting it will call `reset` on the underlying form control which clears the v
 
 ### Accessibility
 Apart from the built-in keyboard support, the stepper doesn't apply any treatment. When implementing
-your own component, it is recommended that the stepper is treated as a tabbed view for accessibility
-purposes by giving it a `role="tablist"`. The header of step that can be clicked to select the step
-should be given `role="tab"`, and the content that can be expanded upon selection should be given
-`role="tabpanel"`. Furthermore, the step header should have an `aria-selected` attribute that
-reflects its selected state.
+your own component, it is recommended that the stepper is treated as a grouped view for accessibility
+purposes by giving it a `role="group"`. The header of step that can be clicked to select the step
+should be given `role="button"`, and the content that can be expanded upon selection should be given
+`role="region"`. Furthermore, the step header should have an `aria-expanded` attribute that
+reflects its expanded state.
 
 You can refer to the [Angular Material stepper](https://github.com/angular/components/tree/main/src/material/stepper) as an example of an accessible implementation.

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,

src/material/stepper/stepper.html

@@ -10,7 +10,7 @@
 
 @switch (orientation) {
   @case ('horizontal') {
-    <div class="mat-horizontal-stepper-wrapper">
+    <div class="mat-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, 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-stepper-wrapper" role="group">
+      @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="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() === 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.aria-expanded]="orientation === 'vertical' ? selectedIndex == i : undefined"
+    [attr.aria-current]="selectedIndex == i ? 'step' : undefined"
+    [attr.aria-pressed]="selectedIndex == i"
     [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-owns]="_getStepContentId(i)"
+    [attr.mat-step-index]="i"
     [index]="i"
     [state]="_getIndicatorType(i, step.state)"
     [label]="step.stepLabel || step.label"
@@ -91,4 +95,4 @@
     [iconOverrides]="_iconOverrides"
     [disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
     [color]="step.color || color"/>
-</ng-template>
+</ng-template>

src/material/stepper/stepper.md

@@ -228,10 +228,10 @@ 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
-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
+The stepper is treated as a grouped view for general accessibility purposes, so it is given
+`role="group"` by default. The header of step that can be clicked to select the step
+is given `role="button"`, and the content that can be expanded upon selection is given
+`role="region"`. `aria-expanded` attribute of step header 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`.

src/material/stepper/stepper.spec.ts

@@ -130,28 +130,31 @@ describe('MatStepper', () => {
       expect(stepperComponent.selected instanceof MatStep).toBe(true);
     });
 
-    it('should set the "tablist" role on stepper', () => {
-      const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
-      expect(stepperEl.getAttribute('role')).toBe('tablist');
+    it('should set the "group" role on the stepper', () => {
+      const stepperWrapper = fixture.debugElement.query(By.css('.mat-stepper-wrapper'));
+      expect(stepperWrapper).toBeTruthy();
+
+      const stepperEl = stepperWrapper!.nativeElement;
+      expect(stepperEl.getAttribute('role')).toBe('group');
     });
 
     it('should display the correct label', () => {
       const stepperComponent = fixture.debugElement.query(
         By.directive(MatStepper),
       )!.componentInstance;
-      let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+      let selectedLabel = fixture.nativeElement.querySelector('[aria-expanded="true"]');
       expect(selectedLabel.textContent).toMatch('Step 1');
 
       stepperComponent.selectedIndex = 2;
       fixture.detectChanges();
 
-      selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+      selectedLabel = fixture.nativeElement.querySelector('[aria-expanded="true"]');
       expect(selectedLabel.textContent).toMatch('Step 3');
 
       fixture.componentInstance.inputLabel.set('New Label');
       fixture.detectChanges();
 
-      selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+      selectedLabel = fixture.nativeElement.querySelector('[aria-expanded="true"]');
       expect(selectedLabel.textContent).toMatch('New Label');
     });
 
@@ -379,15 +382,6 @@ describe('MatStepper', () => {
       animationDoneSubscription.unsubscribe();
     });
 
-    it('should set the correct aria-posinset and aria-setsize', () => {
-      const headers = Array.from<HTMLElement>(
-        fixture.nativeElement.querySelectorAll('.mat-step-header'),
-      );
-
-      expect(headers.map(header => header.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']);
-      expect(headers.every(header => header.getAttribute('aria-setsize') === '3')).toBe(true);
-    });
-
     it('should adjust the index when removing a step before the current one', () => {
       const stepperComponent: MatStepper = fixture.debugElement.query(
         By.css('mat-stepper'),

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,

src/material/stepper/testing/step-harness-filters.ts

@@ -17,7 +17,7 @@ export enum StepperOrientation {
 export interface StepHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose label matches the given value. */
   label?: string | RegExp;
-  /** Only find steps with the given selected state. */
+  /** Only find steps with the given pressed/expanded for Stepper state. */
   selected?: boolean;
   /** Only find completed steps. */
   completed?: boolean;

src/material/stepper/testing/step-harness.ts

@@ -61,10 +61,10 @@ export class MatStepHarness extends ContentContainerComponentHarness<string> {
     return (await this.host()).getAttribute('aria-labelledby');
   }
 
-  /** Whether the step is selected. */
+  /** Whether the step of Stepper is pressed/expanded. */
   async isSelected(): Promise<boolean> {
     const host = await this.host();
-    return (await host.getAttribute('aria-selected')) === 'true';
+    return (await host.getAttribute('aria-pressed')) === 'true';
   }
 
   /** Whether the step has been filled out. */
@@ -92,7 +92,7 @@ export class MatStepHarness extends ContentContainerComponentHarness<string> {
   }
 
   /**
-   * Selects the given step by clicking on the label. The step may not be selected
+   * Selects the given step by clicking on the label. The step may not be selected/expanded
    * if the stepper doesn't allow it (e.g. if there are validation errors).
    */
   async select(): Promise<void> {