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.

[schurchleycci]

I appreciate your candour - totally get the hesitation. Thanks anyways!

[tleunen]

Interesting that this came up recently as I also have a usecase of a hover card. At first I thought of using the Tooltip as my base since I also would want to only have 1 single instance of the hover card at a time, but then I also need the over card to be interactive and so Tooltips then isn't a great choice anymore.

But as you pointed out with Popover, it makes focus management and accessibility challenging and interesting as you don't want to move the focus right away inside the hover card since a hover card is still kind of "secondary" in the flow of execution. But you definitely need a way to "jump" within the hover card if needed I suppose.

[snowystinger]

This is sounding a lot like a Coachmark for a Tour or something along those lines. You are welcome to check out some of the exploratory work we've started there. [WIP] feat: Coachmark native popover

Using the native popover in the example allowed us to place the element right next to the one of interest, we don't apply a containing focus scope to it, since it doesn't behave much like a popover. It's a strange inbetween thing. Placing it next to the element of interest also means that navigation with Tab naturally goes through the coachmark.