Skip to main content

Modal Dialog Component Example

This page demonstrates an accessible modal dialog component that follows WCAG 2.2 Level AA guidelines. Click the button below to open the modal dialog.

Example Modal Dialog

This is an example modal dialog. It demonstrates proper focus management, keyboard navigation, and accessible labeling.

When opened, focus is moved to the close button in the header. When closed, focus returns to the trigger button. The Escape key closes the dialog.

Focus is trapped within the dialog while it is open, preventing keyboard users from accidentally navigating to content behind the modal overlay.