DropdownMenuV2: fix active and focus-visible item glitches

[ciampo]

What?

Alternative fix to #64873

Alternative solution to remove "flash of unwanted styles" when navigating DropdownMenuV2 items using the keyboard.

Why?

Because flashing styles don't provide a great UX.

How?

Implement workaround suggested in ariakit/ariakit#4083 (comment)

Testing Instructions

Same as in #64873

[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 <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>

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

[ciampo]

This is just a different approach. IMO:

• Pros
  • Our styles continue to rely on the data-focus-visible selector and any logic that it represents
  • The workaround was proposed by the library author (@diegohaz )
• Cons
  • The current fix is CSS based (potentially more performant) and only a couple of lines of code

[diegohaz]

• The current fix is CSS based (potentially more performant) and only a couple of lines of code

That's fine since WordPress does that only for composite items receiving actual DOM focus (virtualFocus is false). Otherwise, the native :focus-visible is not applied to composite items managed by aria-activedescendant.

[ciampo]

Just to make sure I understand, you suggest using this workaround instead of using CSS :focus-visible, right?

[diegohaz]

No, I think WordPress can keep the current solution until it needs to work with composite items with virtual focus.

If there are plans to introduce these components soon and they will also have distinct styles for active-item vs. focus-visible, then yes, the workaround in this PR is better.

[ciampo]

Got it!

Since we do have one instance using virtual focus, and we're planning on exposing that prop for consumers of the component, then I guess we should switch to the solution proposed in this PR

[tyxla]

Fix makes sense and tests well 👍

I assume your plan is to remove once the fix lands (it's already been approved) and released and we update to that release?