diff --git a/src/cdk/stepper/step-header.ts b/src/cdk/stepper/step-header.ts index b758390d5aa7..a636156756f2 100644 --- a/src/cdk/stepper/step-header.ts +++ b/src/cdk/stepper/step-header.ts @@ -11,9 +11,6 @@ import {FocusableOption} from '@angular/cdk/a11y'; @Directive({ selector: '[cdkStepHeader]', - host: { - 'role': 'tab', - }, }) export class CdkStepHeader implements FocusableOption { _elementRef = inject>(ElementRef); diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html index 1dd2a5e94cda..65dded03a1a0 100644 --- a/src/dev-app/stepper/stepper-demo.html +++ b/src/dev-app/stepper/stepper-demo.html @@ -1,3 +1,4 @@ +

Stepper Demo

Disable linear mode

@@ -23,7 +24,7 @@

-

Linear Stepper Demo using a single form

+

Linear Stepper Demo using a single form

Linear Stepper Demo using a single form
-

Linear Horizontal Stepper Demo using a different form for each step

+

Linear Horizontal Stepper Demo using a different form for each step

Linear Horizontal Stepper Demo using a different form for each step -

Vertical Stepper Demo

+

Vertical Stepper Demo

Make steps non-editable @@ -184,7 +185,7 @@

Vertical Stepper Demo

-

Horizontal Stepper Demo with Text Label

+

Horizontal Stepper Demo with Text Label

@@ -231,7 +232,7 @@

Horizontal Stepper Demo with Text Label

-

Horizontal Stepper Demo with Templated Label

+

Horizontal Stepper Demo with Templated Label

@for (step of steps; track step) { @@ -248,7 +249,7 @@

Horizontal Stepper Demo with Templated Label

}
-

Stepper with autosize textarea

+

Stepper with autosize textarea

diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts index 19efe841a043..11ff8a2a7374 100644 --- a/src/material/stepper/step-header.ts +++ b/src/material/stepper/step-header.ts @@ -35,7 +35,6 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat host: { 'class': 'mat-step-header', '[class]': '"mat-" + (color || "primary")', - 'role': 'tab', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html index a75e48522600..307ac4d39c58 100644 --- a/src/material/stepper/stepper.html +++ b/src/material/stepper/stepper.html @@ -11,7 +11,7 @@ @switch (orientation) { @case ('horizontal') {
-
+
@for (step of steps; track step) { - -
-
-
- +
+ @for (step of steps; track step) { +
+ +
+
+
+ +
-
- } + } +
} } @@ -74,13 +83,14 @@ (keydown)="_onKeydown($event)" [tabIndex]="_getFocusIndex() === i ? 0 : -1" [id]="_getStepLabelId(i)" - [attr.aria-posinset]="i + 1" - [attr.aria-setsize]="steps.length" - [attr.aria-controls]="_getStepContentId(i)" - [attr.aria-selected]="selectedIndex == i" + [attr.role]="orientation === 'horizontal'? 'tab' : undefined" + [attr.aria-posinset]="orientation === 'horizontal'? i + 1 : undefined" + [attr.aria-setsize]="orientation === 'horizontal'? steps.length : undefined" + [attr.aria-controls]="orientation === 'horizontal'? _getStepContentId(i) : undefined" + [attr.aria-selected]="orientation === 'horizontal'? selectedIndex == i : undefined" [attr.aria-label]="step.ariaLabel || null" [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null" - [attr.aria-disabled]="_stepIsNavigable(i, step) ? null : true" + [attr.aria-disabled]="orientation === 'horizontal'? _stepIsNavigable(i, step) ? null : true : undefined" [index]="i" [state]="_getIndicatorType(i, step.state)" [label]="step.stepLabel || step.label" diff --git a/src/material/stepper/stepper.md b/src/material/stepper/stepper.md index 69b1743e2269..b49bd58f12e7 100644 --- a/src/material/stepper/stepper.md +++ b/src/material/stepper/stepper.md @@ -228,12 +228,17 @@ export class MyApp {} ### Accessibility -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 +The stepper is treated as a tabbed view for accessibility purposes. + +For a horizontal stepper, based on its structure 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 is automatically set based on step selection change. +For a vertical stepper, based on its structure it is given `role="tree"` by default. The `.mat-step` of each vertical step that can be clicked to select the step +is given `role="treeitem"`, and the `.mat-step` gets an `aria-selected` and `aria-expanded` attribute of the `tree-item` 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`. Prefer vertical steppers when building for small screen sizes, as horizontal diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts index a320d3a2ad86..eb09d7d194fb 100644 --- a/src/material/stepper/stepper.ts +++ b/src/material/stepper/stepper.ts @@ -132,7 +132,6 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI '[class.mat-stepper-animating]': '_isAnimating()', '[style.--mat-stepper-animation-duration]': '_getAnimationDuration()', '[attr.aria-orientation]': 'orientation', - 'role': 'tablist', }, providers: [{provide: CdkStepper, useExisting: MatStepper}], encapsulation: ViewEncapsulation.None,