What is the reasoning behind giving focus on hover?

[Joonaspraks]

Hi!

When we hover on for example these menu items here they gain focus. What's the source behind this behavior? Is it in some aria specs? Given how prevalent this pattern is (at least in react-aria) I hoped to find more resources backing it up, but currently this is the only post I've seen referencing it.

Thanks in advance!
Awesome project!

[Sidnioulz]

This is a problem I'm having at the moment with MenuItems. I understand setting data-focus and :focus state triggering, but mixing :hover and :focus-visible by programmatically focusing a hovered item makes it difficult to style hover states.

We end up having focus rings on hover. We do want very visible focus rings, but we also have a background colour for hover states, and the focus ring feels like overkill. We want the focus state to have higher visibility because it's harder for KB users to guess where focus will be transported to, whereas pointer device users always know where their pointer is.

[snowystinger]

Persisted keys don't have an special event listeners, they are there to keep certain items always in the dom in virtualized cases. Some examples are things like sections which are needed to label items that are in view, the currently focused element so that tabbing away and tabbing back will scroll that element into view automatically, and drop targets for drag and drop. All of these may have their own event listeners, but don't receive any special new ones.

Our components aren't virtualized by default though, so I theoretically we shouldn't need to look in this direction. Even in our Spectrum implementations we don't virtualize Menu.

The usual suspects would be something like:
top level hooks
useMenu->useSelectableList->useSelectableCollection
individual items
useMenuItem->useListBoxOption->useSelectableItem
others
KeyboardDelegates which are passed to the above hooks and influence the events they handle

I'm not sure how I missed it last time, but looks like we do the focusing on hover here

react-spectrum/packages/@react-aria/menu/src/useMenuItem.ts

Line 262 in 661ba8e

selectionManager.setFocusedKey(key);

[Sidnioulz]

Thank you for finding it!

I suppose I could patch this one by finding and removing the onHover listener from the hook's output, but that would be begging for trouble.

Would you accept a PR adding an UNSAFE_ prefixed option to the hook (and maybe the component)?

[snowystinger]

Will need to check with the team to see what our stance is on something like this. Thanks!

[snowystinger]

Hey, chatted with the team and remembered that on ListBox we have a prop exposed shouldFocusOnHover https://react-spectrum.adobe.com/react-aria/Select.html#listbox
Can you use this?

Do you really need it on Menu too? or is just Select enough?

[Sidnioulz]

It's on Menu that I need it, as I already have it on Select (my Select is not react-aria, it's homemade).