Use case

The AlertDialog widget requires roles, ARIA properties, and expected keyboard support to meet accessibility compliance requirements outlined in the Web Content Accessibility Guidelines (WCAG).

Proposal

WAI-ARIA Roles, States, and Properties

• The element that serves as the alert dialog container has a role="alertdialog"
• All elements required to operate the alert dialog are descendants of the element that has role="alertdialog"
• The alert dialog container element has aria-modal="true"
• Provide a label for the alert dialog by using aria-label OR aria-labelledby="[IDREF]" on the container element, with [IDREF] referencing the unique ID of the element that describes the purpose of the alert dialog
• The element with role="alertdialog" has a value set for aria-describedby that refers to the element containing the alert message.

Focus management

• Set focus to either the alert dialog’s main heading or the first interactive element within the dialog. There must be a visible focus indicator.
• Maintain focus within the alert dialog until the dialog is closed.
• Upon closing the alert dialog, send focus back to the control that prompted it, or to the next logical place on the page. There must be a visible focus indicator.

Keyboard navigation

• Tab:
  • Moves focus to the next tabbable element inside the alert dialog.
  • If focus is on the last tabbable element inside the alert dialog, moves focus to the first tabbable element inside the alert dialog.
• Shift + Tab:
  • Moves focus to the previous tabbable element inside the alert dialog.
  • If focus is on the first tabbable element inside the alert dialog, moves focus to the last tabbable element inside the alert dialog.
• Esc: Closes the dialog.