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..3b33a2f9d78e 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">
@@ -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">
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 79e948e73559..cbfa45797705 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),