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

Sheet

Slide-out panel from a screen edge. Composable: Sheet, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose. Dismisses on backdrop click and Escape.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Keyboard

KeyAction
EscapeClose the sheet.
TabMove focus to the next focusable element inside the sheet.
Shift + TabMove focus to the previous focusable element inside the sheet.

Screen reader

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

Focus management

  • On open, focus moves to the first focusable element inside the sheet.
  • Focus is trapped — Tab / Shift+Tab cycle within the sheet boundaries.
  • On close, focus returns to the trigger element.

React Native

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

Audit checklist

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