#7518·ariakit

Keep the active Ariakit UI combobox option visible in forced colors

Author: diegohazCreated Sep 13, 2026Updated Sep 13, 2026
Labelsfeaturea11yui

Problem

An active Ariakit UI combobox option loses its visible row highlight in forced colors. This was found while reviewing PR #7500 and independently reproduced on current main at 2a77466, in an isolated checkout, with Chromium and Firefox forced-colors emulation.

Reproduction

  1. Open /react/previews/ariakit-ui-combobox/ from pnpm dev-app.
  2. In the Default example, click Destination and press Arrow Down. Argentina becomes active.
  3. Enable forced colors with page.emulateMedia({ forcedColors: "active" }).
  4. Press Arrow Down again. Australia becomes active, but the row has no visible highlight.

The relevant public composition is:

typescript
<Combobox label="Destination" autoSelect autoComplete="both">
  <ComboboxList>
    <ComboboxItem value="Argentina" />
    <ComboboxItem value="Australia" />
  </ComboboxList>
</Combobox>

In normal colors, the active row has a blue background and white text. In forced colors, it has a Canvas background and black text; inactive rows are transparent over the same Canvas background. All rows have border-width: 0px, outline-style: none, and box-shadow: none. The active row's data-active-item and the input's aria-activedescendant remain correct. The Default example also retains inline completion, so the confirmed loss is the row highlight, not all visible value information.

The same loss affects the static Open suggestions example, where Cashews is active. The comboboxItem recipe uses data-active-item:ak-state-5; its inherited focus highlight also relies on a painted background.

Expected outcome

Keep a visible active-option indicator in forced colors while preserving normal-mode appearance, keyboard navigation, inline completion, and ARIA state. Verify the focused and unfocused active states in Chromium and Firefox, including moving between options. A system-color state treatment such as Highlight and HighlightText is one possible approach.

Scope

This is pre-existing on main. PR #7500 repairs frame boundaries and list markers; it does not change the combobox item or option state recipes. That PR can meet its stated outcome without expanding the frame fallback to active-option state styling. This issue can be fixed independently and does not need to wait for that PR to merge.

Evidence

The same active Argentina and Cashews rows in normal colors:

Active Argentina and Cashews rows have visible fills in normal colors

The same rows in forced colors:

Argentina and Cashews lose their row highlights in forced colors

The recording shows Destination receiving focus, Arrow Down activating Argentina, the switch to forced colors, and Arrow Down activating Australia:

https://github.com/user-attachments/assets/b1ed1f1d-0190-48ea-9239-6d488b56a1ee