fix(material/stepper): remove invalid aria attribute (#25644)

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

Fixes #25637.

(cherry picked from commit 94c773d)

Author: crisbeto

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.

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>
@@ -41,7 +41,7 @@
              (@verticalStepTransition.done)="_animationDone.next($event)"
              [id]="_getStepContentId(i)"
              [attr.aria-labelledby]="_getStepLabelId(i)"
-             [attr.aria-expanded]="selectedIndex === i">
+             [class.mat-vertical-stepper-content-inactive]="selectedIndex !== i">
           <div class="mat-vertical-content">
             <ng-container [ngTemplateOutlet]="step.content"></ng-container>
           </div>

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`.
 

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;
   }

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),