Component Library

Keyboard Trap

Issue Description

Focus cannot be moved away from a modal using only a keyboard interface and requires more than arrow or tab keys or other standard exit methods.

Recommendation

  • Map the Escape key to the function to close the modal window.
  • Map the Enter key to the submit function of the modal window.
  • Identify the title of the modal dialog through the aria-labelledby attribute.
  • Include an <h1> at the beginning of the modal.
  • Include offscreen instructions, using aria-describedby, that describe the modal dialog and how to interact with it.

https://web.dev/focus-traps/