Skip to content

Commit

Permalink
docs: add accessibility docs for Stepper(StepperStateless) component
Browse files Browse the repository at this point in the history
  • Loading branch information
sarkaaa committed Jan 9, 2025
1 parent 03a2d7d commit aa7965f
Showing 1 changed file with 34 additions and 0 deletions.
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.

While 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.

```jsx
<Stepper
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.
In case of changing the stepper value, the screen reader will announce the new value (`ariaLive` is set to `assertive` value).

0 comments on commit aa7965f

Please sign in to comment.