fix: Correct display issues in orange compact components and accessibility issues

NOTICE.txt

@@ -81,7 +81,6 @@ ouds-flutter/app/assets/orange/functional/navigation/filters.svg
 ouds-flutter/app/assets/orange_compact/functional/navigation/filters.svg
 
 ## OUDS / Themes / Orange
-ouds_theme_orange/assets/ic_bullet_rounded.svg
 ouds_theme_orange/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_orange/assets/communication/security-and-safety/lock.svg
 ouds_theme_orange/assets/component/alert/important-fill.svg
@@ -126,7 +125,6 @@ ouds_theme_orange/fonts/SF-Pro-Display-Black-Regular.ttf
 ouds_theme_orange/fonts/SF-Pro-Display-Black-Thin.ttf
 
 ## OUDS / Themes / Orange Compact
-ouds_theme_orange_compact/assets/ic_bullet_rounded.svg
 ouds_theme_orange_compact/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_orange_compact/assets/communication/security-and-safety/lock.svg
 ouds_theme_orange_compact/assets/component/alert/important-fill.svg
@@ -170,7 +168,6 @@ ouds_theme_orange_compact/fonts/SF-Pro-Display-Black-Regular.ttf
 ouds_theme_orange_compact/fonts/SF-Pro-Display-Black-Thin.ttf
 
 ## OUDS / Themes / Sosh
-ouds_theme_sosh/assets/ic_bullet_rounded.svg
 ouds_theme_orange/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_sosh/assets/communication/security-and-safety/lock.svg
 ouds_theme_sosh/assets/component/alert/important-fill.svg
@@ -208,7 +205,6 @@ ouds_theme_sosh/fonts/Sosh-Regular.ttf
 ouds_theme_sosh/fonts/Sosh-Thin.ttf
 
 ## OUDS / Themes / Wireframe
-ouds_theme_wireframe/assets/ic_bullet_rounded.svg
 ouds_theme_orange/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_wireframe/assets/communication/security-and-safety/lock.svg
 ouds_theme_wireframe/assets/component/alert/important-fill.svg

app/CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.1.2...develop)
 ### Added
+- [Library] `Filter chip` Apply high contrast theme to filter chip (selected) ([#494](https://github.com/Orange-OpenSource/ouds-flutter/issues/494))
 - [DemoApp] Improve theme selections and tuning ([#356](https://github.com/Orange-OpenSource/ouds-flutter/issues/356))
 - [DemoApp][Library] Add french Language ([#638](https://github.com/Orange-OpenSource/ouds-flutter/issues/638))
 - [DemoApp][Library] Update the components definitions where relevant ([#549](https://github.com/Orange-OpenSource/ouds-flutter/issues/549))
@@ -16,6 +17,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [DemoApp][Library] Update uses icons of status in `badge` and `tag` ([#597](https://github.com/Orange-OpenSource/ouds-flutter/issues/597))
 
 ### Fixed
+- [Library] `orange compact` some components are not displayed correctly ([#630](https://github.com/Orange-OpenSource/ouds-flutter/issues/630))
+- [Library] `Password Input` Change the accessible name on show/hide button ([#599](https://github.com/Orange-OpenSource/ouds-flutter/issues/599))
+- [Library] `Password input` Hidden password is clearly read by screen readers([#488](https://github.com/Orange-OpenSource/ouds-flutter/issues/488))
+- [Library] `Suggestion Chip` Wrong label([#519](https://github.com/Orange-OpenSource/ouds-flutter/issues/519))
+- [Library] `Filter Chip` No button role on filter chip([#482](https://github.com/Orange-OpenSource/ouds-flutter/issues/482))
+- [Library] `Pin Code Input` Role is missing on digit code input([#486](https://github.com/Orange-OpenSource/ouds-flutter/issues/486))
+- [Library] `Pin Code Input` Read helper text with the group label([#487](https://github.com/Orange-OpenSource/ouds-flutter/issues/487))
 - [DemoApp] `About` Text Overflow Issue in Arabic language  ([#640](https://github.com/Orange-OpenSource/ouds-flutter/issues/640))
 - [Library] `Checkbox` Incorrect accessibility label ([#514](https://github.com/Orange-OpenSource/ouds-flutter/issues/514))
 - [Library] `Input Tag` The whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481))

ouds_core/CHANGELOG.md

@@ -6,6 +6,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.1.2...develop)
 ### Added
+- [Library] `Filter chip` Apply high contrast theme to filter chip (selected) ([#494](https://github.com/Orange-OpenSource/ouds-flutter/issues/494))
 - [Library] Add french Language ([#638](https://github.com/Orange-OpenSource/ouds-flutter/issues/638))
 - [Library] Update the components definitions where relevant ([#549](https://github.com/Orange-OpenSource/ouds-flutter/issues/549))
 - [Library] Manage Helvetica Neue Arabic font ([#404](https://github.com/Orange-OpenSource/ouds-flutter/issues/404))
@@ -15,6 +16,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Library] Update uses icons of status in `badge` and `tag` ([#597](https://github.com/Orange-OpenSource/ouds-flutter/issues/597))
 
 ### Fixed
+- [Library] `orange compact` some components are not displayed correctly ([#630](https://github.com/Orange-OpenSource/ouds-flutter/issues/630))
+- [Library] `Password Input` Change the accessible name on show/hide button ([#599](https://github.com/Orange-OpenSource/ouds-flutter/issues/599))
+- [Library] `Password input` Hidden password is clearly read by screen readers([#488](https://github.com/Orange-OpenSource/ouds-flutter/issues/488))
+- [Library] `Suggestion Chip` Wrong label([#519](https://github.com/Orange-OpenSource/ouds-flutter/issues/519))
+- [Library] `Filter Chip` No button role on filter chip([#482](https://github.com/Orange-OpenSource/ouds-flutter/issues/482))
+- [Library] `Pin Code Input` Role is missing on digit code input([#486](https://github.com/Orange-OpenSource/ouds-flutter/issues/486))
+- [Library] `Pin Code Input` Read helper text with the group label([#487](https://github.com/Orange-OpenSource/ouds-flutter/issues/487))
 - [Library] `Checkbox` Incorrect accessibility label ([#514](https://github.com/Orange-OpenSource/ouds-flutter/issues/514))
 - [Library] `Input Tag` The whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481))
 

ouds_core/lib/components/button/internal/ouds_button_border_modifier.dart

@@ -32,13 +32,13 @@ class OudsButtonBorderModifier {
         if (buttonState == OudsButtonControlState.loading) {
           return OudsButtonLoadingModifier.getBorderColor(context, appearance);
         }
-        if (states.contains(WidgetState.pressed)) {
+        if (states.contains(WidgetState.pressed) || (buttonState != null && buttonState == OudsButtonControlState.pressed)) {
           return _getPressedBorderColor(context, appearance);
         } else if (states.contains(WidgetState.hovered)) {
           return _getHoverBorderColor(context, appearance);
         } else if (states.contains(WidgetState.disabled)) {
           return _getDisabledBorderColor(context, appearance);
-        } else if (states.contains(WidgetState.focused)) {
+        } else if (states.contains(WidgetState.focused) || (buttonState != null && buttonState == OudsButtonControlState.focused)) {
           return _getFocusedBorderColor(context, appearance);
         }
         return _getEnabledBorderColor(context, appearance);
@@ -123,14 +123,16 @@ class OudsButtonBorderModifier {
     }
   }
 
-  static double getDoubleRadiusFocus(BuildContext context) {
+  /// Static method to get the border radius for a button in focus state based on the border parameter.
+  /// Returns a [BorderRadius] object with the appropriate radius value.
+  static BorderRadius getBorderRadiusFocus(BuildContext context) {
     final button = OudsTheme.of(context).componentsTokens(context).button;
     final buttonRounded = OudsThemeConfigModel.of(context)?.button?.rounded ?? false;
     switch (buttonRounded) {
       case true:
-        return button.borderRadiusRounded + OudsTheme.of(context).borderTokens.widthFocus;
+        return BorderRadius.circular(button.borderRadiusRounded + (OudsTheme.of(context).borderTokens.widthFocus / 1.2));
       case false:
-        return button.borderRadiusDefault ;
+        return BorderRadius.circular(button.borderRadiusDefault ) ;
     }
   }
 }

ouds_core/lib/components/button/internal/ouds_button_style_modifier.dart

@@ -34,9 +34,6 @@ class OudsButtonStyleModifier {
       foregroundColor: OudsButtonForegroundModifier.resolveForegroundColor(context, appearance, buttonState),
       splashFactory: NoSplash.splashFactory,
       overlayColor: WidgetStateProperty.all(Colors.transparent),
-      textStyle: WidgetStateProperty.all<TextStyle>(
-        OudsTheme.of(context).typographyTokens.typeLabelStrongLarge(context),
-      ),
       side: OudsButtonBorderModifier.resolveBorderColor(context, appearance, buttonState),
       shape: WidgetStateProperty.all<RoundedRectangleBorder>(
         RoundedRectangleBorder(

ouds_core/lib/components/button/ouds_button.dart

@@ -230,36 +230,53 @@ class _OudsButtonState extends State<OudsButton> {
       debugPrint("Warning: ${e.toString()}");
     }
 
-    return Container(
-      decoration: BoxDecoration(
-        border: OudsBorder().borderAll(
-          color: _isFocused
-              ? OudsTheme.of(context).colorScheme(context).borderFocus
-              : Colors.transparent,
-          width: borderTokens.widthFocus / 2,
-        ),
-          borderRadius: BorderRadiusGeometry.circular(
-            OudsButtonBorderModifier.getDoubleRadiusFocus(context),
-          )
-      ),
-      child: Container(
-        decoration: BoxDecoration(
-            border: OudsBorder().borderAll(
-              color: _isFocused
-                  ? OudsTheme.of(context).colorScheme(context).borderFocusInset
-                  : Colors.transparent,
-              width: borderTokens.widthFocusInset,
+      final oudsTheme = OudsTheme.of(context);
+      // Get the button's radius so the focus border matches.
+      final buttonBorderRadius = OudsButtonBorderModifier.getBorderRadiusFocus(context);
+
+      return _isFocused
+          ? Stack(
+        clipBehavior: Clip.none, // Allows the border to overflow slightly if necessary.
+        alignment: Alignment.center,
+        children: [
+          // The button itself. It defines the size of the Stack.
+        _buildLayout(context, buttonState),
+
+        // The focus border, drawn on top.
+        // IgnorePointer prevents this border from intercepting clicks.
+        Positioned.fill(
+          //the focus border should be outside
+          left: - oudsTheme.borderTokens.widthFocus,
+          right: - oudsTheme.borderTokens.widthFocus,
+          bottom: - oudsTheme.borderTokens.widthFocus,
+          top: - oudsTheme.borderTokens.widthFocus,
+          child: IgnorePointer(
+            child: Container(
+              decoration: BoxDecoration(
+                border: OudsBorder().borderAll(
+                  color: oudsTheme.colorScheme(context).borderFocus,
+                  width: oudsTheme.borderTokens.widthFocus / 2,
+                ),
+                // The border radius should match the button's radius.
+                borderRadius: buttonBorderRadius,
+              ),
+              child: Container(
+                  decoration: BoxDecoration(
+                      border: OudsBorder().borderAll(
+                        color: OudsTheme.of(context).colorScheme(context).borderFocusInset,
+                        width: borderTokens.widthFocusInset,
+                      ),
+                      borderRadius: buttonBorderRadius
+                  ),
             ),
-            borderRadius: BorderRadiusGeometry.circular(
-              OudsButtonBorderModifier.getDoubleRadiusFocus(context),
-            )
-        ),
-        child: _buildLayout(
-          context,
-          buttonState,
+          ),
+          )
         ),
-      ),
-    );
+      ],
+    ) : _buildLayout(
+        context,
+        buttonState,
+      );
   }
 
   Widget _buildLayout(
@@ -353,6 +370,7 @@ class _OudsButtonState extends State<OudsButton> {
                             child: Text(
                               widget.label ?? "",
                               textAlign: TextAlign.center,
+                              style: OudsTheme.of(context).typographyTokens.typeLabelStrongLarge(context),
                             ),
                           ),
                         ],
@@ -457,6 +475,7 @@ class _OudsButtonState extends State<OudsButton> {
           child: Text(
             widget.label ?? "",
             textAlign: TextAlign.center,
+            style: OudsTheme.of(context).typographyTokens.typeLabelStrongLarge(context),
           ),
         );
         return _wrapFullWidth(buttonTextOnly);

ouds_core/lib/components/chip/internal/ouds_chip_border_modifier.dart

@@ -25,13 +25,18 @@ class OudsChipControlBorderModifier {
   OudsChipControlBorderModifier(this.context);
 
   /// Gets the borderSide based on the chip state and whether it is selected
-  Border? getBorder(OudsChipControlState state, [bool isSelected = false]) {
+  Border? getBorder(OudsChipControlState state, bool isHighContrast, [bool isSelected = false]) {
     final chipToken = OudsTheme.of(context).componentsTokens(context).chip;
+    final highContrastColor = OudsTheme.of(context).colorScheme(context).contentDefault;
 
     if (isSelected) {
       switch (state) {
         case OudsChipControlState.enabled:
-          return OudsBorder().borderAll(color: chipToken.colorBorderSelectedEnabled, width: chipToken.borderWidthSelected);
+        // In order to reach the a11y AAA level, the selected chip is black
+          return OudsBorder().borderAll(color: isHighContrast
+              ? highContrastColor
+              : chipToken.colorBorderSelectedEnabled,
+              width: chipToken.borderWidthSelected);
         case OudsChipControlState.disabled:
           return OudsBorder().borderAll(color: chipToken.colorBorderSelectedDisabled, width: chipToken.borderWidthSelected);
         case OudsChipControlState.hovered:

ouds_core/lib/components/chip/internal/ouds_chip_icon_style_modifier.dart

@@ -22,13 +22,17 @@ class OudsChipControlIconColorModifier {
   OudsChipControlIconColorModifier(this.context);
 
   /// Returns the icon color based on chip state and selection
-  Color getIconColor(OudsChipControlState state, [bool isSelected = false]) {
+  Color getIconColor(OudsChipControlState state, bool isHighContrast,[bool isSelected = false]) {
     final chipToken = OudsTheme.of(context).componentsTokens(context).chip;
+    final highContrastColor = OudsTheme.of(context).colorScheme(context).contentDefault;
 
     // Assuming selected icon color == tick color
     switch (state) {
       case OudsChipControlState.enabled:
-        return isSelected ? chipToken.colorContentSelectedEnabled : chipToken.colorContentUnselectedEnabled;
+      // In order to reach the a11y AAA level, the selected icon chip is black
+        return isSelected ? (isHighContrast
+            ? highContrastColor
+            : chipToken.colorContentSelectedEnabled) : chipToken.colorContentUnselectedEnabled;
       case OudsChipControlState.disabled:
         return isSelected ? chipToken.colorContentSelectedDisabled : chipToken.colorContentUnselectedDisabled;
       case OudsChipControlState.hovered:
@@ -41,12 +45,14 @@ class OudsChipControlIconColorModifier {
   }
 
   /// Returns the tick color (always used when selected)
-  Color getTickColor(OudsChipControlState state) {
+  Color getTickColor(OudsChipControlState state, bool isHighContrast) {
     final chipToken = OudsTheme.of(context).componentsTokens(context).chip;
+    final highContrastColor = OudsTheme.of(context).colorScheme(context).contentDefault;
 
     switch (state) {
       case OudsChipControlState.enabled:
-        return chipToken.colorContentSelectedTickEnabled;
+      // In order to reach the a11y AAA level, the tick icon chip is black
+        return isHighContrast ? highContrastColor : chipToken.colorContentSelectedTickEnabled;
       case OudsChipControlState.disabled:
         return chipToken.colorContentSelectedDisabled;
       case OudsChipControlState.hovered:

ouds_core/lib/components/chip/internal/ouds_chip_text_style_modifier.dart

@@ -22,13 +22,15 @@ class OudsChipControlTextColorModifier {
   OudsChipControlTextColorModifier(this.context);
 
   /// Returns the text color based on chip state and selection
-  Color? getTextColor(OudsChipControlState state, [bool isSelected = false]) {
+  Color? getTextColor(OudsChipControlState state, bool isHighContrast, [bool isSelected = false]) {
     final chipToken = OudsTheme.of(context).componentsTokens(context).chip;
+    final highContrastColor = OudsTheme.of(context).colorScheme(context).contentDefault;
 
     if (isSelected) {
       switch (state) {
         case OudsChipControlState.enabled:
-          return chipToken.colorContentSelectedEnabled;
+        // In order to reach the a11y AAA level, the text of selected chip is black
+          return isHighContrast? highContrastColor : chipToken.colorContentSelectedEnabled;
         case OudsChipControlState.disabled:
           return chipToken.colorContentSelectedDisabled;
         case OudsChipControlState.hovered:
@@ -41,7 +43,8 @@ class OudsChipControlTextColorModifier {
     } else {
       switch (state) {
         case OudsChipControlState.enabled:
-          return chipToken.colorContentUnselectedEnabled;
+        // In order to reach the a11y AAA level, the text of chip is black
+          return isHighContrast ? highContrastColor : chipToken.colorContentUnselectedEnabled;
         case OudsChipControlState.disabled:
           return chipToken.colorContentUnselectedDisabled;
         case OudsChipControlState.hovered: