ListChoice component

Accessibility

The ListChoice component has been designed with accessibility in mind, providing interactive list options that can function as buttons or selectable items.

Accessibility Props

The following props are available to improve the accessibility of your ListChoice component:

Name	Type	Description
role	`string`	Specifies the ARIA role of the component. If not provided, the role is set automatically.
tabIndex	`number`	Specifies the tab order of the component. Default is `0`, automatically set to `-1` when disabled.

Automatic Accessibility Features

The ListChoice component handles several important ARIA attributes automatically:

aria-disabled is automatically set to match the disabled prop value
aria-checked is automatically set to the value of the selected prop when selectable is true
Role is automatically determined in this order:
- If a role prop is explicitly provided, it will use that value
- Otherwise, if selectable is true, it uses “checkbox”
- Otherwise, if action is not provided, it uses “button”
- If none of these conditions are met, the role will be undefined

Enter or Space keys trigger the onClick action when the component is focused
Tab key moves focus to and from the component following the document’s tab order

Best practices

Provide a descriptive title that clearly explains the purpose of the list item
Use description to provide additional context when the action isn’t self-explanatory
When using icon, ensure it visually reinforces the action and is marked as decorative
When using a custom role, ensure it matches the component’s behavior (e.g., use “link” only if it navigates to another page)
When using the selectable prop, group related options together and ensure your implementation correctly updates the selected state

Examples

In this example, the ListChoice functions like a navigation link:

<ListChoice
  title="Flight details"
  description="View your booking information"
  icon={<Airplane ariaHidden />}
  role="link"
  onClick={() => navigate("/booking-details")}
/>

Screen reader announces: “Flight details, View your booking information, link”

Selectable Option in a Group

<Stack>
  <ListChoice
    title="Window seat"
    selectable
    selected={selectedSeat === "window"}
    onClick={() => setSelectedSeat("window")}
  />
  <ListChoice
    title="Aisle seat"
    selectable
    selected={selectedSeat === "aisle"}
    onClick={() => setSelectedSeat("aisle")}
  />
</Stack>

Screen reader announces: “Window seat, checkbox, checked” (when selected)

Disabled Option

<ListChoice
  title="Unavailable flight"
  description="This flight is fully booked"
  disabled
  icon={<CloseCircle ariaHidden />}
/>

Screen reader announces: “Unavailable flight, This flight is fully booked, button, disabled”

Option with Action Component

<ListChoice
  title="Priority boarding"
  description="Board the plane first"
  action={
    <Button size="small" type="secondary">
      Add €10
    </Button>
  }
/>

Screen reader announces: “Priority boarding, Board the plane first” for the ListChoice content and then “Add €10, button” when navigating to the action button.

ListChoice