fix: Text input Incorrect reading order and trailing action (#449) (#450) (#451)

* fix: reorder the reading

* fix: exclude prefix icon role, add trailing icon button role and description

* review: accessibility

* chore: update labels

Author: nouha06

app/CHANGELOG.md

@@ -18,6 +18,8 @@ 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
+- [DemoApp][Library] `Text input` Trailing action button should have its own accessibility label ([#450](https://github.com/Orange-OpenSource/ouds-flutter/issues/450))
+- [Library] `Text input` Incorrect reading order ([#449](https://github.com/Orange-OpenSource/ouds-flutter/issues/449))
 - [DemoApp] Android The native tab-bar is displayed on top of the customize bottom sheet ([#358](https://github.com/Orange-OpenSource/ouds-flutter/issues/358))
 - [Library] `Checkbox item` + icon : wrong accessible name ([#392](https://github.com/Orange-OpenSource/ouds-flutter/issues/392))
 - [Library] `Checkbox`: hint is missing on component  ([#327](https://github.com/Orange-OpenSource/ouds-flutter/issues/391))

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -842,6 +842,12 @@ abstract class AppLocalizations {
   /// **'This field can’t be empty.'**
   String get app_components_text_input_error_label;
 
+  /// No description provided for @app_components_textInput_trailingIcon_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Trailing icon content description'**
+  String get app_components_textInput_trailingIcon_a11y;
+
   /// No description provided for @app_components_link_label.
   ///
   /// In en, this message translates to:

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -406,6 +406,10 @@ class AppLocalizationsAr extends AppLocalizations {
   String get app_components_text_input_error_label =>
       'لا يمكن أن يكون هذا الحقل فارغًا.';
 
+  @override
+  String get app_components_textInput_trailingIcon_a11y =>
+      'وصف محتوى أيقونة النهاية';
+
   @override
   String get app_components_link_label => 'رابط';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -406,6 +406,10 @@ class AppLocalizationsEn extends AppLocalizations {
   String get app_components_text_input_error_label =>
       'This field can’t be empty.';
 
+  @override
+  String get app_components_textInput_trailingIcon_a11y =>
+      'Trailing icon content description';
+
   @override
   String get app_components_link_label => 'Link';
 

app/lib/l10n/ouds_flutter_ar.arb

@@ -155,6 +155,7 @@
   "app_components_text_input_placeholder_label": "العنصر النائب",
   "app_components_text_input_helperText_label": "نص مساعد",
   "app_components_text_input_error_label": "لا يمكن أن يكون هذا الحقل فارغًا.",
+  "app_components_textInput_trailingIcon_a11y": "وصف محتوى أيقونة النهاية",
 
   "@_components_link": {},
   "app_components_link_label": "رابط",

app/lib/l10n/ouds_flutter_en.arb

@@ -191,6 +191,7 @@
   "app_components_text_input_placeholder_label": "Placeholder",
   "app_components_text_input_helperText_label": "Helper text",
   "app_components_text_input_error_label": "This field can’t be empty.",
+  "app_components_textInput_trailingIcon_a11y": "Trailing icon content description",
 
   "@_components_link": {},
   "app_components_link_label": "Link",

app/lib/ui/components/text_input/text_input_demo_screen.dart

@@ -146,6 +146,7 @@ class _TextInputDemoState extends State<_TextInputDemo> {
                   focusNode: textInputFocus,
                   enabled: customizationState.hasEnabled,
                   readOnly: customizationState.hasReadOnly,
+                  trailingIconContentDescription: context.l10n.app_components_textInput_trailingIcon_a11y,
                   decoration: OudsInputDecoration(
                     labelText: customizationState.labelText.isNotEmpty ? TextInputCustomizationUtils.getLabelText(customizationState) : null,
                     helperText: customizationState.helperText.isNotEmpty ? TextInputCustomizationUtils.getHelperText(customizationState) : null,
@@ -173,6 +174,7 @@ class _TextInputDemoState extends State<_TextInputDemo> {
               focusNode: textInputFocus,
               enabled: customizationState.hasEnabled,
               readOnly: customizationState.hasReadOnly,
+              trailingIconContentDescription: context.l10n.app_components_textInput_trailingIcon_a11y,
               decoration: OudsInputDecoration(
                 labelText: customizationState.labelText.isNotEmpty ? TextInputCustomizationUtils.getLabelText(customizationState) : null,
                 helperText: customizationState.helperText.isNotEmpty ? TextInputCustomizationUtils.getHelperText(customizationState) : null,

ouds_core/CHANGELOG.md

@@ -16,6 +16,8 @@ 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] `Text input` Trailing action button should have its own accessibility label ([#450](https://github.com/Orange-OpenSource/ouds-flutter/issues/450))
+- [Library] `Text input` Incorrect reading order ([#449](https://github.com/Orange-OpenSource/ouds-flutter/issues/449))
 - [Library] `Checkbox item` + icon : wrong accessible name ([#392](https://github.com/Orange-OpenSource/ouds-flutter/issues/392))
 - [Library] `Checkbox`: hint is missing on component  ([#327](https://github.com/Orange-OpenSource/ouds-flutter/issues/391))
 - [Library] Android `Switch` : remove the useless focus on switch ([#327](https://github.com/Orange-OpenSource/ouds-flutter/issues/364))

ouds_core/lib/components/button/ouds_button.dart

@@ -203,7 +203,7 @@ class _OudsButtonState extends State<OudsButton> {
     switch (buttonState) {
       case OudsButtonControlState.loading:
         return Semantics(
-          label: OudsLocalizations.of(context)?.core_button_loading_a11y,
+          label: OudsLocalizations.of(context)?.core_common_loading_a11y,
           enabled: false,
           button: true,
           child: ExcludeSemantics(
@@ -294,7 +294,7 @@ class _OudsButtonState extends State<OudsButton> {
     switch (buttonState) {
       case OudsButtonControlState.loading:
         return Semantics(
-          label: OudsLocalizations.of(context)?.core_button_loading_a11y,
+          label: OudsLocalizations.of(context)?.core_common_loading_a11y,
           enabled: false,
           button: true,
           child: IconButton(
@@ -343,7 +343,7 @@ class _OudsButtonState extends State<OudsButton> {
     switch (buttonState) {
       case OudsButtonControlState.loading:
         return Semantics(
-          label: OudsLocalizations.of(context)?.core_button_loading_a11y,
+          label: OudsLocalizations.of(context)?.core_common_loading_a11y,
           enabled: false,
           button: true,
           child: ExcludeSemantics(

ouds_core/lib/components/tag/ouds_tag.dart

@@ -195,7 +195,7 @@ class _OudsTagState extends State<OudsTag> {
                     width: widthAndHeightAssetsContainer[OudsTagDimensions.width.name],
                     height: widthAndHeightAssetsContainer[OudsTagDimensions.height.name],
                     child: Semantics(
-                      label: l10n?.core_tag_loading_a11y,
+                      label: l10n?.core_common_loading_a11y,
                       child: CircularProgressIndicator(
                         padding: tagSizeModifier.getAssetsPadding(widget.size, OudsTagLayout.textAndLoader),
                         color: tagStatusModifier.getStatusTextAndLoaderColor(widget.status, widget.hierarchy),