Skip to content

Commit e65ba6f

Browse files
committed
docs(cdk/stepper): change misleading documentation
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 8424209 commit e65ba6f

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

src/cdk/stepper/stepper.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,12 @@ 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 come with any accessibility
61+
treatment. When implementing your own component, it is recommended that the stepper is treated as
62+
a tabbed view for accessibility purposes by giving it a `role="tablist"`. The header of step that
63+
can be clicked to select the step should be given `role="tab"`, and the content that can be expanded
64+
upon selection should be given `role="tabpanel"`. Furthermore, the step header should have an
65+
`aria-selected` attribute that reflects its selected state and the associated content element should
66+
have `aria-expanded`.
67+
68+
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)