Skip to content
Holm Digital logotyp

Dialogs & Modals

Accessible React Dialog component with focus trapping, ESC close, and WCAG 2.1.2 compliance. No keyboard traps.

The Dialog and Modal components provide accessible, focus-trapping overlays using the native HTML <dialog> element. They handle managing aria-modal, focus restoration, and backdrop interaction automatically.

Regulatory Context

No Keyboard Trap (2.1.2) is a critical "Blocker" issue. Users must always be able to escape a modal (usually ESC key). Ideally, focus should loop within the modal (Focus Trap). Failure to implement this correctly is one of the most severe accessibility violations possible.

Standard Dialog

A non-modal dialog (conceptually) or a standard modal. Our Dialog component uses the native <dialog> element.

Code Example

<Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Edit Profile" description="Make changes to your profile here." > <YourContent /> </Dialog>

Alert Modal

Destructive actions should use the variant="alert" prop to warn users.

Code Example

<Dialog variant="alert" title="Are you sure?" isOpen={isOpen} onClose={close} > <p>This action cannot be undone.</p> <Button variant="danger">Delete</Button> </Dialog>

Form in Modal

Modals trap focus correctly, making them safe for complex forms.

Edit Profile

Make changes to your profile here. Click save when you're done.

This is a standard dialog content area. You can put anything here.

Delete Account

Are you sure you want to delete your account? This action cannot be undone.

All your data will be permanently removed from our servers forever. This is a very long warning text to test wrapping.

Subscription Details

We will send the receipt here

Dialog Props

Props Reference

PropTypeDefaultDescription
isOpen *boolean-Controls visibility. Handles body scroll locking when true.
title *string-Linked to the dialog container via aria-labelledby. Essential for context.
description string-Linked via aria-describedby. Use for additional instructions.
variant 'default' | 'alert''default'Use 'alert' for destructive actions (e.g., delete confirmation). Changes title color.

Accessibility Features

  • Focus TrapKeyboard focus is constrained within the modal while open.
  • Escape to CloseNative support for closing via the ESC key.
  • Scroll LockingPrevents background scrolling when the modal is active.
  • Screen Reader SupportUses aria-labelledby and aria-describedby automatically.
Next →Introduction