Modal

Accessible modals ensure all users can understand, navigate, and interact with dialog content effectively. When using Modal, follow these best practices.

Proper focus management is critical for modal accessibility.

Focus is trapped within the modal when it's open.

Users can navigate between interactive elements within the modal using Tab and Shift+Tab, but cannot tab outside the modal.

Focus returns to the element that opened the modal when it closes.

Focus automatically returns to the trigger element when the modal closes, allowing users to continue their workflow.

Focus moves to the first focusable element when the modal opens.

Focus moves to the confirm button or first focusable element (like an input with autoFocus) when the modal opens.

Modals support comprehensive keyboard navigation.

Users can interact with modals using standard keyboard patterns.

Navigate modal buttons efficiently.