Current behavior

Originally reported in WordPress/gutenberg#64873

In the PR linked above, we use the data-active-item to apply active (and hover) styles to a Ariakit.Menu, and the data-focus-visible to apply focus visible styles.

When using the keyboard to navigate the menu items, it can happen that the data-active-item styles are applied for a few frames before the data-focus-visible styles are (correctly) applied.

@diegohaz said:

Yes, data-focus-visible is applied using requestAnimationFrame, but the delay is likely caused by React batching state updates rather than rAF. Could you please open an issue on https://github.com/ariakit/ariakit?

Steps to reproduce the bug

• Open https://stackblitz.com/edit/cbdw6b?file=menu%2Fstyle.css,menu%2Findex.tsx&theme=dark
• Cycle through the active items using keyboard. Notive how, sometimes, the focused item flickers red before turning blue

Expected behavior

The data-focus-visible attribute should be applied sooner, without delays. In the demo shared above, the item should not flicker red.

Workaround

Using the native CSS :focus-visible selector in addition to [data-focus-visible] (as done in WordPress/gutenberg#64873) — although this not ideal, as also explained in the ariakit docs

Or #4083 (comment)

Possible solutions

Maybe we should wrap the focus visible update in flushSync here:

and here:

See #4083 (comment)