tweak

Author: adolgachev

src/material/stepper/stepper.html

@@ -43,18 +43,9 @@
   }
 
   @case ('vertical') {
-    <div 
-      aria-orientation="vertical"
-      class="mat-vertical-stepper-wrapper" 
-      role="tablist">
+    <div class="mat-vertical-stepper-wrapper">
       @for (step of steps; track step) {
-        <div 
-          class="mat-step" 
-          role="tab"    
-          [attr.aria-posinset]="step.index() + 1"
-          [attr.aria-setsize]="steps.length"
-          [attr.aria-selected]="step.isSelected()"
-        >
+        <div class="mat-step">
           <ng-container
             [ngTemplateOutlet]="stepTemplate"
             [ngTemplateOutletContext]="{step}"/>
@@ -91,6 +82,7 @@
     [attr.aria-posinset]="orientation === 'horizontal' ? step.index() + 1 : null"
     [attr.aria-setsize]="orientation === 'horizontal' ? steps.length : null"
     [attr.aria-selected]="orientation === 'horizontal' ? step.isSelected() : null"
+    [attr.aria-current]="orientation === 'vertical' && step.isSelected() ? 'step' : null"
     [attr.aria-controls]="_getStepContentId(step.index())"
     [attr.aria-label]="step.ariaLabel || null"
     [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"

src/material/stepper/stepper.spec.ts

@@ -115,19 +115,19 @@ describe('MatStepper', () => {
     });
 
     it('should display the correct label', () => {
-      let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+      let selectedLabel = fixture.nativeElement.querySelector('[aria-current="step"]');
       expect(selectedLabel.textContent).toMatch('Step 1');
 
       fixture.componentInstance.stepper.selectedIndex = 2;
       fixture.detectChanges();
 
-      selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+      selectedLabel = fixture.nativeElement.querySelector('[aria-current="step"]');
       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-current="step"]');
       expect(selectedLabel.textContent).toMatch('New Label');
     });
 
@@ -337,15 +337,6 @@ describe('MatStepper', () => {
       animationDoneSubscription.unsubscribe();
     });
 
-    it('should set the correct aria-posinset and aria-setsize', () => {
-      const headers = Array.from<HTMLElement>(
-        fixture.nativeElement.querySelectorAll('[role="tab"]'),
-      );
-
-      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 stepper = fixture.componentInstance.stepper;
 
@@ -932,14 +923,6 @@ describe('MatStepper', () => {
   });
 
   describe('vertical stepper', () => {
-    it('should set the aria-orientation to "vertical"', () => {
-      const fixture = createComponent(SimpleMatVerticalStepperApp);
-      fixture.detectChanges();
-
-      const stepperEl = fixture.debugElement.query(By.css('[role="tablist"]'))!.nativeElement;
-      expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical');
-    });
-
     it('should support using the left/right arrows to move focus', () => {
       const fixture = createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
@@ -1061,6 +1044,18 @@ describe('MatStepper', () => {
       assertArrowKeyInteractionInRtl(fixture, stepHeaders);
     });
 
+    it('should set the correct aria-posinset and aria-setsize', () => {
+      const fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      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 maintain the correct navigation order when a step is added later on', () => {
       const fixture = createComponent(HorizontalStepperWithDelayedStep);
       fixture.detectChanges();