Skip to content
Permalink
Browse files
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)
  • Loading branch information
crisbeto committed Sep 21, 2022
1 parent 3db4fe6 commit bc978445bb52f4d0cc21bc714555cb9705af1f96
Show file tree
Hide file tree
Showing 5 changed files with 6 additions and 22 deletions.
@@ -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.
@@ -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>
@@ -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`.

@@ -129,7 +129,7 @@
.mat-horizontal-stepper-content {
outline: 0;

&[aria-expanded='false'] {
&.mat-horizontal-stepper-content-inactive {
height: 0;
overflow: hidden;
}
@@ -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),

0 comments on commit bc97844

Please sign in to comment.