prevent focus behind/outside dialogs (WCAG 4.1.2)

[cfm]

Description

Accessibility Lab recommendation:

• Keyboard
  The tab key must be constrained within the dialog. Users cannot tab out of the dialog. The focus goes to the dialog when it is activated, either to the dialog container, or to the dialog's heading, or to the first focusable element within the dialog, or to the default button in the dialog. There is some leeway in deciding where to send the focus. When the dialog is closed, the focus returns to the original trigger button, or to some other logical location if the button is no longer available or if the dialog was activated by something other than a button.

• Screen Readers
  Screen readers will announce "Dialog" or "Alert Dialog" (depending on the dialog type), then they will announce the name of the dialog (usually designated by an aria-labelledby reference to the first heading in the dialog, but aria-label can also work), then they will announce the aria-describedby value, if present. If the focus was sent to a button, the screen reader will also read the button text. If the focus is sent to the container, the screen reader may begin to read the entire text content of the dialog, or may pause to wait for the user to start to navigate through the dialog.

As summarized by Ire Aderinokun:

1. Markup the Dialog and Dialog Overlay Appropriately
2. On Dialog Open, Set Focus
3. On Dialog Close, Return Focus to the Last Focused Element
4. While Open, Prevent Mouse Clicks Outside the Dialog
5. While Open, Prevent Tabbing to Outside the Dialog
6. Allow the ESC Key to Close the Dialog

(1) is implemented by #6041 and #6165. We cannot implement (2)–(6) without JavaScript, which means that these requirements cannot be satisfied in the Source Interface.

References

• https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
• https://bitsofco.de/accessible-modal-dialog/
• https://www.useragentman.com/blog/2019/03/17/creating-accessible-html5-modal-dialogs-for-desktop-and-mobile/
• https://github.com/medialize/ally.js/blob/master/docs/tutorials/accessible-dialog.md
• https://github.com/KittyGiraudel/a11y-dialog