fix(material/stepper): indicate to assistive technology when step is …

…disabled (#23090)

Currently the stepper has no non-visual indication of whether a step is disabled. This is confusing, because selecting it won't do anything.

Fixes #23088.

(cherry picked from commit 653f412)

src/material/stepper/stepper.html

@@ -61,11 +61,12 @@
     [attr.aria-selected]="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"
     [index]="i"
     [state]="_getIndicatorType(i, step.state)"
     [label]="step.stepLabel || step.label"
     [selected]="selectedIndex === i"
-    [active]="step.completed || selectedIndex === i || !linear"
+    [active]="_stepIsNavigable(i, step)"
     [optional]="step.optional"
     [errorMessage]="step.errorMessage"
     [iconOverrides]="_iconOverrides"

src/material/stepper/stepper.spec.ts

@@ -789,6 +789,15 @@ describe('MatStepper', () => {
       expect(testComponent.oneGroup.valid).toBe(false);
       expect(stepperComponent.selectedIndex).toBe(1);
     });
+
+    it('should set aria-disabled if the user is not able to navigate to a step', () => {
+      const stepHeaders = Array.from<HTMLElement>(
+        fixture.nativeElement.querySelectorAll('.mat-vertical-stepper-header'));
+
+      expect(stepHeaders.map(step => step.getAttribute('aria-disabled')))
+        .toEqual([null, 'true', 'true', 'true']);
+    });
+
   });
 
   describe('linear stepper with a pre-defined selectedIndex', () => {

src/material/stepper/stepper.ts

@@ -239,4 +239,8 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
       }
     });
   }
+
+  _stepIsNavigable(index: number, step: MatStep): boolean {
+    return step.completed || this.selectedIndex === index || !this.linear;
+  }
 }

tools/public_api_guard/material/stepper.d.ts

@@ -74,6 +74,7 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
     labelPosition: 'bottom' | 'end';
     readonly steps: QueryList<MatStep>;
     constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _document: any);
+    _stepIsNavigable(index: number, step: MatStep): boolean;
     ngAfterContentInit(): void;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": "selectedIndex"; "disableRipple": "disableRipple"; "color": "color"; "labelPosition": "labelPosition"; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null, null]>;