Demonstration
The button below will open a modal dialog. The dialog manages focus, traps focus within itself while open, and can be closed via the close button, the Escape key, or by pressing a button in the footer.
Accessibility Features
- Focus is trapped within the modal when open.
- Focus returns to the triggering button when closed.
- The modal has a descriptive title (h2).
- The close button in the top-right has an accessible label.
- All interactive elements have visible focus indicators with sufficient contrast.
- The modal is announced by screen readers when it opens.
- Supports Forced Colors Mode and reflows for narrow viewports (320px).