MiHCM
overlay/@mihcm/ui·v0.21.0·stable

Popover

Click-triggered floating panel anchored to a trigger. Composable: Popover, PopoverTrigger, PopoverContent.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Keyboard

KeyAction
Enter / SpaceOpen the popover (on the trigger).
EscapeClose the popover and return focus to the trigger.
TabMove focus through interactive elements inside the popover.

Screen reader

  • PopoverTrigger sets aria-expanded and aria-haspopup="dialog".
  • PopoverContent renders role="dialog" so assistive tech announces it as a dialog.
  • When the popover opens, focus moves to the first focusable element inside.

Focus management

  • On open, focus moves into the popover content. On close, focus returns to the trigger.
  • Tab cycles through focusable children. Focus does not escape the popover while open.
  • Outside click dismisses via onOpenChange(false) and returns focus to the trigger.

React Native

  • Uses <Modal> with onRequestClose for Android back button.
  • Backdrop Pressable dismisses on tap.

Color is never the only signal

  • The popover background uses bg-popover with text-popover-foreground — 4.5:1 contrast verified.

Audit checklist

  • role="dialog" on the content
  • aria-expanded on the trigger
  • Focus moves into popover on open
  • Focus returns to trigger on close
  • Escape dismisses the popover
  • All interactive children keyboard-accessible
  • 4.5:1 contrast in light and dark