Stepper component

Accessibility

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.

The following props provide additional information to screen readers.

Input field props:

Prop	Type	Description
`ariaLabelValue`	string	Specifies `aria-label` for the input field.
`ariaLabelledby`	string	Specifies `aria-labelledby` for the input field, referencing the ID of the element that labels the component, ensuring that screen readers announce the label correctly.
`ariaDescribedby`	string	Specifies `aria-describedby` for the input field, referencing the ID of the element that describes the component, providing additional context or instructions.

Buttons props:

Prop	Type	Description
`titleDecrement`	string	Specifies `aria-label` for the decrement icon button.
`titleIncrement`	string	Specifies `aria-label` for the increment icon button.
`descriptionDecrement`	string	Specifies `aria-describedby` for the decrement icon button, referencing the ID of the descriptive element.
`descriptionIncrement`	string	Specifies `aria-describedby` for the increment icon button, referencing the ID of the descriptive element.

Although these props are optional for the Stepper (StepperStateless) component itself, it is recommended to fill them in.

Example

<Stepper
  step={1}
  minValue={0}
  minValue={10}
  ariaLabelValue="Number of passengers"
  titleDecrement="Remove a passenger"
  titleIncrement="Add a passenger"
/>

The screen reader will announce the value title (Number of passengers) and buttons title (Add a passenger, Remove a passenger) once they are focused by the screen reader.

<Stack>
  <Stack>
    <Text id="passengers">Passengers</Text>
  </Stack>
  <Stepper
    step={1}
    minValue={0}
    maxValue={10}
    ariaLabelValue="Number of passengers"
    ariaLabelledby="passengers"
    titleDecrement="Remove a passenger"
    titleIncrement="Add a passenger"
  />
</Stack>

This example includes ariaLabelledby prop. In this case, ariaLabelledby prop is prioritized over ariaLabelValue, so the screen reader will announce the value title (Passengers) and buttons title (Add a passenger, Remove a passenger) once they are focused by the screen reader.

<Stack>
  <Stack>
    <Text id="adults-title">Adults</Text>
    <Text id="adults-description">Number of adults in your group</Text>
  </Stack>
  <Stepper
    step={1}
    minValue={0}
    maxValue={10}
    ariaLabelValue="Number of passengers"
    ariaLabelledby="adults-title"
    ariaDescribedby="adults-description"
    titleDecrement="Remove a passenger"
    titleIncrement="Add a passenger"
    descriptionIncrement="adults-title"
    descriptionDecrement="adults-title"
  />
</Stack>

This example includes ariaLabelledby, descriptionIncrement and descriptionDecrement props.

When decrement button is focused by screen reader, the screen reader will announce the button title (Remove a passenger) and complementary information (Adults).

For input field, the value of ariaLabelledby reference (Adults) is read first, then the complementary information (value of ariaDescribedby prop) is announced - Number of adults in your group. Value of ariaLabelValue is ignored.

The same logic as for decrement button is applicable for the increment button. When increment button is focused by screen reader, the screen reader will announce the button title (Add a passenger) and complementary information (Adults).