Skip to content

Wire up MenuAnchor, MenuBar, MenuItem-related widgets to aria roles#165596

Merged
auto-submit[bot] merged 17 commits intoflutter:masterfrom
QuncCccccc:menu_anchor_semantcs_role
Apr 24, 2025
Merged

Wire up MenuAnchor, MenuBar, MenuItem-related widgets to aria roles#165596
auto-submit[bot] merged 17 commits intoflutter:masterfrom
QuncCccccc:menu_anchor_semantcs_role

Conversation

@QuncCccccc
Copy link
Contributor

@QuncCccccc QuncCccccc commented Mar 20, 2025

This PR is to wire up MenuAnchor related widgets to SemanticsRole.

  • When use MenuAnchor and a menu is opened, the menu has SemanticsRole.menu.
  • MenuBar has SemanticsRole.menuBar
  • MenuItemButton has SemanticsRole.menuItem
  • SubmenuButton has SemanticsRole.menuItem with aria-haspopup attribute setup.
  • CheckboxMenuButton has SemanticsRole.menuItemCheckbox
  • RadioMenuButton has SemanticsRole.menuItemRadio

This PR also includes some changes related to OverlayPortal and RawMenuAnchor so the "button" and the "menu" that the button opens has a "parent-children" relationship. Previously, they are siblings relationship which will cause some navigation issue in a11y.

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
  • All existing and new tests are passing.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. engine flutter/engine related. See also e: labels. f: material design flutter/packages/flutter/material repository. a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) platform-web Web applications specifically and removed engine flutter/engine related. See also e: labels. a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) platform-web Web applications specifically labels Mar 20, 2025
@QuncCccccc
Copy link
Contributor Author

Once #164439 land, tests will be fixed.

@QuncCccccc QuncCccccc marked this pull request as ready for review March 25, 2025 19:47
@QuncCccccc QuncCccccc force-pushed the menu_anchor_semantcs_role branch from 9b73d1f to 74d845f Compare March 26, 2025 18:18
@github-actions github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) labels Mar 26, 2025
chrisbobbe added a commit to QuncCccccc/zulip-flutter that referenced this pull request Mar 27, 2025
Flutter PR
  flutter/flutter#165596
(wiring up MenuAnchor-related widgets to SemanticsRole) breaks this
test; fix it by adding the needed Semantics wrappers.

Co-authored-by: Chris Bobbe <[email protected]>
@QuncCccccc
Copy link
Contributor Author

Created zulip/zulip-flutter#1443 to fix customer testing.

chrisbobbe added a commit to QuncCccccc/zulip-flutter that referenced this pull request Mar 27, 2025
Flutter PR
  flutter/flutter#165596
(wiring up MenuAnchor-related widgets to SemanticsRole) breaks this
test; fix it by adding the needed Semantics wrappers.

Co-authored-by: Chris Bobbe <[email protected]>
@QuncCccccc QuncCccccc force-pushed the menu_anchor_semantcs_role branch from e2a509e to f8a9f49 Compare March 27, 2025 16:49
QuncCccccc added a commit to flutter/tests that referenced this pull request Mar 28, 2025
This is to fix the customer testing in
flutter/flutter#165596
by picking up zulip/zulip-flutter#1443

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] All existing and new tests are passing.
@QuncCccccc QuncCccccc force-pushed the menu_anchor_semantcs_role branch from f8a9f49 to ae30e5b Compare March 28, 2025 21:41
@QuncCccccc QuncCccccc requested a review from matanlurey as a code owner March 28, 2025 21:43
@@ -1 +1 @@
3566ea0e688123cecc2b605bda13732adc1e610a
8be72094d9b33dae8ff8a7085a3d922e7b3cad47
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intended to fix the customer testing.


static FlutterError? _semanticsMenu(SemanticsNode node) {
if (node.childrenCount < 1) {
return FlutterError('a menu cannot be empty');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a menu can be empty if we have filter behavior, so I removed this check.

@QuncCccccc QuncCccccc requested review from chunhtai and removed request for matanlurey March 28, 2025 21:46

@override
Widget buildAnchor(BuildContext context) {
final Widget? overlayPortal =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want the menu button and the menu have a parent-children relationship, but for OverlayPortal, its child and overlayChildBuilder are siblings relationship. To construct parent-children relationship, we use RawMenuAnchor.builder as the parent to wrap OverlayPortal which is constructed by RawMenuAnchor.child and RawMenuAnchor.overlayBuilder.

The disadvantage for this change is, if either widget.child or widget.builder is null, we are not able to have the parent-children relationship, but SubmenuButton is implemented by using both, so it should be okay.

@QuncCccccc
Copy link
Contributor Author

QuncCccccc commented Apr 8, 2025

Breaking change page: flutter/website#11881
G3fix: cl/742862470 but want to get approval from the internal team first. LGTMed.

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 25, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 26, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 26, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 27, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 27, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 28, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 29, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 29, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 29, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 30, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 30, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 1, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 1, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 1, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants