[autocomplete] Command Palette accessibility: Focus indicator relies on colour alone
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
As keyboard focus moves through options in the Command Palette dialog, the only visual indication of which item is focused is a minor colour change to some of the text and to the background colour. As a keyboard user I find this very hard to see.
According to [WCAG 2.2 Success Criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) if colour alone is used to indicate meaning visually, the change must have a contrast difference to the previous state of at least 3:1 ratio. The text colour changes from #7F8287 to #3A3C44, which is a contrast change of only 2.9:1.
(I have been unable to determine the contrast of the background colour change as it is too subtle to be visible on my screen)
## Expected behavior
Keyboard focus should be clearly visible/obvious. In other autocomplete variants, the background of the focused item changes to a very dark colour, and the text becomes light, making it easy to see where I am focused with the keyboard. Alternatively, a visible focus outline would serve the same purpose.
## Reproducible example
Steps to reproduce:
1. Navigate to the [Autocomplete command palette demo](https://base-ui.com/react/components/autocomplete#command-palette)
2. Using a keyboard, open the command palette
3. Use Arrow keys to move focus between the suggested options
4. Note the subtle colour change to some of the text (and background if you can see it)
5. Use a tool such as the [Color Contrast Analyser (CCA)](https://vispero.com/color-contrast-checker/) to colour pick colours. Note the contrast differences between focused and unfocused options.
## Base UI version
v1.2.0
## Which browser are you using?
Chrome
## Which OS are you using?
Mac OS
## Which assistive tech are you using (if applicable)?
Keyboard
## Additional context
Keyboard focus should be clearly visible in all component demos
Contributor guide
Assessment
This issue has not been assessed yet.