You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The "Accessibility' section of the stepper docs was talking about the stepper having built-in accessibility treatment, even though it doesn't have any, because we don't have control over the component's markup.
These changes reword the section to make it more accurate.
Fixes#23044.
Copy file name to clipboardExpand all lines: src/cdk/stepper/stepper.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -57,11 +57,11 @@ resetting it will call `reset` on the underlying form control which clears the v
57
57
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
58
58
59
59
### Accessibility
60
-
The CDK stepper is treated as a tabbed view for accessibility purposes, so it is given
61
-
`role="tablist"` by default. The header of step that can be clicked to select the step
62
-
is given `role="tab"`, and the content that can be expanded upon selection is given
63
-
`role="tabpanel"`. `aria-selected` attribute of step header and `aria-expanded` attribute of
64
-
step content is automatically set based on step selection change.
65
-
66
-
The stepper and each step should be given a meaningful label via `aria-label` or `aria-labelledby`.
67
-
60
+
Apart from the built-in keyboard support, the stepper doesn't apply any treatment. When implementing
61
+
your own component, it is recommended that the stepper is treated as a tabbed view for accessibility
62
+
purposes by giving it a `role="tablist"`. The header of step that can be clicked to select the step
63
+
should be given `role="tab"`, and the content that can be expanded upon selection should be given
64
+
`role="tabpanel"`. Furthermore, the step header should have an `aria-selected` attribute that
65
+
reflects its selected state and the associated content element should have `aria-expanded`.
66
+
67
+
You can refer to the [Angular Material stepper](https://github.com/angular/components/tree/master/src/material/stepper) as an example of an accessible implementation.
0 commit comments