primitives
primitives copied to clipboard
Option to disable tabindex="-1" on tabbable nodes for Hover Card
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
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
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.
@pawelblaszczyk5 is correct, we do this specifically because HoverCard
should only be used as an enhancement for links.