-
Notifications
You must be signed in to change notification settings - Fork 3.3k
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
Conversation
Visit the preview URL for this PR (updated for commit 546a922): https://flutter-docs-prod--pr11881-semantics-menu-roles-ydcftdn7.web.app |
There was a problem hiding this 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` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`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`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton` and `RadioMenuButton`. | |
`MenuItemButton`, `SubmenuButton`, `CheckboxMenuButton`, and `RadioMenuButton`. |
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`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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`. |
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
For example, before the migration, if an app used a menu button outside of a | ||
menu context: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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: |
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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After the migration, the test should be updated to: | |
The same test, after migration: |
@sfshaza2 Thanks so much for your suggestions! Just updated all of them! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
This reverts commit 6d1c1b4.
Reverts #11881 because flutter/flutter#165596 is reverted.
This PR is to add a breaking change page for flutter/flutter#165596.
Presubmit checklist