@pagopa/io-app-design-system 1.25.1 → 1.27.0

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
         {
           "alignContent": "center",
           "alignItems": "flex-start",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
         },
@@ -186,8 +187,11 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             }
           >
             <Text
+              accessibilityElementsHidden={true}
+              accessible={false}
               allowFontScaling={true}
               ellipsizeMode="tail"
+              importantForAccessibility="no-hide-descendants"
               maxFontSizeMultiplier={1.3}
               numberOfLines={1}
               style={
@@ -353,6 +357,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         {
           "alignContent": "center",
           "alignItems": "flex-start",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
         },
@@ -501,8 +506,11 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           >
             <Text
+              accessibilityElementsHidden={true}
+              accessible={false}
               allowFontScaling={false}
               ellipsizeMode="tail"
+              importantForAccessibility="no-hide-descendants"
               maxFontSizeMultiplier={1.3}
               numberOfLines={1}
               style={

package/src/components/buttons/ButtonExtendedOutline.tsx

@@ -13,9 +13,9 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import { IOColors, IOScaleValues, IOSpringValues, IOStyles } from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { H6, LabelSmall } from "../typography";
-import { IOScaleValues, IOSpringValues, IOColors, IOStyles } from "../../core";
 
 type Props = {
   label: string;
@@ -33,7 +33,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 16,
     borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
+    borderCurve: "continuous",
+    borderColor: IOColors["grey-100"],
     backgroundColor: IOColors.white,
     borderStyle: "solid",
     borderWidth: 1

package/src/components/buttons/ButtonLink.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useMemo } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -112,18 +117,21 @@ const IOButtonLegacyStylesLocal = StyleSheet.create({
   }
 });
 
-export const ButtonLink = React.memo(
-  ({
-    color = "primary",
-    label,
-    disabled = false,
-    icon,
-    iconPosition = "start",
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    testID
-  }: ButtonLinkProps) => {
+export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
+  (
+    {
+      color = "primary",
+      label,
+      disabled = false,
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      testID
+    },
+    ref
+  ) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
 
@@ -203,6 +211,7 @@ export const ButtonLink = React.memo(
 
     return (
       <Pressable
+        ref={ref}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole={"button"}
@@ -246,6 +255,9 @@ export const ButtonLink = React.memo(
             </>
           )}
           <Animated.Text
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
             style={[
               buttonStylesLocal.label,
               disabled

package/src/components/buttons/ButtonOutline.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -213,183 +218,191 @@ const IOButtonStylesLocal = StyleSheet.create({
   }
 });
 
-export const ButtonOutline = ({
-  color = "primary",
-  label,
-  fullWidth = false,
-  disabled = false,
-  icon,
-  iconPosition = "start",
-  onPress,
-  accessibilityLabel,
-  accessibilityHint,
-  testID
-}: ButtonOutline) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  const colorMap = React.useMemo(
-    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
-  );
-
-  const buttonStyles = React.useMemo(
-    () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
-    [isExperimental]
-  );
-
-  const buttonStylesLocal = React.useMemo(
-    () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
-    [isExperimental]
-  );
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
+  (
+    {
+      color = "primary",
+      label,
+      fullWidth = false,
+      disabled = false,
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      testID
+    },
+    ref
+  ) => {
+    const { isExperimental } = useIOExperimentalDesign();
+    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
+    const colorMap = React.useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
 
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].background.default, colorMap[color].background.pressed]
+    const buttonStyles = React.useMemo(
+      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+      [isExperimental]
     );
 
-    const borderColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].border.default, colorMap[color].border.pressed]
+    const buttonStylesLocal = React.useMemo(
+      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+      [isExperimental]
     );
+    // Scaling transformation applied when the button is pressed
+    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
+    // Using a spring-based animation for our interpolations
+    const progressPressed = useDerivedValue(() =>
+      withSpring(isPressed.value, IOSpringValues.button)
     );
 
-    return {
-      borderColor,
-      backgroundColor,
-      transform: [{ scale }]
-    };
-  });
+    // Interpolate animation values from `isPressed` values
+    const pressedAnimationStyle = useAnimatedStyle(() => {
+      // Link color states to the pressed states
+      const backgroundColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].background.default, colorMap[color].background.pressed]
+      );
 
-  const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
+      const borderColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].border.default, colorMap[color].border.pressed]
+      );
 
-    const labelColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].border.default, colorMap[color].border.pressed]
-    );
+      // Scale down button slightly when pressed
+      const scale = interpolate(
+        progressPressed.value,
+        [0, 1],
+        [1, animationScaleValue],
+        Extrapolate.CLAMP
+      );
 
-    return {
-      color: labelColor
-    };
-  });
+      return {
+        borderColor,
+        backgroundColor,
+        transform: [{ scale }]
+      };
+    });
 
-  // Animate the <Icon> color prop
-  const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-    const iconColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].label.default, colorMap[color].label.pressed]
-    );
-    return { color: iconColor };
-  });
+    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
+      // Link color states to the pressed states
 
-  const AnimatedIconClassComponent =
-    Animated.createAnimatedComponent(IconClassComponent);
+      const labelColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].border.default, colorMap[color].border.pressed]
+      );
 
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+      return {
+        color: labelColor
+      };
+    });
 
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={"button"}
-      testID={testID}
-      onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      disabled={disabled}
-      style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
-    >
-      <Animated.View
-        style={[
-          buttonStyles.button,
-          isExperimental && fullWidth && { paddingHorizontal: 16 },
-          buttonStylesLocal.buttonWithBorder,
-          buttonStyles.buttonSizeDefault,
-          iconPosition === "end" && { flexDirection: "row-reverse" },
-          disabled
-            ? {
-                backgroundColor: colorMap[color]?.background?.disabled,
-                borderColor: colorMap[color]?.border?.disabled,
-                opacity: DISABLED_OPACITY
-              }
-            : {
-                backgroundColor: colorMap[color]?.background?.default,
-                borderColor: colorMap[color]?.border.default
-              },
-          /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
-          !disabled && pressedAnimationStyle
-        ]}
+    // Animate the <Icon> color prop
+    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
+      const iconColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].label.default, colorMap[color].label.pressed]
+      );
+      return { color: iconColor };
+    });
+
+    const AnimatedIconClassComponent =
+      Animated.createAnimatedComponent(IconClassComponent);
+
+    const onPressIn = useCallback(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 1;
+    }, [isPressed]);
+    const onPressOut = useCallback(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 0;
+    }, [isPressed]);
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={"button"}
+        testID={testID}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessible={true}
+        disabled={disabled}
+        style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
       >
-        {icon && (
-          <>
-            {!disabled ? (
-              <AnimatedIconClassComponent
-                name={icon}
-                animatedProps={pressedColorIconAnimationStyle}
-                color={colorMap[color]?.label?.default}
-                size={iconSize}
-              />
-            ) : (
-              <AnimatedIcon
-                name={icon}
-                color={colorMap[color]?.label?.disabled}
-                size={iconSize}
-              />
-            )}
-            <HSpacer size={8} />
-          </>
-        )}
-        <Animated.Text
+        <Animated.View
           style={[
-            buttonStylesLocal.label,
-            buttonStyles.label,
+            buttonStyles.button,
+            isExperimental && fullWidth && { paddingHorizontal: 16 },
+            buttonStylesLocal.buttonWithBorder,
+            buttonStyles.buttonSizeDefault,
+            iconPosition === "end" && { flexDirection: "row-reverse" },
             disabled
-              ? { color: colorMap[color]?.label?.disabled }
-              : { color: colorMap[color]?.label?.default },
-            !disabled && pressedColorLabelAnimationStyle
+              ? {
+                  backgroundColor: colorMap[color]?.background?.disabled,
+                  borderColor: colorMap[color]?.border?.disabled,
+                  opacity: DISABLED_OPACITY
+                }
+              : {
+                  backgroundColor: colorMap[color]?.background?.default,
+                  borderColor: colorMap[color]?.border.default
+                },
+            /* Prevent Reanimated from overriding background colors
+                    if button is disabled */
+            !disabled && pressedAnimationStyle
           ]}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-          allowFontScaling={isExperimental}
-          maxFontSizeMultiplier={1.3}
-          importantForAccessibility="no-hide-descendants"
         >
-          {label}
-        </Animated.Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
+          {icon && (
+            <>
+              {!disabled ? (
+                <AnimatedIconClassComponent
+                  name={icon}
+                  animatedProps={pressedColorIconAnimationStyle}
+                  color={colorMap[color]?.label?.default}
+                  size={iconSize}
+                />
+              ) : (
+                <AnimatedIcon
+                  name={icon}
+                  color={colorMap[color]?.label?.disabled}
+                  size={iconSize}
+                />
+              )}
+              <HSpacer size={8} />
+            </>
+          )}
+          <Animated.Text
+            style={[
+              buttonStylesLocal.label,
+              buttonStyles.label,
+              disabled
+                ? { color: colorMap[color]?.label?.disabled }
+                : { color: colorMap[color]?.label?.default },
+              !disabled && pressedColorLabelAnimationStyle
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            allowFontScaling={isExperimental}
+            maxFontSizeMultiplier={1.3}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            {label}
+          </Animated.Text>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
 
 export default ButtonOutline;

package/src/components/buttons/ButtonSolid.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
@@ -155,20 +160,23 @@ const mapLegacyColorStates: Record<
   }
 };
 
-export const ButtonSolid = React.memo(
-  ({
-    color = "primary",
-    label,
-    fullWidth = false,
-    disabled = false,
-    loading = false,
-    icon,
-    iconPosition = "start",
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    testID
-  }: ButtonSolidProps) => {
+export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
+  (
+    {
+      color = "primary",
+      label,
+      fullWidth = false,
+      disabled = false,
+      loading = false,
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      testID
+    },
+    ref
+  ) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
     // Scaling transformation applied when the button is pressed
@@ -253,6 +261,7 @@ export const ButtonSolid = React.memo(
     return (
       <Pressable
         testID={testID}
+        ref={ref}
         accessible={true}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
@@ -320,6 +329,8 @@ export const ButtonSolid = React.memo(
                 ellipsizeMode="tail"
                 allowFontScaling={isExperimental}
                 maxFontSizeMultiplier={1.3}
+                accessible={false}
+                accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
               >
                 {label}

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -39,7 +39,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
         {
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#CCD4DC",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderStyle": "solid",
           "borderWidth": 1,
@@ -233,8 +234,11 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={true}
       ellipsizeMode="tail"
+      importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
@@ -304,6 +308,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       [
         {
           "alignItems": "center",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
@@ -336,6 +341,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
@@ -411,6 +418,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
       [
         {
           "alignItems": "center",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
@@ -453,6 +461,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
       }
     >
       <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
         allowFontScaling={true}
         color="white"
         defaultColor="white"
@@ -902,7 +912,8 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#CCD4DC",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderStyle": "solid",
           "borderWidth": 1,
@@ -1096,8 +1107,11 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={false}
       ellipsizeMode="tail"
+      importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
@@ -1199,6 +1213,8 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
@@ -1315,6 +1331,8 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
         allowFontScaling={false}
         color="white"
         defaultColor="white"

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -37,7 +37,8 @@ const styles = StyleSheet.create({
     width: IOSelectionTickVisualParams.size,
     height: IOSelectionTickVisualParams.size,
     borderWidth: IOSelectionTickVisualParams.borderWidth,
-    borderRadius: checkBoxRadius
+    borderRadius: checkBoxRadius,
+    borderCurve: "continuous"
   },
   checkBoxSquare: {
     position: "absolute",
@@ -45,7 +46,8 @@ const styles = StyleSheet.create({
     top: 0,
     width: IOSelectionTickVisualParams.size,
     height: IOSelectionTickVisualParams.size,
-    borderRadius: checkBoxRadius
+    borderRadius: checkBoxRadius,
+    borderCurve: "continuous"
   }
 });