Detailed overview of the accessibility features implemented in CoreUI React Autocomplete, ensuring compliance with WAI-ARIA guidelines.
On this page
Accessibility
The React Autocomplete component includes several accessibility features:
- ARIA attributes: Proper
role,aria-expanded,aria-haspopup, andaria-autocompleteattributes - Screen reader support: Descriptive labels and announcements for state changes
- Keyboard navigation: Full keyboard support with arrow keys, Enter, Escape, and Tab
- Focus management: Proper focus handling and visual focus indicators
- Semantic markup: Uses appropriate HTML elements and structure
Keyboard shortcuts
| Key | Action |
|---|---|
| Arrow Down | Navigate to the next option or open dropdown |
| Arrow Up | Navigate to the previous option |
| Home | Move the caret to the start of the text |
| End | Move the caret to the end of the text |
| Enter | Select the highlighted option, or the option whose label is the typed text; with the list closed, also submit the form |
| Escape | Close the dropdown; the input keeps focus and the highlighted option clears |
| Tab | Accept hint completion (when hints are enabled) |
| Backspace/Delete | Delete one character and clear a held selection |