chore:update Bottom Bar with animation indicator (#633)(#625)(#627)(#771)

* chore:update `Bottom Bar` with animation indacator

* chore: Add border to badge in bar and textStyle

* chore: resolve a11y zoom and voiceOver

* fix: order of the accessible label sur android

* fix: switching from on/off without animation ios

* fix: VoiceOver a11y TabBar

* chore: update a11y badge text

Author: AhmedAmineZr

app/CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...develop)
 ### Added
 ### Changed
+- [Library] `tab bar component`, update the animation of the `selected tab indicator` ([#633](https://github.com/Orange-OpenSource/ouds-flutter/issues/633))
 - [DemoApp][Library] Update `ToolBar Top`, with Badge in Trailing Actions ([#642](https://github.com/Orange-OpenSource/ouds-flutter/issues/642))
 - [DemoApp][Library] update `alert message`, `switch`, `radio`, `checkbox`, `text input`, `pin code input`, `phone number input`, components to use rich text ([#782](https://github.com/Orange-OpenSource/ouds-flutter/issues/782))
 - [Library] Update text input component to v1.4 ([#692](https://github.com/Orange-OpenSource/ouds-flutter/issues/692))
@@ -24,6 +25,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [DemoApp][Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726))
 
 ### Fixed
+- [DemoApp][Library] `Bottom Bar` Inconsistent order of the accessible ([#625](https://github.com/Orange-OpenSource/ouds-flutter/issues/625))
+- [Library] `Bottom Bar` Overlap when zoom is activated ([#627](https://github.com/Orange-OpenSource/ouds-flutter/issues/627))
 - [DemoApp] Update pubspec icons 1.6 ([#794](https://github.com/Orange-OpenSource/ouds-flutter/issues/794))
 - [Library] `Password input` Label is truncated when zoom is applied ([#600](https://github.com/Orange-OpenSource/ouds-flutter/issues/600))
 - [Library] `Filter chip` is not reached by keyboard focus or Switch Access focus ([#474](https://github.com/Orange-OpenSource/ouds-flutter/issues/474))

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -1314,6 +1314,18 @@ abstract class AppLocalizations {
   /// **'Last item badge'**
   String get app_components_navigationBar_lastItemBadge_label;
 
+  /// No description provided for @app_components_navigationBar_badge_count_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'{count, plural, =1 {1 unread notification} other {{count} unread notifications}}'**
+  String app_components_navigationBar_badge_count_a11y(int count);
+
+  /// No description provided for @app_components_navigationBar_badge_dot_a11y.
+  ///
+  /// In en, this message translates to:
+  /// **'Unread notification'**
+  String get app_components_navigationBar_badge_dot_a11y;
+
   /// No description provided for @app_components_topAppBar_label.
   ///
   /// In en, this message translates to:

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -689,6 +689,24 @@ class AppLocalizationsAr extends AppLocalizations {
   String get app_components_navigationBar_lastItemBadge_label =>
       'Last item badge';
 
+  @override
+  String app_components_navigationBar_badge_count_a11y(int count) {
+    String _temp0 = intl.Intl.pluralLogic(
+      count,
+      locale: localeName,
+      other: '$count إشعار غير مقروء',
+      many: '$count إشعارًا غير مقروء',
+      few: '$count إشعارات غير مقروءة',
+      two: 'إشعاران غير مقروءين',
+      one: 'إشعار واحد غير مقروء',
+      zero: 'لا توجد إشعارات غير مقروءة',
+    );
+    return '$_temp0';
+  }
+
+  @override
+  String get app_components_navigationBar_badge_dot_a11y => 'إشعار غير مقروء';
+
   @override
   String get app_components_topAppBar_label => 'Top bar';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -689,6 +689,21 @@ class AppLocalizationsEn extends AppLocalizations {
   String get app_components_navigationBar_lastItemBadge_label =>
       'Last item badge';
 
+  @override
+  String app_components_navigationBar_badge_count_a11y(int count) {
+    String _temp0 = intl.Intl.pluralLogic(
+      count,
+      locale: localeName,
+      other: '$count unread notifications',
+      one: '1 unread notification',
+    );
+    return '$_temp0';
+  }
+
+  @override
+  String get app_components_navigationBar_badge_dot_a11y =>
+      'Unread notification';
+
   @override
   String get app_components_topAppBar_label => 'Top bar';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_fr.dart

@@ -693,6 +693,21 @@ class AppLocalizationsFr extends AppLocalizations {
   String get app_components_navigationBar_lastItemBadge_label =>
       'Last item badge';
 
+  @override
+  String app_components_navigationBar_badge_count_a11y(int count) {
+    String _temp0 = intl.Intl.pluralLogic(
+      count,
+      locale: localeName,
+      other: '$count notifications non lues',
+      one: '1 notification non lue',
+    );
+    return '$_temp0';
+  }
+
+  @override
+  String get app_components_navigationBar_badge_dot_a11y =>
+      'Notification non lue';
+
   @override
   String get app_components_topAppBar_label => 'Top bar';
 

app/lib/l10n/ouds_flutter_ar.arb

@@ -125,6 +125,15 @@
 
   "@_components_navigation_bar": {},
   "app_components_navigationBar_description_text": "Bottom bars يوفر الوصول إلى الوجهات الرئيسية للتطبيق باستخدام 3 إلى 5 علامات تبويب دائمة. يتم تمثيل كل وجهة بواسطة أيقونة وعلامة نصية اختيارية.",
+  "app_components_navigationBar_badge_count_a11y": "{count, plural, zero {لا توجد إشعارات غير مقروءة} one {إشعار واحد غير مقروء} two {إشعاران غير مقروءين} few {{count} إشعارات غير مقروءة} many {{count} إشعارًا غير مقروء} other {{count} إشعار غير مقروء}}",
+  "@app_components_navigationBar_badge_count_a11y": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "app_components_navigationBar_badge_dot_a11y": "إشعار غير مقروء",
 
   "@_components_topAppBar": {},
   "app_components_topAppBar_description_text": "Top bar هو مكون موجه من الأعلى يعرض عنوان الشاشة ويوفر الوصول إلى الإجراءات الرئيسية وعناصر التنقل.",

app/lib/l10n/ouds_flutter_en.arb

@@ -294,6 +294,15 @@
   "app_components_navigationBar_description_text": "The Bottom bar provides access to an app’s primary destinations using 3 to 5 persistent tabs. Each destination is represented by an icon and optionally a text label.",
   "app_components_navigationBar_itemCount_label": "Item count",
   "app_components_navigationBar_lastItemBadge_label": "Last item badge",
+  "app_components_navigationBar_badge_count_a11y": "{count, plural, =1 {1 unread notification} other {{count} unread notifications}}",
+  "@app_components_navigationBar_badge_count_a11y": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "app_components_navigationBar_badge_dot_a11y": "Unread notification",
 
   "@_components_topAppBar": {},
   "app_components_topAppBar_label": "Top bar",

app/lib/l10n/ouds_flutter_fr.arb

@@ -122,6 +122,15 @@
 
   "@_components_navigation_bar": {},
   "app_components_navigationBar_description_text": "Une Bottom bar (ou barre inférieure) permet d'accéder aux principales destinations d'une application grâce à 3 à 5 onglets permanents. Chaque destination est représentée par une icône et, éventuellement, par un libellé textuel.",
+  "app_components_navigationBar_badge_count_a11y": "{count, plural, =1 {1 notification non lue} other {{count} notifications non lues}}",
+  "@app_components_navigationBar_badge_count_a11y": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "app_components_navigationBar_badge_dot_a11y": "Notification non lue",
 
   "@_components_topAppBar": {},
   "app_components_topAppBar_description_text": "L'app bar (ou barre d'application) est un composant situé en haut de l'ecran qui affiche le titre et donne accès aux actions principales et aux éléments de navigation.",

app/lib/ui/components/components.dart

@@ -157,6 +157,7 @@ List<Component> components(BuildContext context) {
               onDestinationSelected: (index) {},
               translucent: true,
               destinations: NavigationBarCustomizationUtils.buildItems(
+                context: context,
                 themeController: themeController,
               ),
             ),

app/lib/ui/components/navigation/navigation_bar_customization_utils.dart

@@ -10,7 +10,9 @@
  * // Software description: Flutter library of reusable graphical components
  * //
  */
+import 'package:flutter/widgets.dart';
 import 'package:ouds_core/components/navigation/ouds_navigation_bar_item.dart';
+import 'package:ouds_flutter_demo/l10n/gen/ouds_flutter_app_localizations.dart';
 import 'package:ouds_flutter_demo/ui/components/navigation/navigation_bar_customization.dart';
 import 'package:ouds_flutter_demo/ui/components/navigation/navigation_bar_enum.dart';
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
@@ -23,39 +25,54 @@ class NavigationBarCustomizationUtils {
 
   /// Returns an optional navigation bar item badge based on the selected badge type
   /// (count badge, standard badge, or none).
-  static OudsNavigationBarItemBadge? getItemBadge(NavigationBarCustomizationState customizationState) {
+  static OudsNavigationBarItemBadge? getItemBadge(
+    NavigationBarCustomizationState customizationState,
+    BuildContext context,
+  ) {
+    final l10n = AppLocalizations.of(context)!;
+
     return customizationState.selectedItemBadge == ItemBadge.count
-        ? OudsNavigationBarItemBadge(contentDescription: "$itemBadgeCount notification unread", count: itemBadgeCount)
+        ? OudsNavigationBarItemBadge(
+            contentDescription: l10n
+                .app_components_navigationBar_badge_count_a11y(itemBadgeCount),
+            count: itemBadgeCount,
+          )
         : customizationState.selectedItemBadge == ItemBadge.dot
-            ? OudsNavigationBarItemBadge(contentDescription: "notification unread")
-            : null;
+        ? OudsNavigationBarItemBadge(
+            contentDescription:
+                l10n.app_components_navigationBar_badge_dot_a11y,
+          )
+        : null;
   }
 
   /// Generates a list of consecutive item count values from [minItemCount] to [maxItemCount] (inclusive).
-  static final itemCountOptions = List<int>.generate(maxItemCount - minItemCount + 1, (index) => minItemCount + index);
+  static final itemCountOptions = List<int>.generate(
+    maxItemCount - minItemCount + 1,
+    (index) => minItemCount + index,
+  );
 
   /// Builds a shared list of navigation bar items based on the current
   /// customization state and theme.
   static List<OudsNavigationBarItem> buildItems({
     required ThemeController themeController,
+    required BuildContext context,
     NavigationBarCustomizationState? customizationState,
     int itemCount = minItemCount,
   }) {
     final safeItemCount = itemCount.clamp(minItemCount, maxItemCount);
 
-    return List.generate(
-      safeItemCount,
-      (index) {
-        final isLastItem = index == safeItemCount - 1;
+    return List.generate(safeItemCount, (index) {
+      final isLastItem = index == safeItemCount - 1;
 
-        return OudsNavigationBarItem(
-          icon: AppAssets.icons.functionalSocialAndEngagementHeartEmpty(
-            themeController,
-          ),
-          label: 'Label', //'item ${index + 1}',
-          badge: (isLastItem && customizationState != null) ? getItemBadge(customizationState) : null,
-        );
-      },
-    );
+      return OudsNavigationBarItem(
+        icon: AppAssets.icons.functionalSocialAndEngagementHeartEmpty(
+          themeController,
+        ),
+        label: 'Label', //'item ${index + 1}',
+        badge: (isLastItem && customizationState != null)
+            ? getItemBadge(customizationState, context)
+            : null,
+      );
+    });
   }
 }