Repository navigation
AlertDialog widget requires roles, ARIA properties, and keyboard support (Accessibility) #157207
Description
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-labelORaria-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 foraria-describedbythat 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.
Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Nothing broken; request for a new capabilityA detailed proposal for a change to Flutterflutter/packages/flutter repository. See also f: labels.material_ui package in flutter/packagesWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)Triaged by Framework Accessibility team
Type
Projects
- Status
Activity
iapicca commentedon Oct 19, 2024
the topic seems to be addressed this document
as mentioned in this issue
darshankawar commentedon Oct 21, 2024
The linked document mentions AlertDialg widget. @jcollins-disney I will close this in favor of the linked issue. Please follow-up in it for further updates. If you disagree, write in comments and I'll reopen it.
darshankawar commentedon Oct 22, 2024
Reopening based on #107861 (comment)
3 remaining items
Adds dialog and alertdialog role (#162692)
github-actions commentedon Mar 3, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.Adds dialog and alertdialog role (#162692)