Accessible modals and interactive components

Manage focus and state

When a dialog opens, focus should enter it and return to its trigger when it closes. Components must expose their name, expanded or selected state, and a clear way to close.

Component checklist

Turn these checks into a repeatable task for design, content, and development.

• The modal has a title and accessible name.
• Escape closes the modal when appropriate.
• Focus is contained only while the modal is open.
• Accordions and menus communicate expanded or collapsed state.
• Dynamic notices are announced without interrupting the task.

Next step

Test reusable components in isolation and inside the real journey where they are used.