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

Dialog

Accessible modal dialog built on native <dialog>. Composable: Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Keyboard

KeyAction
EscapeClose the dialog via onCancel handler.
TabMove focus to the next focusable element inside the dialog.
Shift + TabMove focus to the previous focusable element inside the dialog.

Screen reader

  • Uses native <dialog> element with showModal() for automatic focus trapping.
  • DialogTitle is announced when the dialog opens — always include one.
  • DialogClose has aria-label="Close".
  • Backdrop click dismisses via onOpenChange(false).

Focus management

  • On open, focus moves to the first focusable element inside the dialog (or the dialog itself if none).
  • Focus is trapped — Tab / Shift+Tab cycle within the dialog boundaries.
  • On close, focus returns to the trigger element.

React Native

  • Uses <Modal> with onRequestClose for Android back button.
  • Backdrop Pressable dismisses the dialog.
  • DialogTitle has accessibilityRole="header".

Audit checklist

  • Focus trapped inside the dialog while open
  • Focus returns to trigger on close
  • Escape dismisses the dialog
  • DialogTitle present and announced
  • Close mechanism visible (DialogClose or cancel button)
  • 4.5:1 contrast on all text in light and dark