Variants
MiniSelect
Label
Always make sure to use a label in all miniSelects, this is an accessibility requirement. The label is part of the component and the clickable area, make sure not to add an external label to the component.
Placeholder
Placeholders are not recommended for miniSelects.
Props
Clear Selection
Enabling this prop gives the user the option to clear the selection.
Only enable this prop when the select input is optional.
Accessibility
General
Search results should be announced to screen reader users
All inputs must have visible and programmatic labels.
Use of Color
Error and warning messages should use appropriate icons with text so as to not rely on color as the only means of indicating error.
Keyboard Navigation
Referenced from: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
Input
[Enter] to open Menu
Type to search (if applicable)
[↑/↓] to access menu last and first option.
Menu
[esc] to close menu and focus on input
[↑/↓] to move between menu options.
[Enter] to interact with menu item
Type to search
Clicking the trigger while the dropdown is open closes the dropdown and focuses the input