This repository was archived by the owner on Feb 25, 2025. It is now read-only.
[web:a11y] fix group vs label relationship #36979
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
flutter-dashboard
bot
added
the
platform-web
mdebbar
approved these changes
Oct 24, 2022
nbayati
approved these changes
Oct 27, 2022
yjbanov
added
the
autosubmit
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/flutter
that referenced
this pull request
Oct 28, 2022
schwa423
pushed a commit
to schwa423/engine
that referenced
this pull request
Nov 16, 2022
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This fixes the following issues with ARIA labels, groups, and heading:
<flt-semantics-value>withrole="text". The text role works better in Safari, and the extra element causes the AT to read the same label multiple times. (fixes [web]: Semantics differences between iOS/Android and Web flutter#91914)role="group"for nodes with children. This communicates the label to the user as a group of elements, enabling enter/exit group gestures.role="heading"for nodes with children, because that prevents the AT from reaching child nodes.This change does not fix the issue with Chrome reading "group" or "empty group" on text labels. I could not find a way to simultaneously control the positioning/sizing of an element and have it be treated as text. Using actual text in HTML causes the browser to size the focus ring to just the text itself rather than the element. Adding
aria-labelfixes the sizing but "group"/"empty group" reappear.