flutter_flutter/packages/flutter_localizations
Huy c5228651d0
Fix RadioButton is not vocalized as unselected by VoiceOver (#175926)
### Issue
- Fix https://github.com/flutter/flutter/issues/170422

### Description

This PR proposes a fix by adding a hint to Semantics here:


b220f5a2ab/packages/flutter/lib/src/widgets/raw_radio.dart (L217-L222)

The hint is only available on iOS &macOS platforms with a localized
string for `unselected` state to prevent regression on Android, which
works as expected currently and this seems to be the only solution as
investigated below ⬇️

<details open>
<summary>Demo the fix</summary>


https://github.com/user-attachments/assets/56c1c6c9-5178-45be-a633-47145a0543d6

</details>

#### Why can't we make it simpler with Semantics flags only?

- I looked at
[UIAccessibilityTraits](https://developer.apple.com/documentation/uikit/uiaccessibilitytraits),
it seems the
[selected](https://developer.apple.com/documentation/uikit/uiaccessibilitytraits/selected)
property does announce `selected` state, but it does not mention or give
hints for `unselected` state.
-
[L824-L828](e8bef98051/engine/src/flutter/shell/platform/darwin/ios/framework/Source/SemanticsObject.mm (L824-L828))
in Flutter source code does mention radio button: Looks like I can try
marking both toggle and check, but it's impossible, due to an assertion:
[A semantics node cannot be toggled and checked at the same
time](35375e43fb/packages/flutter/lib/src/rendering/object.dart (L4807-L4809))

➡️ Not sure which flags can trigger `unselected` state implicitly.

#### How do iOS native apps work?

I did test with two approaches:

1. iOS Reminders app: 
VoiceOver vocalizes as follows:
Unchecked radio: "...Incomplete..."
checked radio:"...Completed..."

<details>
<summary>Demo video</summary>


https://github.com/user-attachments/assets/6bed5d14-ded8-47c2-9c09-7afc266898cc

</details>

2. Build Radio with SwiftUI

Looks like [there is no built-in widget for Radio provided by
Apple](https://www.reddit.com/r/SwiftUI/comments/1gsh7zo/does_swiftui_have_a_builtin_radiobutton_in_2024/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button).
[Is it really a native iOS
component?](https://www.reddit.com/r/SwiftUI/comments/1gsh7zo/comment/lxea1uf/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)

Most of results I have found suggest building radio from a button with
changing image source(selected/unselected, respectively), as I do in
this SwiftUI code here:
https://gist.github.com/huycozy/93b12c030651c4fde6fe8fceda1ba1ee. We can
control what the reader vocalizes by setting traits and value for it
manually. This being said, setting accessibility hint or value from
Flutter side makes sense in this case. Please let me know if I am
missing something.

<details>
<summary>Demo video</summary>


https://github.com/user-attachments/assets/118c89c5-46a3-497f-8b2a-6f7c5ae8edf3

</details>


## 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].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[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

---------

Signed-off-by: huycozy <huy@nevercode.io>
Co-authored-by: chunhtai <47866232+chunhtai@users.noreply.github.com>
2025-10-09 00:12:33 +00:00
..

Flutter Framework localizations

This package contains the localizations used by the Flutter framework itself.

See the localization README for more detailed information about the localizations themselves.

Adding a new string to localizations

If you (someone contributing to the Flutter framework) want to add a new string to the MaterialLocalizations, WidgetsLocalizations or the CupertinoLocalizations objects (e.g. because you've added a new widget and it has a tooltip), follow these steps (these instructions are for MaterialLocalizations, but apply equally to CupertinoLocalizations and WidgetsLocalizations, with appropriate name substitutions):

  1. For messages without parameters, add new getter

    String get showMenuTooltip;
    

    to the localizations class MaterialLocalizations, in packages/flutter/lib/src/material/material_localizations.dart;

    For messages with parameters, add new function

    String aboutListTileTitle(String applicationName);
    

    to the same localization class.

  2. Implement a default return value in DefaultMaterialLocalizations in the same file as in step 1.

    Messages without parameters:

    @override
    String get showMenuTooltip => 'Show menu';
    

    Messages with parameters:

    @override
    String aboutListTileTitle(String applicationName) => 'About $applicationName';
    

    For messages with parameters, do also add the function to GlobalMaterialLocalizations in packages/flutter_localizations/lib/src/material_localizations.dart, and add a raw getter as demonstrated below:

    /// The raw version of [aboutListTileTitle], with `$applicationName` verbatim
    /// in the string.
    @protected
    String get aboutListTileTitleRaw;
    
    @override
    String aboutListTileTitle(String applicationName) {
      final String text = aboutListTileTitleRaw;
      return text.replaceFirst(r'$applicationName', applicationName);
    }
    
  3. Add a test to test/material/localizations_test.dart that verifies that this new value is implemented.

  4. Update the flutter_localizations package. To add a new string to the flutter_localizations package, you must first add it to the English translations (lib/src/l10n/material_en.arb), including a description.

    Messages without parameters:

    "showMenuTooltip": "Show menu",
    "@showMenuTooltip": {
      "description": "The tooltip for the button that shows a popup menu."
    },
    

    Messages with parameters:

    "aboutListTileTitle": "About $applicationName",
    "@aboutListTileTitle": {
      "description": "The default title for the drawer item that shows an about page for the application. The value of $applicationName is the name of the application, like GMail or Chrome.",
      "parameters": "applicationName"
    },
    

    Then you need to add new entries for the string to all of the other language locale files by running:

    dart dev/tools/localization/bin/gen_missing_localizations.dart
    

    Which will copy the English strings into the other locales as placeholders until they can be translated.

    Finally you need to re-generate lib/src/l10n/localizations.dart by running:

    dart dev/tools/localization/bin/gen_localizations.dart --overwrite
    

    If you got an error when running this command, this issue might be helpful.

    TL;DR: If you got the same type of errors as discussed in the issue, run this instead:

    dart dev/tools/localization/bin/gen_localizations.dart --overwrite --remove-undefined
    

    There is a localization README file with further information in the lib/src/l10n/ directory.

  5. If you are a Google employee, you should then also follow the instructions at go/flutter-l10n. If you're not, don't worry about it.

Updating an existing string

If you or someone contributing to the Flutter framework wants to modify an existing string in the MaterialLocalizations objects, follow these steps:

  1. Modify the default value of the relevant getter(s) in DefaultMaterialLocalizations below.

  2. Update the flutter_localizations package. Modify the out-of-date English strings in lib/src/l10n/material_en.arb.

    You also need to re-generate lib/src/l10n/localizations.dart by running:

    dart dev/tools/localization/bin/gen_localizations.dart --overwrite
    

    This script may result in your updated getters being created in newer locales and set to the old value of the strings. This is to be expected. Leave them as they were generated, and they will be picked up for translation.

    There is a localization README file with further information in the lib/src/l10n/ directory.

  3. If you are a Google employee, you should then also follow the instructions at go/flutter-l10n. If you're not, don't worry about it.