Radix-like Hover Card using Popover + modifications to useSafelyMouseToSubmenu?

[schurchleycci]

Radix has a HoverCard component that would be nice to be able to implement with react aria components. I understand that hover interactions should be avoided where possible, since they're not accessible to all input types, but there are some scenarios where a HoverCard-like component would be nice to have - e.g. a "preview" of the content that a user would see if they clicked a link. A tooltip could be used for this, but then interactive content couldn't be used. Flyout menus could also possibly be implemented similarly, since they typically open on hover and expose interactive content like links.

At first glance, it appears you could do this with the controlled open state of a Popover, setting it when the trigger element is hovered or focused. To do it well, however, it'd be nice to be able to safely move the mouse from the popover trigger to the popover - which feels very much like what the useSafelyMouseToSubmenu hook does. A couple questions:

• beyond the hover/focus-only nature of it, are there any accessibility concerns? I do have a sneaking suspicion managing focus correctly might be tricky
• would the team be open to a contribution that generalizes useSafelyMouseToSubmenu to something like useSafelyMouseToOverlay? The implementation looks pretty generic already since it's based on the menu and submenu refs, so generalizing it might not be much more than renaming menu to something like trigger and submenu to something like overlay. But I may be missing something!

[snowystinger]

Thanks for the discussion. Linking a previous relevant discussion #5126

We are hesitant to expose something like this because of the accessibility concerns and how many users are locked out from this functionality. You've also pointed out some interesting issues with focus management. Overlays are focus traps, so if you opened one of these on focus, it might be hard to close it for a keyboard user.