Add comboBox role for DropdownMenu by QuncCccccc · Pull Request #163638 · flutter/flutter

QuncCccccc · 2025-02-19T18:11:20Z

This PR is to wire up the aria combo box role to DropdownMenu.

Related to #157177

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.

chunhtai · 2025-02-21T17:39:43Z

engine/src/flutter/lib/web_ui/lib/src/engine/semantics/menu.dart

+  }
+
+  @override
+  void update() {


The doc also mentioned these aria properties
aria-haspopup, aria-controls, aria-activedescendant, and aria-autocomplete.

you can ignore aria-controls for now.

chunhtai · 2025-02-21T17:41:49Z

packages/flutter/lib/src/semantics/semantics.dart

+  static FlutterError? _semanticsComboBox(SemanticsNode node) {
+    final SemanticsData data = node.getSemanticsData();
+    if (!data.hasFlag(SemanticsFlag.hasExpandedState)) {
+      return FlutterError('A combo box needs expanded states');


also check if it is expanded, it should also have children

Also we should add a test in flutter/packages/flutter/test/widgets/semantics_role_checks_test.dart

loic-sharma · 2025-02-21T22:00:49Z

engine/src/flutter/lib/web_ui/lib/src/engine/semantics/menu.dart

+/// Uses aria combobox role to convey this semantic information to the element.
+///
+/// Screen-readers takes advantage of "aria-label" to describe the visual.
+class SemanticComboBox extends SemanticRole {


Is the file name menu.dart correct here? Or should it be something like combo_box.dart since it doesn't seem to be directly related to a menu?

Ah, I was thinking to put all the menu related things together because our dropdown menu is also part of menu systems, so I named it menu.dart😀

Consider rename to menus

flutter-dashboard · 2025-02-25T21:37:40Z

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@OverRide

This adds "required" semantic nodes, which indicate a node that requires user input before a form can be submitted. On Flutter Web, these get converted into [`aria-required` attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required). Addresses #162139 ### Example app _⚠️ This example app includes a `DropdownMenu` which currently produces an incorrect semantics tree. That will be fixed by #163638 Today, you wrap your control in a `Semantics(required: true, child ...)`. For example: <details> <summary>Example app with required semantic flags...</summary> ```dart import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter/semantics.dart'; void main() { runApp(const MyApp()); SemanticsBinding.instance.ensureSemantics(); } class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: const MyForm())); } } class MyForm extends StatefulWidget { const MyForm({super.key}); @OverRide State<MyForm> createState() => MyFormState(); } class MyFormState extends State<MyForm> { int _dropdownValue = 0; bool _checkboxValue = false; int _radioGroupValue = 0; @OverRide Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Semantics(required: true, child: TextField()), Semantics( required: true, child: DropdownMenu<int>( initialSelection: _dropdownValue, onSelected: (value) => setState(() => _dropdownValue = value ?? 0), dropdownMenuEntries: [ DropdownMenuEntry(value: 0, label: 'Dropdown entry 1'), DropdownMenuEntry(value: 1, label: 'Dropdown entry 2'), ], ), ), ListTile( title: Text('Checkbox'), leading: Semantics( required: true, child: Checkbox( value: _checkboxValue, onChanged: (value) => setState(() => _checkboxValue = value ?? false), ), ), ), Semantics( label: 'Radio group', role: SemanticsRole.radioGroup, explicitChildNodes: true, required: true, child: Column( children: <Widget>[ ListTile( title: const Text('Radio 1'), leading: Radio<int>( value: 0, groupValue: _radioGroupValue, onChanged: (int? value) => setState(() => _radioGroupValue = value ?? 0), ), ), ListTile( title: const Text('Radio 2'), leading: Radio<int>( value: 1, groupValue: _radioGroupValue, onChanged: (int? value) => setState(() => _radioGroupValue = value ?? 0), ), ), ], ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 16), child: ElevatedButton(onPressed: () {}, child: const Text('Submit')), ), ], ); } } ``` </details> <details> <summary>Semantics tree...</summary> ``` SemanticsNode#0 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ └─SemanticsNode#1 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ textDirection: ltr │ └─SemanticsNode#2 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ sortKey: OrdinalSortKey#e3336(order: 0.0) │ └─SemanticsNode#3 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ flags: scopesRoute │ ├─SemanticsNode#4 │ Rect.fromLTRB(0.0, 0.0, 645.0, 48.0) │ actions: didGainAccessibilityFocus, didLoseAccessibilityFocus, │ focus, tap │ flags: isTextField, hasEnabledState, isEnabled, hasRequiredState, │ isRequired │ textDirection: ltr │ text selection: [0, 0] │ currentValueLength: 0 │ ├─SemanticsNode#5 │ │ Rect.fromLTRB(0.0, 48.0, 199.3, 96.0) │ │ flags: hasRequiredState, isRequired │ │ │ └─SemanticsNode#7 │ │ Rect.fromLTRB(0.0, 0.0, 199.3, 48.0) │ │ actions: didGainAccessibilityFocus, didLoseAccessibilityFocus, │ │ focus, moveCursorBackwardByCharacter, moveCursorBackwardByWord, │ │ moveCursorForwardByCharacter, moveCursorForwardByWord, tap │ │ flags: isTextField, hasEnabledState, isEnabled │ │ value: "Dropdown entry 1" │ │ textDirection: ltr │ │ text selection: [15, 15] │ │ currentValueLength: 16 │ │ │ ├─SemanticsNode#9 │ │ Rect.fromLTRB(4.0, 4.0, 44.0, 44.0) │ │ actions: focus, tap │ │ flags: hasSelectedState, isButton, hasEnabledState, isEnabled, │ │ isFocusable │ │ │ └─SemanticsNode#8 │ Rect.fromLTRB(155.3, 4.0, 195.3, 44.0) │ actions: focus, tap │ flags: hasSelectedState, isButton, hasEnabledState, isEnabled, │ isFocusable │ ├─SemanticsNode#10 │ │ Rect.fromLTRB(0.0, 96.0, 645.0, 144.0) │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ label: "Checkbox" │ │ textDirection: ltr │ │ │ └─SemanticsNode#11 │ Rect.fromLTRB(16.0, 4.0, 56.0, 44.0) │ actions: focus, tap │ flags: hasCheckedState, hasEnabledState, isEnabled, isFocusable, │ hasRequiredState, isRequired │ ├─SemanticsNode#12 │ │ Rect.fromLTRB(0.0, 144.0, 645.0, 240.0) │ │ flags: hasRequiredState, isRequired │ │ label: "Radio group" │ │ textDirection: ltr │ │ role: radioGroup │ │ │ ├─SemanticsNode#13 │ │ │ Rect.fromLTRB(0.0, 0.0, 645.0, 48.0) │ │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ │ label: "Radio 1" │ │ │ textDirection: ltr │ │ │ │ │ └─SemanticsNode#14 │ │ Rect.fromLTRB(16.0, 8.0, 48.0, 40.0) │ │ actions: focus, tap │ │ flags: hasCheckedState, isChecked, hasSelectedState, isSelected, │ │ hasEnabledState, isEnabled, isInMutuallyExclusiveGroup, │ │ isFocusable │ │ │ └─SemanticsNode#15 │ │ Rect.fromLTRB(0.0, 48.0, 645.0, 96.0) │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ label: "Radio 2" │ │ textDirection: ltr │ │ │ └─SemanticsNode#16 │ Rect.fromLTRB(16.0, 8.0, 48.0, 40.0) │ actions: focus, tap │ flags: hasCheckedState, hasSelectedState, hasEnabledState, │ isEnabled, isInMutuallyExclusiveGroup, isFocusable │ └─SemanticsNode#17 Rect.fromLTRB(0.0, 256.0, 92.7, 288.0) actions: focus, tap flags: isButton, hasEnabledState, isEnabled, isFocusable label: "Submit" textDirection: ltr thickness: 1.0 ``` </details> <details> <summary>HTML generated by Flutter web...</summary> ```html <html> <body flt-embedding="full-page" flt-renderer="canvaskit" flt-build-mode="debug" spellcheck="false" style=""> <flt-announcement-host> <flt-announcement-polite aria-live="polite" style=""> </flt-announcement-polite> <flt-announcement-assertive aria-live="assertive" style=""> </flt-announcement-assertive> </flt-announcement-host> <flutter-view flt-view-id="0" tabindex="0" style=""> <flt-glass-pane> </flt-glass-pane> <flt-text-editing-host> </flt-text-editing-host> <flt-semantics-host style=""> <flt-semantics id="flt-semantic-node-0" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-1" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-2" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-3" role="dialog" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-4" style=""> <input type="text" spellcheck="false" autocorrect="on" autocomplete="on" data-semantics-role="text-field" aria-required="true" style=""> </flt-semantics> <flt-semantics id="flt-semantic-node-5" aria-required="true" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-7" style=""> <input type="text" spellcheck="false" autocorrect="off" autocomplete="off" data-semantics-role="text-field" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-9" role="button" tabindex="0" aria-selected="false" flt-tappable="" style=""> </flt-semantics> <flt-semantics id="flt-semantic-node-8" role="button" tabindex="0" aria-selected="false" flt-tappable="" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-10" role="group" aria-label="Checkbox" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-11" tabindex="0" aria-required="true" flt-tappable="" role="checkbox" aria-checked="false" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-12" role="radiogroup" aria-label="Radio group" aria-required="true" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-13" role="group" aria-label="Radio 1" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-14" tabindex="0" flt-tappable="" role="radio" aria-checked="true" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-15" role="group" aria-label="Radio 2" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-16" tabindex="0" flt-tappable="" role="radio" aria-checked="false" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-17" role="button" tabindex="0" flt-tappable="" style=""> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-host> </flutter-view> </body> </html> ``` </details> In the future, we can update Material and Cupertino widgets to automatically make their semantics node required when desirable. ## 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. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

Piinks · 2025-04-30T22:55:11Z

Hey @QuncCccccc! Is this one we still want to move forward with? I don't recall if this is the one we split to land in multiple changes?

QuncCccccc · 2025-04-30T23:01:19Z

Oh we don't have plan to land this. Closing it. Thanks for reminding!

@OverRide

This adds "required" semantic nodes, which indicate a node that requires user input before a form can be submitted. On Flutter Web, these get converted into [`aria-required` attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required). Addresses flutter#162139 ### Example app _⚠️ This example app includes a `DropdownMenu` which currently produces an incorrect semantics tree. That will be fixed by flutter#163638 Today, you wrap your control in a `Semantics(required: true, child ...)`. For example: <details> <summary>Example app with required semantic flags...</summary> ```dart import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter/semantics.dart'; void main() { runApp(const MyApp()); SemanticsBinding.instance.ensureSemantics(); } class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: const MyForm())); } } class MyForm extends StatefulWidget { const MyForm({super.key}); @OverRide State<MyForm> createState() => MyFormState(); } class MyFormState extends State<MyForm> { int _dropdownValue = 0; bool _checkboxValue = false; int _radioGroupValue = 0; @OverRide Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Semantics(required: true, child: TextField()), Semantics( required: true, child: DropdownMenu<int>( initialSelection: _dropdownValue, onSelected: (value) => setState(() => _dropdownValue = value ?? 0), dropdownMenuEntries: [ DropdownMenuEntry(value: 0, label: 'Dropdown entry 1'), DropdownMenuEntry(value: 1, label: 'Dropdown entry 2'), ], ), ), ListTile( title: Text('Checkbox'), leading: Semantics( required: true, child: Checkbox( value: _checkboxValue, onChanged: (value) => setState(() => _checkboxValue = value ?? false), ), ), ), Semantics( label: 'Radio group', role: SemanticsRole.radioGroup, explicitChildNodes: true, required: true, child: Column( children: <Widget>[ ListTile( title: const Text('Radio 1'), leading: Radio<int>( value: 0, groupValue: _radioGroupValue, onChanged: (int? value) => setState(() => _radioGroupValue = value ?? 0), ), ), ListTile( title: const Text('Radio 2'), leading: Radio<int>( value: 1, groupValue: _radioGroupValue, onChanged: (int? value) => setState(() => _radioGroupValue = value ?? 0), ), ), ], ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 16), child: ElevatedButton(onPressed: () {}, child: const Text('Submit')), ), ], ); } } ``` </details> <details> <summary>Semantics tree...</summary> ``` SemanticsNode#0 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ └─SemanticsNode#1 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ textDirection: ltr │ └─SemanticsNode#2 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ sortKey: OrdinalSortKey#e3336(order: 0.0) │ └─SemanticsNode#3 │ Rect.fromLTRB(0.0, 0.0, 645.0, 1284.0) │ flags: scopesRoute │ ├─SemanticsNode#4 │ Rect.fromLTRB(0.0, 0.0, 645.0, 48.0) │ actions: didGainAccessibilityFocus, didLoseAccessibilityFocus, │ focus, tap │ flags: isTextField, hasEnabledState, isEnabled, hasRequiredState, │ isRequired │ textDirection: ltr │ text selection: [0, 0] │ currentValueLength: 0 │ ├─SemanticsNode#5 │ │ Rect.fromLTRB(0.0, 48.0, 199.3, 96.0) │ │ flags: hasRequiredState, isRequired │ │ │ └─SemanticsNode#7 │ │ Rect.fromLTRB(0.0, 0.0, 199.3, 48.0) │ │ actions: didGainAccessibilityFocus, didLoseAccessibilityFocus, │ │ focus, moveCursorBackwardByCharacter, moveCursorBackwardByWord, │ │ moveCursorForwardByCharacter, moveCursorForwardByWord, tap │ │ flags: isTextField, hasEnabledState, isEnabled │ │ value: "Dropdown entry 1" │ │ textDirection: ltr │ │ text selection: [15, 15] │ │ currentValueLength: 16 │ │ │ ├─SemanticsNode#9 │ │ Rect.fromLTRB(4.0, 4.0, 44.0, 44.0) │ │ actions: focus, tap │ │ flags: hasSelectedState, isButton, hasEnabledState, isEnabled, │ │ isFocusable │ │ │ └─SemanticsNode#8 │ Rect.fromLTRB(155.3, 4.0, 195.3, 44.0) │ actions: focus, tap │ flags: hasSelectedState, isButton, hasEnabledState, isEnabled, │ isFocusable │ ├─SemanticsNode#10 │ │ Rect.fromLTRB(0.0, 96.0, 645.0, 144.0) │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ label: "Checkbox" │ │ textDirection: ltr │ │ │ └─SemanticsNode#11 │ Rect.fromLTRB(16.0, 4.0, 56.0, 44.0) │ actions: focus, tap │ flags: hasCheckedState, hasEnabledState, isEnabled, isFocusable, │ hasRequiredState, isRequired │ ├─SemanticsNode#12 │ │ Rect.fromLTRB(0.0, 144.0, 645.0, 240.0) │ │ flags: hasRequiredState, isRequired │ │ label: "Radio group" │ │ textDirection: ltr │ │ role: radioGroup │ │ │ ├─SemanticsNode#13 │ │ │ Rect.fromLTRB(0.0, 0.0, 645.0, 48.0) │ │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ │ label: "Radio 1" │ │ │ textDirection: ltr │ │ │ │ │ └─SemanticsNode#14 │ │ Rect.fromLTRB(16.0, 8.0, 48.0, 40.0) │ │ actions: focus, tap │ │ flags: hasCheckedState, isChecked, hasSelectedState, isSelected, │ │ hasEnabledState, isEnabled, isInMutuallyExclusiveGroup, │ │ isFocusable │ │ │ └─SemanticsNode#15 │ │ Rect.fromLTRB(0.0, 48.0, 645.0, 96.0) │ │ flags: hasSelectedState, hasEnabledState, isEnabled │ │ label: "Radio 2" │ │ textDirection: ltr │ │ │ └─SemanticsNode#16 │ Rect.fromLTRB(16.0, 8.0, 48.0, 40.0) │ actions: focus, tap │ flags: hasCheckedState, hasSelectedState, hasEnabledState, │ isEnabled, isInMutuallyExclusiveGroup, isFocusable │ └─SemanticsNode#17 Rect.fromLTRB(0.0, 256.0, 92.7, 288.0) actions: focus, tap flags: isButton, hasEnabledState, isEnabled, isFocusable label: "Submit" textDirection: ltr thickness: 1.0 ``` </details> <details> <summary>HTML generated by Flutter web...</summary> ```html <html> <body flt-embedding="full-page" flt-renderer="canvaskit" flt-build-mode="debug" spellcheck="false" style=""> <flt-announcement-host> <flt-announcement-polite aria-live="polite" style=""> </flt-announcement-polite> <flt-announcement-assertive aria-live="assertive" style=""> </flt-announcement-assertive> </flt-announcement-host> <flutter-view flt-view-id="0" tabindex="0" style=""> <flt-glass-pane> </flt-glass-pane> <flt-text-editing-host> </flt-text-editing-host> <flt-semantics-host style=""> <flt-semantics id="flt-semantic-node-0" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-1" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-2" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-3" role="dialog" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-4" style=""> <input type="text" spellcheck="false" autocorrect="on" autocomplete="on" data-semantics-role="text-field" aria-required="true" style=""> </flt-semantics> <flt-semantics id="flt-semantic-node-5" aria-required="true" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-7" style=""> <input type="text" spellcheck="false" autocorrect="off" autocomplete="off" data-semantics-role="text-field" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-9" role="button" tabindex="0" aria-selected="false" flt-tappable="" style=""> </flt-semantics> <flt-semantics id="flt-semantic-node-8" role="button" tabindex="0" aria-selected="false" flt-tappable="" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-10" role="group" aria-label="Checkbox" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-11" tabindex="0" aria-required="true" flt-tappable="" role="checkbox" aria-checked="false" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-12" role="radiogroup" aria-label="Radio group" aria-required="true" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-13" role="group" aria-label="Radio 1" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-14" tabindex="0" flt-tappable="" role="radio" aria-checked="true" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-15" role="group" aria-label="Radio 2" aria-selected="false" style=""> <flt-semantics-container style=""> <flt-semantics id="flt-semantic-node-16" tabindex="0" flt-tappable="" role="radio" aria-checked="false" style=""> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> <flt-semantics id="flt-semantic-node-17" role="button" tabindex="0" flt-tappable="" style=""> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-host> </flutter-view> </body> </html> ``` </details> In the future, we can update Material and Cupertino widgets to automatically make their semantics node required when desirable. ## 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. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

QuncCccccc marked this pull request as ready for review February 20, 2025 01:50

QuncCccccc force-pushed the add_combo_box_role branch from bac3b35 to 378e647 Compare February 20, 2025 20:10

QuncCccccc requested a review from chunhtai February 20, 2025 20:58

chunhtai reviewed Feb 21, 2025

View reviewed changes

QuncCccccc force-pushed the add_combo_box_role branch from 18a7cfc to 1a82253 Compare February 21, 2025 18:19

loic-sharma reviewed Feb 21, 2025

View reviewed changes

QuncCccccc added 10 commits February 24, 2025 22:01

Add comboBox role for DropdownMenu

eef95ab

Update unit tests

390cff6

Set aria-expanded attribute

f5d20c9

Add api doc

678ea8a

Update tests

3513bf1

Fix test failures

606dea1

Remove print

a7d6349

Fix unit test after merging conflict

c172c81

Update test

09c1852

wire up aria-activedescendant

5d045a1

QuncCccccc force-pushed the add_combo_box_role branch from 9e563a1 to 5d045a1 Compare February 25, 2025 06:02

QuncCccccc mentioned this pull request Feb 25, 2025

Wires up expanded state in web engine #164048

Merged

9 tasks

QuncCccccc marked this pull request as draft February 25, 2025 21:31

loic-sharma mentioned this pull request Mar 4, 2025

[Accessibility] Add required semantics flags #164585

Merged

9 tasks

QuncCccccc closed this Apr 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add comboBox role for DropdownMenu#163638

Add comboBox role for DropdownMenu#163638
QuncCccccc wants to merge 10 commits intoflutter:masterfrom
QuncCccccc:add_combo_box_role

QuncCccccc commented Feb 19, 2025 •

edited

Loading

Uh oh!

chunhtai Feb 21, 2025

Uh oh!

chunhtai Feb 21, 2025

Uh oh!

chunhtai Feb 21, 2025

Uh oh!

loic-sharma Feb 21, 2025 •

edited

Loading

Uh oh!

QuncCccccc Feb 21, 2025

Uh oh!

chunhtai Feb 21, 2025

Uh oh!

flutter-dashboard bot commented Feb 25, 2025

Uh oh!

Piinks commented Apr 30, 2025

Uh oh!

QuncCccccc commented Apr 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

QuncCccccc commented Feb 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

chunhtai Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

chunhtai Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

chunhtai Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

loic-sharma Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

chunhtai Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Feb 25, 2025

Uh oh!

Piinks commented Apr 30, 2025

Uh oh!

QuncCccccc commented Apr 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

QuncCccccc commented Feb 19, 2025 •

edited

Loading

loic-sharma Feb 21, 2025 •

edited

Loading