primitives icon indicating copy to clipboard operation
primitives copied to clipboard

Option to disable tabindex="-1" on tabbable nodes for Hover Card

Open Taaqif opened this issue 1 year ago • 2 comments

The HoverCard component seems to force all tabbable nodes to have tabindex="-1" this prevents a use case where we have a form inside a HoverCard.

It would be good to have an option to disable this if needed

Ref: https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/hover-card/src/HoverCard.tsx#L313C3-L318C6

Taaqif avatar Feb 09 '24 02:02 Taaqif

That'd be like ultra bad for accessibility 😃 You should probably use popover instead of hover card if you want to put a form inside

pawelblaszczyk5 avatar Feb 18 '24 20:02 pawelblaszczyk5

Good point regarding accessibility.

Accessibility aside, I can achieve the experience using a tooltip.. Not sure if it's intended but the tooltip does not block tabbable nodes, only the hover card seems to do this automatically.

Regardless, both scenarios are not ideal from an accessibility standpoint. As it's an internal tool, and the use case is very niche it would be beneficial to opt out of blocking tabbing within a hover card.

Taaqif avatar Feb 19 '24 00:02 Taaqif

@pawelblaszczyk5 is correct, we do this specifically because HoverCard should only be used as an enhancement for links.

benoitgrelard avatar Mar 05 '24 10:03 benoitgrelard