Announce text and button together when DropdownMenu is treated as a button #176428
Conversation
github-actions
bot
added
framework
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces accessibility improvements for the DropdownMenu widget. When the menu is not focusable, it now correctly announces the text field and trailing icon as a single button element to screen readers. This is achieved by conditionally wrapping the trailing IconButton in an ExcludeSemantics widget and the TextField in a Semantics widget with a button role. The changes are well-implemented and the accompanying test updates accurately verify the new semantic behavior. Overall, this is a solid enhancement for accessibility.
| ).applyDefaults(effectiveInputDecorationTheme), | ||
| restorationId: widget.restorationId, | ||
| final Widget textField = Semantics( | ||
| button: !canRequestFocus(), |
There was a problem hiding this comment.
some platform may still treat this as textfield if both istextField and isButton are true.
There was a problem hiding this comment.
Can this be focusable but not enabled?
There was a problem hiding this comment.
some platform may still treat this as textfield if both istextField and isButton are true.
I see. I added textField and assigned it the opposite value of button.
Can this be focusable but not enabled?
When it's disabled, the text field is not focusable.
There was a problem hiding this comment.
This setting textfield to false causes child textfield to create a separate node as the child of this semantics node. I assume this is ok, just want to point it out.
I am not to sure about the logic here when it can be focus, this will become a button, otherwise this becomes a text field? Why would we turn it into a textfield if it is not focusable
There was a problem hiding this comment.
This setting textfield to false causes child textfield to create a separate node as the child of this semantics node. I assume this is ok, just want to point it out.
I actually wasn't aware of that. Thanks for pointing this out! I noticed Web will still treat it as text field when both are true. Other platforms seems fine. Also I noticed an error shows up on web when we run the app (on master), so instead of setting textField to false, I exclude the semantics on web.
when it can be focus, this will become a button, otherwise this becomes a text field?
No I think it should be the opposite. When it can be focused, it is text field, when it's not, it's a button. Does this make sense?
| restorationId: widget.restorationId, | ||
| final Widget textField = Semantics( | ||
| button: !canRequestFocus(), | ||
| hint: _controller.isOpen ? 'Expanded' : 'Collapsed', |
There was a problem hiding this comment.
also set expandable? or is this already set by menuAnchor?
| ).applyDefaults(effectiveInputDecorationTheme), | ||
| restorationId: widget.restorationId, | ||
| final Widget textField = Semantics( | ||
| button: !canRequestFocus(), |
There was a problem hiding this comment.
This setting textfield to false causes child textfield to create a separate node as the child of this semantics node. I assume this is ok, just want to point it out.
I am not to sure about the logic here when it can be focus, this will become a button, otherwise this becomes a text field? Why would we turn it into a textfield if it is not focusable
| // APIs to show whether the menu is expanded or collapsed. | ||
| hint: Theme.of(context).platform == TargetPlatform.iOS | ||
| ? _controller.isOpen | ||
| ? 'Expanded' |
There was a problem hiding this comment.
use the string from Widget localization
There was a problem hiding this comment.
Done. I used the strings from MaterialLocalizations.
There was a problem hiding this comment.
I responded the first comment here, just in case it's missed:)!
QuncCccccc
force-pushed
the
announce_text_field_and_button_together_on_dropdown_menu
branch
from
f7312b8 to
1fc7d2e
Compare
| _controller.close(); | ||
| }, | ||
| child: ExcludeSemantics( | ||
| excluding: isButton && kIsWeb, |
There was a problem hiding this comment.
Can you add a bit comment on why additional check on kIsWeb?
QuncCccccc
added
the
autosubmit
flutter-dashboard
bot
removed
the
autosubmit
…10229) Manual roll Flutter from e11e2c11288b to 7cd821c21093 (73 revisions) Manual roll requested by [email protected] flutter/flutter@e11e2c1...7cd821c 2025-10-14 [email protected] Fix computeDistanceToActualBaseline throws when accessing child size (flutter/flutter#176906) 2025-10-14 [email protected] iOS can set application locale before view controller is set (flutter/flutter#176592) 2025-10-14 [email protected] Roll ANGLE to a branch based on d9fa255a5c22 (flutter/flutter#176747) 2025-10-14 [email protected] Relands "Fixes keyboard selects disabled radio" (flutter/flutter#176977) 2025-10-14 [email protected] Fix expansion tile is missing state announcement on non-Apple platforms (flutter/flutter#175480) 2025-10-14 [email protected] impeller: allows access of float uniforms by name (flutter/flutter#176728) 2025-10-14 [email protected] Roll dart sdk to 3.11.0-17.0.dev (flutter/flutter#176947) 2025-10-13 [email protected] Move iOS integration tests (flutter/flutter#176940) 2025-10-13 [email protected] Make sure that an InputDatePickerFormField doesn't crash in 0x0 envir… (flutter/flutter#176047) 2025-10-13 [email protected] [web] Match the behavior of other platforms in Web Locale.toString if the country code is an empty string (flutter/flutter#176862) 2025-10-13 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fixes keyboard selects disabled radio (#176727)" (flutter/flutter#176958) 2025-10-13 [email protected] Fixes keyboard selects disabled radio (flutter/flutter#176727) 2025-10-13 [email protected] Roll Packages from e319c40 to d062181 (2 revisions) (flutter/flutter#176916) 2025-10-13 [email protected] Roll SwiftShader to 794b0cfce1d8 (flutter/flutter#176806) 2025-10-13 [email protected] Make DropdownMenu generic type non nullable (flutter/flutter#176711) 2025-10-12 [email protected] Roll Fuchsia Linux SDK from BWGpRvpdQh-HJpq1c... to _dd0Jv50H0oUI2Ad8... (flutter/flutter#176895) 2025-10-11 [email protected] Roll Fuchsia Linux SDK from JpiUsek1hU5r9QVKP... to BWGpRvpdQh-HJpq1c... (flutter/flutter#176880) 2025-10-11 [email protected] fix: content hash check for LUCI_CONTEXT (flutter/flutter#176867) 2025-10-11 [email protected] Feat: make tooltip position customizeable (flutter/flutter#175047) 2025-10-11 [email protected] Roll Dart SDK from d88d8bf2b53c to 65b171958c93 (3 revisions) (flutter/flutter#176871) 2025-10-11 [email protected] feat: apply radioGroup role to segmented control widgets (flutter/flutter#176157) 2025-10-10 [email protected] Make sure that a CheckboxMenuButton doesn't crash in 0x0 environment (flutter/flutter#176450) 2025-10-10 [email protected] [WebParagraph] Support for more styles, placeholders, decorations, etc (flutter/flutter#172853) 2025-10-10 [email protected] Set up a version of build_ios_framework_module_test that only runs on x64 machines and extend its timeout (flutter/flutter#176811) 2025-10-10 [email protected] Roll Packages from 0b41de3 to e319c40 (1 revision) (flutter/flutter#176833) 2025-10-10 [email protected] [tool/dap] Forward app.warning events from Flutter to DAP client (flutter/flutter#176827) 2025-10-10 [email protected] Roll Dart SDK from 70c00d3ceb3a to d88d8bf2b53c (1 revision) (flutter/flutter#176830) 2025-10-10 [email protected] Remove unnecessary nullable types in examples. (flutter/flutter#176713) 2025-10-10 [email protected] Roll Fuchsia Linux SDK from xArtL4DH0FsdwSqG_... to JpiUsek1hU5r9QVKP... (flutter/flutter#176822) 2025-10-10 [email protected] Cleanup OutlinedButton.icon documentation and implementation (flutter/flutter#176630) 2025-10-10 [email protected] [HCPP] Properly remove hcpp views that are no longer visible (flutter/flutter#176742) 2025-10-10 [email protected] Make sure that an InputChip doesn't crash in 0x0 environment (flutter/flutter#175930) 2025-10-10 [email protected] Update Flutter templates' Dart style (flutter/flutter#175963) 2025-10-10 [email protected] Make sure that a DropdownButtonFormField doesn't crash in 0x0 environ… (flutter/flutter#174958) 2025-10-10 [email protected] Make sure that an InkWell doesn't crash in 0x0 environment (flutter/flutter#175871) 2025-10-10 [email protected] Handle#6537 end drawer button (flutter/flutter#173026) 2025-10-10 [email protected] Roll Dart SDK from a9b7bd4b0b32 to 70c00d3ceb3a (4 revisions) (flutter/flutter#176815) 2025-10-10 [email protected] Change default Linux thread policy to merge platform and UI threads. (flutter/flutter#176759) 2025-10-09 [email protected] [ Tool ] Roll package:dwds to 26.0.0 (flutter/flutter#176808) 2025-10-09 [email protected] Update `CHANGELOG` to include 3.35.6 notes (flutter/flutter#176803) 2025-10-09 [email protected] Announce text and button together when DropdownMenu is treated as a button (flutter/flutter#176428) 2025-10-09 [email protected] [native_assets] create macOS CCompilerConfig via xcrun --find (flutter/flutter#175717) 2025-10-09 [email protected] [Impeller] Fix broken links in README. (flutter/flutter#176770) 2025-10-09 [email protected] Fix links to Custom Flutter Engine Embedders in README. (flutter/flutter#175807) ...
…utton (flutter#176428) Fixes flutter#175950. This PR is to make screen reader announce the text field content and the trailing button together on `DropdownMenu`. When the `DropdownMenu` cannot be focused (`canRequestFocus()` is set to false), the "text field" should be treated as if it is a button, and the trailing button should **not** be announced separately. When the text field is focusable, it's reasonable to separate text field and the trailing button, so I leave it as is. The native app doesn't announce "expanded"/"collapsed", so I use `Semantics.hint` to achieve the goal. This demo is to show the screen reader announcement. https://github.com/user-attachments/assets/e7a9da8f-acf8-4018-a778-1ded1b07103c ## 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 and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [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] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing.
2 participants
Fixes #175950.
This PR is to make screen reader announce the text field content and the trailing button together on
DropdownMenu. When theDropdownMenucannot be focused (canRequestFocus()is set to false), the "text field" should be treated as if it is a button, and the trailing button should not be announced separately. When the text field is focusable, it's reasonable to separate text field and the trailing button, so I leave it as is.The native app doesn't announce "expanded"/"collapsed", so I use
Semantics.hintto achieve the goal.This demo is to show the screen reader announcement.
fix_demo.mp4
Pre-launch Checklist
///).