The Dialog 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 dialog container has a role="dialog"
All elements required to operate the dialog are descendants of the element that has role="dialog"
The dialog container element has aria-modal="true"
Provide a label for the 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 dialog
Focus management
Set focus to either the dialog’s main heading or the first interactive element within the dialog. There must be a visible focus indicator.
Maintain focus within the modal dialog until the dialog is closed.
Upon closing the 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 dialog.
If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
Shift + Tab:
Moves focus to the previous tabbable element inside the dialog.
If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
iapicca
commented
19 hours ago
Use case
The Dialog 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
role="dialog"role="dialog"aria-modal="true"aria-labelORaria-labelledby="[IDREF]"on the container element, with [IDREF] referencing the unique ID of the element that describes the purpose of the dialogFocus management
Keyboard navigation