Skip to content

Commit 46779b3

Browse files
authored
docs(cdk/stepper): change misleading documentation (#23377)
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.
1 parent dc9a905 commit 46779b3

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/cdk/stepper/stepper.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@ resetting it will call `reset` on the underlying form control which clears the v
5757
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
5858

5959
### 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

Comments
 (0)