mui / mui/base-ui

[autocomplete] Command Palette accessibility: Focus indicator relies on colour alone

Open
#4,182 4 comments 0 reactions 1 assignee Claimed by @aarongarciah View on GitHub
accessibility component: autocomplete docs
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.