Repository navigation
Dialog widget requires roles, ARIA properties, and keyboard support (Accessibility) #157204
Description
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
- 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-labelORaria-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.
- 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
This is correct. The linked document mentions Dialog 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)
4 remaining items
chunhtai commentedon Feb 3, 2025
It looks like we have focus management and keyboard navigation working now, just need to make sure we have dialog role
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)