skip to main content
Back to home

Accessible Modal

A keyboard-friendly modal focused on predictable focus management, clear dismissal patterns, and an accessible experience for every user.

View code
  • Uses FocusLock to keep keyboard focus contained within the modal while it is open.
  • Restores focus to the element that opened the modal after it is dismissed.
  • Prevents the background page from scrolling with RemoveScroll while preserving scroll inside the modal.
  • Supports multiple dismissal methods, including Escape, the close button, and clicking the backdrop.
  • Defines dialog semantics with `role="dialog"` and `aria-modal`, and associates the modal with its visible title.
  • Pairs icon-only controls with visually hidden text so their purpose remains clear to screen reader users.