import { Meta } from '@storybook/blocks';
import { MoneyInput } from '..';

<Meta title="Forms/SelectInput/Accessibility" />

# Accessibility

## Labelling

In order for the `<SelectInput />` to be considered accessible, it must be provided with a matching label, preferably via the <a href="/?path=/docs/field--docs">Field</a> component.

Additionally, the `listbox` container that holds all the options is also expected to have its own label, which the component will attempt to resolve by looking in the following places:

1. `UNSAFE_triggerButtonProps['aria-label']` prop, which reuses the custom label provided for the trigger button.
   <br /> A good example of this strategy is the `<MoneyInput />` component, internally setting
   `"Select currency"` as a trigger button label, which then gets automatically applied to the
   `listbox`.
2. `UNSAFE_triggerButtonProps['aria-labelledby']` prop, which holds the id of the element labelling the trigger button.
3. Correctly paired input `<label />` text, ideally via the `Field` component.

> Using option group heading is possible but complicated as we can have multiple groups, and those are not necessarily rendered consistently if search or virtualisation are enabled.
