From 6c9c1ef9c7d7641cf467092e64107013c034a54a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 15 Sep 2022 09:24:18 +0200
Subject: [PATCH] fix(material/stepper): remove invalid aria attribute

We have an `aria-expanded` attribute on the `tabpanel` which is invalid. See https://w3c.github.io/aria/#aria-expanded.

Fixes #25637.
---
 src/cdk/stepper/stepper.md           |  2 +-
 src/material/stepper/stepper.html    |  5 ++---
 src/material/stepper/stepper.md      |  4 ++--
 src/material/stepper/stepper.scss    |  2 +-
 src/material/stepper/stepper.spec.ts | 16 ----------------
 5 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/cdk/stepper/stepper.md b/src/cdk/stepper/stepper.md
index 38315ee86308..ad75189c7771 100644
--- a/src/cdk/stepper/stepper.md
+++ b/src/cdk/stepper/stepper.md
@@ -63,6 +63,6 @@ your own component, it is recommended that the stepper is treated as a tabbed vi
 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 and the associated content element should have `aria-expanded`.
+reflects its selected 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.
diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html
index 5d2aad9fba8a..c9aae37adaca 100644
--- a/src/material/stepper/stepper.html
+++ b/src/material/stepper/stepper.html
@@ -20,7 +20,7 @@
            (@horizontalStepTransition.done)="_animationDone.next($event)"
            [id]="_getStepContentId(i)"
            [attr.aria-labelledby]="_getStepLabelId(i)"
-           [attr.aria-expanded]="selectedIndex === i">
+           [class.mat-horizontal-stepper-content-inactive]="selectedIndex !== i">
         <ng-container [ngTemplateOutlet]="step.content"></ng-container>
       </div>
     </div>
@@ -40,8 +40,7 @@
               }"
              (@verticalStepTransition.done)="_animationDone.next($event)"
              [id]="_getStepContentId(i)"
-             [attr.aria-labelledby]="_getStepLabelId(i)"
-             [attr.aria-expanded]="selectedIndex === i">
+             [attr.aria-labelledby]="_getStepLabelId(i)">
           <div class="mat-vertical-content">
             <ng-container [ngTemplateOutlet]="step.content"></ng-container>
           </div>
diff --git a/src/material/stepper/stepper.md b/src/material/stepper/stepper.md
index 188229ac041f..69b1743e2269 100644
--- a/src/material/stepper/stepper.md
+++ b/src/material/stepper/stepper.md
@@ -231,8 +231,8 @@ export class MyApp {}
 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 and `aria-expanded` attribute of
-step content is automatically set based on step selection change.
+`role="tabpanel"`. `aria-selected` 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`.
 
diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss
index 83cdb0ef4121..b920468390a4 100644
--- a/src/material/stepper/stepper.scss
+++ b/src/material/stepper/stepper.scss
@@ -129,7 +129,7 @@
 .mat-horizontal-stepper-content {
   outline: 0;
 
-  &[aria-expanded='false'] {
+  &.mat-horizontal-stepper-content-inactive {
     height: 0;
     overflow: hidden;
   }
diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts
index dcf43b8a6ded..3f50fc20af6c 100644
--- a/src/material/stepper/stepper.spec.ts
+++ b/src/material/stepper/stepper.spec.ts
@@ -131,22 +131,6 @@ describe('MatStepper', () => {
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
-    it('should set aria-expanded of content correctly', () => {
-      const stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
-      const stepperComponent = fixture.debugElement.query(
-        By.directive(MatStepper),
-      )!.componentInstance;
-      const firstStepContentEl = stepContents[0].nativeElement;
-      expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true');
-
-      stepperComponent.selectedIndex = 1;
-      fixture.detectChanges();
-
-      expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false');
-      const secondStepContentEl = stepContents[1].nativeElement;
-      expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true');
-    });
-
     it('should display the correct label', () => {
       const stepperComponent = fixture.debugElement.query(
         By.directive(MatStepper),