Bug: Radio button not correctly read by screen-readers #362

app/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Tool] Change the favicon to orange favicon in the documentation ([#371](https://github.com/Orange-OpenSource/ouds-flutter/issues/371))
 
 ### Fixed
+- [Library] Radio button not correctly read by screen-readers ([#362](https://github.com/Orange-OpenSource/ouds-flutter/issues/362))
 - [Library] Android High Contrast for Checkbox and Radio button ([#327](https://github.com/Orange-OpenSource/ouds-flutter/issues/327))
 - [Library] Preserve @nodoc header in generated l10n files ([#412](https://github.com/Orange-OpenSource/ouds-flutter/issues/412))
 - [Library] Error status not read by Talkback and Voice Over `Switch` ([#365](https://github.com/Orange-OpenSource/ouds-flutter/issues/365))

ouds_core/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Tool] Change the favicon to orange favicon in the documentation ([#371](https://github.com/Orange-OpenSource/ouds-flutter/issues/371))
 
 ### Fixed
+- [Library] Radio button not correctly read by screen-readers ([#362](https://github.com/Orange-OpenSource/ouds-flutter/issues/362))
 - [Library] Android High Contrast for Checkbox and Radio button ([#327](https://github.com/Orange-OpenSource/ouds-flutter/issues/327))
 - [Library] Preserve @nodoc header in generated l10n files ([#412](https://github.com/Orange-OpenSource/ouds-flutter/issues/412))
 - [Library] Error status not read by Talkback and Voice Over `Switch` ([#365](https://github.com/Orange-OpenSource/ouds-flutter/issues/365))

ouds_core/lib/components/checkbox/ouds_checkbox.dart

@@ -123,7 +123,7 @@ class _OudsCheckboxState extends State<OudsCheckbox> {
               ? l10n?.core_checkbox_indeterminate_a11y
               : l10n?.core_checkbox_not_checked_a11y,
       label: widget.tristate == true ? l10n?.core_checkbox_indeterminateCheckbox_a11y : l10n?.core_checkbox_checkbox_a11y,
-      hint: widget.isError ? l10n?.core_checkbox_error_a11y : null,
+      hint: widget.isError ? l10n?.core_common_onError_a11y : null,
       child: Material(
         color: Colors.transparent,
         child: SizedBox(

ouds_core/lib/components/radio_button/ouds_radio_button.dart

@@ -25,6 +25,7 @@ import 'package:ouds_core/components/control/internal/modifier/ouds_control_tick
 import 'package:ouds_core/components/control/internal/ouds_control_state.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
+import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 
 ///
 /// [OUDS Radio Button Design Guidelines](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button)
@@ -119,73 +120,83 @@ class OudsRadioButtonState<T> extends State<OudsRadioButton<T>> {
     final radioButtonBackgroundModifier = OudsControlBackgroundModifier(context);
     final radioButtonTickModifier = OudsControlTickModifier(context);
     final radioButton = OudsTheme.of(context).componentsTokens(context).radioButton;
+    final l10n = OudsLocalizations.of(context);
 
-    return SizedBox(
-      width: radioButton.sizeMinWidth,
-      child: InkWell(
-        onTap: widget.onChanged != null
-            ? () {
-                _isPressed = true;
-                // Added to improve visual rendering fluidity by allowing Flutter
-                // to complete the current frame before executing the onChanged callback.
-                SchedulerBinding.instance.addPostFrameCallback((_) {
-                  widget.onChanged!(widget.value);
-                  _isPressed = false;
-                });
-              }
-            : null,
-        splashColor: Colors.transparent,
-        onHover: (hovering) {
-          setState(() {
-            _isHovered = hovering;
-          });
-        },
-        onHighlightChanged: (highlighted) {
-          setState(() {
-            _isPressed = highlighted;
-          });
-        },
-        child: Container(
-          constraints: BoxConstraints(
-            maxHeight: radioButton.sizeMaxHeight,
-            minHeight: radioButton.sizeMinHeight,
-            minWidth: radioButton.sizeMinWidth,
-          ),
-          color: _isPressed ? radioButtonBackgroundModifier.getBackgroundColor(radioButtonState) : Colors.transparent,
-          child: Center(
-            child: SizedBox(
-              width: radioButton.sizeIndicator,
-              height: radioButton.sizeIndicator,
-              child: Stack(
-                fit: StackFit.expand,
-                children: [
-                  // --- Decorated back-end : border, radius, etc.
-                  DecoratedBox(
-                    decoration: BoxDecoration(
-                      border: Border.all(
-                        color: radioButtonBorderModifier.getBorderColor(radioButtonState, widget.isError, _selected,_isHighContrast),
-                        width: radioButtonBorderModifier.getBorderWidth(radioButtonState, _selected, radioButton),
-                      ),
-                      borderRadius: BorderRadius.circular(
-                        radioButtonBorderModifier.getBorderRadius(radioButton),
+    return Semantics(
+      enabled: widget.onChanged != null,
+      label: "${_selected
+          ? l10n?.core_common_selected_a11y
+          : l10n?.core_common_not_selected_a11y} "
+          "${l10n?.core_radioButton_radioButton_a11y}",
+      value: widget.isError ? l10n?.core_common_onError_a11y : null,
+      child: SizedBox(
+        width: radioButton.sizeMinWidth,
+        child: InkWell(
+          onTap: widget.onChanged != null
+              ? () {
+                  _isPressed = true;
+                  // Added to improve visual rendering fluidity by allowing Flutter
+                  // to complete the current frame before executing the onChanged callback.
+                  SchedulerBinding.instance.addPostFrameCallback((_) {
+                    widget.onChanged!(widget.value);
+                    _isPressed = false;
+                  });
+                }
+              : null,
+          splashColor: Colors.transparent,
+          onHover: (hovering) {
+            setState(() {
+              _isHovered = hovering;
+            });
+          },
+          onHighlightChanged: (highlighted) {
+            setState(() {
+              _isPressed = highlighted;
+            });
+          },
+          child: Container(
+            constraints: BoxConstraints(
+              maxHeight: radioButton.sizeMaxHeight,
+              minHeight: radioButton.sizeMinHeight,
+              minWidth: radioButton.sizeMinWidth,
+            ),
+            color: _isPressed ? radioButtonBackgroundModifier.getBackgroundColor(radioButtonState) : Colors.transparent,
+            child: Center(
+              child: SizedBox(
+                width: radioButton.sizeIndicator,
+                height: radioButton.sizeIndicator,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    // --- Decorated back-end : border, radius, etc.
+                    DecoratedBox(
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                          color: radioButtonBorderModifier.getBorderColor(radioButtonState, widget.isError, _selected,_isHighContrast),
+                          width: radioButtonBorderModifier.getBorderWidth(radioButtonState, _selected, radioButton),
+                        ),
+                        borderRadius: BorderRadius.circular(
+                          radioButtonBorderModifier.getBorderRadius(radioButton),
+                        ),
                       ),
                     ),
-                  ),
 
-                  // --- Tick selected
-                  if (_selected)
-                    Center(
-                      child: SvgPicture.asset(
-                        AppAssets.icons.radioSelected,
-                        package: OudsTheme.of(context).packageName,
-                        fit: BoxFit.contain,
-                        colorFilter: ColorFilter.mode(
-                          radioButtonTickModifier.getTickColor(radioButtonState, widget.isError,_isHighContrast),
-                          BlendMode.srcIn,
+                    // --- Tick selected
+                    if (_selected)
+                      Center(
+                        child: SvgPicture.asset(
+                          excludeFromSemantics: true,
+                          AppAssets.icons.radioSelected,
+                          package: OudsTheme.of(context).packageName,
+                          fit: BoxFit.contain,
+                          colorFilter: ColorFilter.mode(
+                            radioButtonTickModifier.getTickColor(radioButtonState, widget.isError,_isHighContrast),
+                            BlendMode.srcIn,
+                          ),
                         ),
                       ),
-                    ),
-                ],
+                  ],
+                ),
               ),
             ),
           ),

ouds_core/lib/components/radio_button/ouds_radio_button_item.dart

@@ -17,7 +17,6 @@ library;
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/control/ouds_control_item.dart';
 import 'package:ouds_core/components/radio_button/ouds_radio_button.dart';
-
 ///
 /// [OUDS Radio Button Design Guidelines](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button)
 ///

ouds_core/lib/components/switch/ouds_switch_item.dart

@@ -100,7 +100,7 @@ class OudsSwitchButtonItem extends StatelessWidget {
       toggled: value,
       readOnly: readOnly,
       enabled: onChanged != null && !readOnly,
-      hint: isError ? l10n?.core_switch_error_a11y : null,
+      hint: isError ? l10n?.core_common_onError_a11y : null,
       child: OudsControlItem(
         text: title,
         helperText: helperTitle,

ouds_core/lib/l10n/gen/ouds_localizations.dart

@@ -101,6 +101,24 @@ abstract class OudsLocalizations {
     Locale('en')
   ];
 
+  /// No description provided for @core_common_onError_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Is on error'**
+  String get core_common_onError_a11y;
+
+  /// No description provided for @core_common_selected_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Selected'**
+  String get core_common_selected_a11y;
+
+  /// No description provided for @core_common_not_selected_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Not selected'**
+  String get core_common_not_selected_a11y;
+
   /// No description provided for @core_button_loading_a11y.
   ///
   /// In en, this message translates to:
@@ -179,23 +197,17 @@ abstract class OudsLocalizations {
   /// **'Not checked'**
   String get core_checkbox_not_checked_a11y;
 
-  /// No description provided for @core_checkbox_error_a11y.
-  ///
-  /// In en, this message translates to:
-  /// **'Error'**
-  String get core_checkbox_error_a11y;
-
   /// No description provided for @core_checkbox_indeterminate_a11y.
   ///
   /// In en, this message translates to:
   /// **'Indeterminate'**
   String get core_checkbox_indeterminate_a11y;
 
-  /// No description provided for @core_switch_error_a11y.
+  /// No description provided for @core_radioButton_radioButton_a11y.
   ///
   /// In en, this message translates to:
-  /// **'Error'**
-  String get core_switch_error_a11y;
+  /// **'Radio button'**
+  String get core_radioButton_radioButton_a11y;
 
   /// No description provided for @core_tag_tag_input_a11y.
   ///

ouds_core/lib/l10n/gen/ouds_localizations_ar.dart

@@ -11,6 +11,15 @@ import 'ouds_localizations.dart';
 class OudsLocalizationsAr extends OudsLocalizations {
   OudsLocalizationsAr([String locale = 'ar']) : super(locale);
 
+  @override
+  String get core_common_onError_a11y => 'يوجد خطأ';
+
+  @override
+  String get core_common_selected_a11y => 'محدد';
+
+  @override
+  String get core_common_not_selected_a11y => 'غير محدد';
+
   @override
   String get core_button_loading_a11y => 'جاري التحميل';
 
@@ -52,14 +61,11 @@ class OudsLocalizationsAr extends OudsLocalizations {
   @override
   String get core_checkbox_not_checked_a11y => 'لم يتم التحقق منها';
 
-  @override
-  String get core_checkbox_error_a11y => 'خطأ';
-
   @override
   String get core_checkbox_indeterminate_a11y => 'نصف محددة';
 
   @override
-  String get core_switch_error_a11y => 'خطأ';
+  String get core_radioButton_radioButton_a11y => 'زر اختيار';
 
   @override
   String get core_tag_tag_input_a11y => 'إدخال الوسم';

ouds_core/lib/l10n/gen/ouds_localizations_en.dart

@@ -11,6 +11,15 @@ import 'ouds_localizations.dart';
 class OudsLocalizationsEn extends OudsLocalizations {
   OudsLocalizationsEn([String locale = 'en']) : super(locale);
 
+  @override
+  String get core_common_onError_a11y => 'Is on error';
+
+  @override
+  String get core_common_selected_a11y => 'Selected';
+
+  @override
+  String get core_common_not_selected_a11y => 'Not selected';
+
   @override
   String get core_button_loading_a11y => 'Loading';
 
@@ -52,14 +61,11 @@ class OudsLocalizationsEn extends OudsLocalizations {
   @override
   String get core_checkbox_not_checked_a11y => 'Not checked';
 
-  @override
-  String get core_checkbox_error_a11y => 'Error';
-
   @override
   String get core_checkbox_indeterminate_a11y => 'Indeterminate';
 
   @override
-  String get core_switch_error_a11y => 'Error';
+  String get core_radioButton_radioButton_a11y => 'Radio button';
 
   @override
   String get core_tag_tag_input_a11y => 'Tag Input';

ouds_core/lib/l10n/ouds_flutter_ar.arb

@@ -1,4 +1,9 @@
 {
+    "@_OUDS_COMMON": {},
+    "core_common_onError_a11y": "يوجد خطأ",
+    "core_common_selected_a11y": "محدد",
+    "core_common_not_selected_a11y": "غير محدد",
+
     "@_OUDS_BUTTON": {},
     "core_button_loading_a11y": "جاري التحميل",
     "core_button_icon_only_a11y": "أيقونة",
@@ -19,11 +24,10 @@
     "core_checkbox_indeterminateCheckbox_a11y": "خانة اختيار ثلاثية الحالات",
     "core_checkbox_checked_a11y": "تم الفحص",
     "core_checkbox_not_checked_a11y": "لم يتم التحقق منها",
-    "core_checkbox_error_a11y": "خطأ",
     "core_checkbox_indeterminate_a11y": "نصف محددة",
 
-    "@_OUDS_Switch": {},
-    "core_switch_error_a11y": "خطأ",
+    "@_OUDS_RadioButton": {},
+    "core_radioButton_radioButton_a11y": "زر اختيار",
 
     "@_OUDS_TAG": {},
     "core_tag_tag_input_a11y":  "إدخال الوسم",

ouds_core/lib/l10n/ouds_flutter_en.arb

@@ -1,4 +1,9 @@
 {
+    "@_OUDS_COMMON": {},
+    "core_common_onError_a11y": "Is on error",
+    "core_common_selected_a11y": "Selected",
+    "core_common_not_selected_a11y": "Not selected",
+
     "@_OUDS_BUTTON": {},
     "core_button_loading_a11y": "Loading",
     "core_button_icon_only_a11y": "Icon",
@@ -19,11 +24,11 @@
     "core_checkbox_indeterminateCheckbox_a11y": "Indeterminate checkbox",
     "core_checkbox_checked_a11y": "Checked",
     "core_checkbox_not_checked_a11y": "Not checked",
-    "core_checkbox_error_a11y": "Error",
     "core_checkbox_indeterminate_a11y": "Indeterminate",
 
-    "@_OUDS_Switch": {},
-    "core_switch_error_a11y": "Error",
+    "@_OUDS_RadioButton": {},
+    "core_radioButton_radioButton_a11y":  "Radio button",
+
 
     "@_OUDS_TAG": {},
     "core_tag_tag_input_a11y":  "Tag Input",