Skip to content

Migration guide for semantics menu roles #11881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 13, 2025
Merged

Migration guide for semantics menu roles #11881

merged 2 commits into from
Apr 13, 2025

Conversation

QuncCccccc
Copy link
Contributor

This PR is to add a breaking change page for flutter/flutter#165596.

Presubmit checklist

  • This PR is marked as draft with an explanation if not meant to land until a future stable release.
  • This PR doesn’t contain automatically generated corrections (Grammarly or similar).
  • This PR follows the Google Developer Documentation Style Guidelines — for example, it doesn’t use i.e. or e.g., and it avoids I and we (first person).
  • This PR uses semantic line breaks of 80 characters or fewer.

@flutter-website-bot
Copy link
Collaborator

flutter-website-bot commented Apr 8, 2025

Visit the preview URL for this PR (updated for commit 546a922):

https://flutter-docs-prod--pr11881-semantics-menu-roles-ydcftdn7.web.app

Copy link
Contributor

@sfshaza2 sfshaza2 left a comment

Choose a reason for hiding this comment

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

@QuncCccccc, thanks for this PR! A few edits.


## Summary

`MenuAnchor`, `MenuBar`, `MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton`
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
`MenuAnchor`, `MenuBar`, `MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton`
To support accessibility and ensure that screen readers announce roles correctly on the web, `MenuAnchor`, `MenuBar`, `MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton`,

Oxford comma for the win!


The `MenuAnchor` and `MenuBar` widgets are used to show menus or sub-menus.
The children of these widgets are composed of menu items, such as
`MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton` and `RadioMenuButton`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
`MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton` and `RadioMenuButton`.
`MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton`, and `RadioMenuButton`.

Comment on lines 11 to 13
and `RadioMenuButton` have been wired up to `ARIA` menu roles. The menu button
widgets should only be used as children of the menu-related widgets, such as
`MenuAnchor` and `MenuBar`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
and `RadioMenuButton` have been wired up to `ARIA` menu roles. The menu button
widgets should only be used as children of the menu-related widgets, such as
`MenuAnchor` and `MenuBar`.
and `RadioMenuButton` have been wired up to `ARIA` menu roles.
These menu button widgets should only be used as children of
menu-related widgets, such as `MenuAnchor` and `MenuBar`.

Comment on lines 21 to 23
To ensure the screen readers announce roles correctly on the web, after these
widgets are wired up to the `ARIA` menu roles, widgets with menu item roles
should only be used as children of widgets with `menu` or `menuBar` roles.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
To ensure the screen readers announce roles correctly on the web, after these
widgets are wired up to the `ARIA` menu roles, widgets with menu item roles
should only be used as children of widgets with `menu` or `menuBar` roles.
After these widgets are wired up to the `ARIA` menu roles,
widgets with menu item roles should only be used as children
of widgets with `menu` or `menuBar` roles.

Comment on lines 28 to 30
An error messages similar to "A menu item must be a child of a menu or a menu
bar" might appear if the app or a test directly uses menu item buttons instead
of using them within widgets with a role of `SemanticsRole.menu` or
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
An error messages similar to "A menu item must be a child of a menu or a menu
bar" might appear if the app or a test directly uses menu item buttons instead
of using them within widgets with a role of `SemanticsRole.menu` or
An error messages similar to "A menu item must be a child of a menu or a menu
bar" might appear if the menu item buttons are used directly instead
of using them within widgets with a role of `SemanticsRole.menu` or

Comment on lines 34 to 35
For example, before the migration, if an app used a menu button outside of a
menu context:
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
For example, before the migration, if an app used a menu button outside of a
menu context:
Before migration:
The following example uses a menu button outside of a menu context:

Comment on lines 51 to 53
An exception will be thrown and the error message will appear. Therefore, to
fix the error, replace the menu button widgets with other standard buttons, such
as:
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
An exception will be thrown and the error message will appear. Therefore, to
fix the error, replace the menu button widgets with other standard buttons, such
as:
After migration:
The previous code now throws an exception and displays an error message.
To fix the error, replace the menu button widgets with other standard buttons:

);
```

In tests, if a test was constructed as follows to test some features of the
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
In tests, if a test was constructed as follows to test some features of the
An example test, before migration:

);
```

After the migration, the test should be updated to:
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
After the migration, the test should be updated to:
The same test, after migration:

@QuncCccccc
Copy link
Contributor Author

@sfshaza2 Thanks so much for your suggestions! Just updated all of them!

@sfshaza2 sfshaza2 added the review.await-update Awaiting Updates after Edits label Apr 9, 2025
Copy link
Contributor

@sfshaza2 sfshaza2 left a comment

Choose a reason for hiding this comment

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

lgtm

@sfshaza2 sfshaza2 removed the review.await-update Awaiting Updates after Edits label Apr 13, 2025
@sfshaza2 sfshaza2 merged commit 6d1c1b4 into main Apr 13, 2025
9 checks passed
@sfshaza2 sfshaza2 deleted the semantics_menu_roles branch April 13, 2025 20:29
QuncCccccc added a commit that referenced this pull request May 5, 2025
sfshaza2 pushed a commit that referenced this pull request May 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants