DropdownMenuV2: remove flashing styles when moving focus with keyboard

[ciampo]

What?

Part of #50459

Removing "flash of unwanted styles" when navigating DropdownMenuV2 items using the keyboard.

Why?

While working on DropdownMenuV2, I noticed that menu items would sometimes flash briefly with the "active (hover)" styles, before applying the expected "focus-visible" styles — ie. it seems that the underlying ariakit implementation doesn't apply the data-focus-visible attribute soon enough, and therefore the focus-visible styles are applied with a delay, causing the hover (active) styles to apply for a few frames.

How?

I removed the flash by using the native :focus-visible CSS selector, which matches without any delays.

Testing Instructions

In Storybook, interact with the DropdownMenuV2 examples using keyboard, moving across the menu items.

On trunk, you could sometimes see the aforementioned flash — with the changes from this PR, the flash should never happen.

Screenshots or screencast

Before (trunk)	After (this PR)
ddmv2.flash.before.mp4	ddmv2.flash.after.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: diegohaz <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

cc @diegohaz — do you have any insights on why this is happening, and if there is a better fix?

[diegohaz]

cc @diegohaz — do you have any insights on why this is happening, and if there is a better fix?

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?

[ciampo]

Could you please open an issue on ariakit/ariakit?

Sure — here it is: ariakit/ariakit#4083

[tyxla]

Good one, @ciampo 👍 🚀

I'm assuming this will be useful regardless of a potential Ariakit fix. Should we add a note to check if we can clean it up in the future?