Stepper accessibility fixes #4571
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| title: Accessibility | ||
| redirect_from: | ||
| - /components/stepper/accessibility/ | ||
| --- | ||
|
|
||
| ## Accessibility | ||
|
|
||
| ### Stepper | ||
|
|
||
| The Stepper component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies. | ||
|
|
||
| Although the `ariaLabel` and `ariaLive` props are optional for the Stepper (StepperStateless) component itself, it is recommended to fill them in to ensure that the component can be perceived by assistive technologies. This ensures that the Stepper (StepperStateless) component is accessible. | ||
|
|
||
| Also, it is highly recommended to fill the `titleDecrement` and `titleIncrement` props in to provide a description of the decrement and increment buttons for screen readers. | ||
|
|
||
| #### Example | ||
|
|
||
| The content of children component is text, so it is read by screen reader. | ||
|
There was a problem hiding this comment. What is children component? I assume you are referring to There was a problem hiding this comment. leftover from another |
||
|
|
||
| ```jsx | ||
| <Stepper | ||
|
There was a problem hiding this comment. I would maybe add more elements to this example, as it probably wouldn't be placed in isolation but with some label? (This is based on the comment I put to the review with the image example, I just wanted to post it also here in case we add all these other props.) |
||
| step={1} | ||
| minValue={0} | ||
| minValue={10} | ||
| ariaLabel="Passengers number" | ||
| titleDecrement="Remove a passenger" | ||
| titleIncrement="Add a passenger" | ||
| ariaLive="assertive" | ||
| /> | ||
| ``` | ||
|
|
||
| The screen reader will announce stepper title (`Passengers number`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by screen reader. | ||
|
There was a problem hiding this comment. Is it stepper title? I thought it's title of the input? From "stepper title" I would assume it's the title for the whole component, including the buttons and displayed text. Will the screen reader first announce "Passengers number" and only then "Remove a passenger" and "Add a passenger"? It won't be "Remove a passenger", then "Passengers number" and then "Add a passenger"? |
||
| In case of changing the stepper value, the screen reader will announce the new value (`ariaLive` is set to `assertive` value). | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why didn't you add the same table as in the Seat Accessibility tab?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there's no specific reason why I added it as a section (as it's in some other components). but I agree we can have accessibility things only in accessibility tags.