Apply DOM focus on menu items

[adamalfredsson]

Description

I'd like to style menu items with :focus-visible in Chakra v3, though it seems like Ark only applies [data-highlighted] attribute on menu items.

It seems like the ARIA guidelines suggest menu items should be focusable, which I assume mean DOM focusable.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/jsjhdsvg?file=src%2FApp.tsx

Steps to Reproduce

1. Navigate the menu using keyboard
2. Focused elements should get a red outline
3. No outline on menu items, i.e. not focusable

Ark UI Version

latest

Framework

• React
• Solid
• Vue
• Svelte

Browser

No response

Additional Information

No response

[segunadebayo]

Keeping focus on the menu content is by design, as we use the aria-activedescendant pattern in the ARIA APG.

But your feedback is valid. We'll consider adding a data-focus-visible, which you can use to style the component for keyboard only interactions