From bc978445bb52f4d0cc21bc714555cb9705af1f96 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 21 Sep 2022 13:11:35 +0200 Subject: [PATCH] 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 94c773dbc926e689a5087e3b12047d28fb162375) --- src/cdk/stepper/stepper.md | 2 +- src/material/stepper/stepper.html | 4 ++-- src/material/stepper/stepper.md | 4 ++-- src/material/stepper/stepper.scss | 2 +- src/material/stepper/stepper.spec.ts | 16 ---------------- 5 files changed, 6 insertions(+), 22 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..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),