tweaks

Author: adolgachev

src/material/stepper/step-header.ts

@@ -36,7 +36,7 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat
     'class': 'mat-step-header',
     '[class.mat-step-header-empty-label]': '_hasEmptyLabel()',
     '[class]': '"mat-" + (color || "primary")',
-    'role': '',
+    'role': '', // ignore cdk role in favor of setting appropriately in html
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/material/stepper/stepper.html

@@ -11,7 +11,10 @@
 @switch (orientation) {
   @case ('horizontal') {
     <div class="mat-horizontal-stepper-wrapper">
-      <div class="mat-horizontal-stepper-header-container" role="tablist" aria-orientation="horizontal">
+      <div 
+        aria-orientation="horizontal"
+        class="mat-horizontal-stepper-header-container" 
+        role="tablist">
         @for (step of steps; track step) {
           <ng-container
             [ngTemplateOutlet]="stepTemplate"
@@ -40,7 +43,10 @@
   }
 
   @case ('vertical') {
-    <div class="mat-vertical-stepper-wrapper" role="tablist" aria-orientation="vertical">
+    <div 
+      aria-orientation="vertical"
+      class="mat-vertical-stepper-wrapper" 
+      role="tablist">
       @for (step of steps; track step) {
         <div 
           class="mat-step" 

src/material/stepper/stepper.spec.ts

@@ -114,11 +114,6 @@ describe('MatStepper', () => {
       expect(stepper.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 display the correct label', () => {
       let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
       expect(selectedLabel.textContent).toMatch('Step 1');
@@ -344,7 +339,7 @@ describe('MatStepper', () => {
 
     it('should set the correct aria-posinset and aria-setsize', () => {
       const headers = Array.from<HTMLElement>(
-        fixture.nativeElement.querySelectorAll('.mat-step-header'),
+        fixture.nativeElement.querySelectorAll('[role="tab"]'),
       );
 
       expect(headers.map(header => header.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']);
@@ -941,7 +936,7 @@ describe('MatStepper', () => {
       const fixture = createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
 
-      const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
+      const stepperEl = fixture.debugElement.query(By.css('[role="tablist"]'))!.nativeElement;
       expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical');
     });
 
@@ -1045,7 +1040,7 @@ describe('MatStepper', () => {
       const fixture = createComponent(SimpleMatHorizontalStepperApp);
       fixture.detectChanges();
 
-      const stepperEl = fixture.debugElement.query(By.css('mat-stepper'))!.nativeElement;
+      const stepperEl = fixture.debugElement.query(By.css('[role="tablist"]'))!.nativeElement;
       expect(stepperEl.getAttribute('aria-orientation')).toBe('horizontal');
     });