WCAG 2.1 AA — release blocker
HoverCard must satisfy these on every render before it ships.
Web (React DOM)
- Trigger uses
data-stateto reflect open/closed. - Content is rendered in a portal and positioned with Radix's collision-aware placement.
- Content has animated entrance/exit (
fade-in,zoom-in,slide-in). - Content is removed from the DOM when closed.
Keyboard
HoverCard is hover-only by design. It does not trap focus and does not open on keyboard focus. For keyboard-accessible previews, use Popover or Tooltip instead.
Touch devices
Hover events don't fire on touch. The content is effectively invisible on mobile. Only use HoverCard for progressive enhancement — never for critical information.
React Native
- HoverCard is a passthrough stub on native (renders trigger only, no card).
Reduced motion
Entrance/exit animations respect prefers-reduced-motion via Tailwind's motion-reduce utilities.
Audit checklist
- Card content is supplementary, not essential
- Touch users can still complete the task without seeing the card
- Content does not obscure other interactive elements
- Animations respect reduced-motion preference