@pagopa/io-app-design-system 1.30.0 → 1.31.0

package/src/components/radio/RadioButtonLabel.tsx

@@ -49,13 +49,18 @@ export const RadioButtonLabel = ({
 
   return (
     <Pressable
-      disabled={disabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
       onPress={toggleRadioButton}
-      testID="AnimatedRadioButton"
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
+      disabled={disabled}
+      testID="AnimatedRadioButton"
     >
       <View
         style={[

package/src/components/switch/AnimatedSwitch.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing,
-  interpolateColor
+  withTiming
 } from "react-native-reanimated";
-import { IOColors } from "../../core/IOColors";
 import { IOSpringValues } from "../../core/IOAnimations";
-import { AnimatedTick } from "../common/AnimatedTick";
+import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
+import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
   checked?: boolean;
@@ -106,6 +106,7 @@ export const AnimatedSwitch = ({ checked, onPress, disabled }: OwnProps) => {
 
   return (
     <Pressable
+      accessibilityRole="switch"
       disabled={disabled}
       testID="AnimatedSwitch"
       onPress={onPress}

package/src/components/switch/SwitchLabel.tsx

@@ -78,11 +78,16 @@ export const SwitchLabel = ({
     <Pressable
       disabled={disabled}
       onPress={toggleCheckbox}
-      testID="AnimatedCheckbox"
+      accessibilityRole="switch"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
+      testID="SwitchLabel"
     >
       <View
         style={[

package/src/components/textInput/TextInputBase.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-native";
 import Animated, {
   Easing,
+  WithTimingConfig,
   useAnimatedStyle,
   useSharedValue,
   withTiming
@@ -17,7 +18,8 @@ import {
   IOColors,
   IOSpacingScale,
   IOStyles,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
@@ -161,6 +163,8 @@ export const TextInputBase = ({
   isPassword,
   autoFocus
 }: InputTextProps) => {
+  const theme = useIOTheme();
+
   const labelSharedValue = useSharedValue<boolean>(false);
   const [inputStatus, setInputStatus] = React.useState<InputStatus>(
     disabled ? "disabled" : "initial"
@@ -177,7 +181,7 @@ export const TextInputBase = ({
   const boxStyle: ViewStyle = useMemo(() => {
     if (inputStatus === "focused") {
       return {
-        borderColor: IOColors["blueIO-500"],
+        borderColor: IOColors[theme["interactiveElem-default"]],
         borderWidth: 2
       };
     }
@@ -191,20 +195,17 @@ export const TextInputBase = ({
       borderColor: IOColors["grey-200"],
       borderWidth: 1
     };
-  }, [inputStatus]);
+  }, [inputStatus, theme]);
+
+  const easingConf: WithTimingConfig = {
+    duration: 300,
+    easing: Easing.elastic(0.85)
+  };
 
   const animatedLabelProps = useAnimatedStyle(() => ({
-    fontSize: withTiming(labelSharedValue.value ? 12 : 16, {
-      duration: 300,
-      easing: Easing.elastic(0.85)
-    }),
+    fontSize: withTiming(labelSharedValue.value ? 12 : 16, easingConf),
     transform: [
-      {
-        translateY: withTiming(labelSharedValue.value ? -14 : 0, {
-          duration: 300,
-          easing: Easing.elastic(0.85)
-        })
-      }
+      { translateY: withTiming(labelSharedValue.value ? -14 : 0, easingConf) }
     ]
   }));
 
@@ -294,6 +295,8 @@ export const TextInputBase = ({
             labelSharedValue.value = true;
             onFocus?.();
           }}
+          selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret iOS
+          cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
           maxLength={counterLimit}
           onBlur={onBlurHandler}
           value={inputValue}

package/src/core/IOStyles.ts

@@ -370,7 +370,7 @@ export const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams =
     paddingHorizontal: IOVisualCostants.appMarginDefault,
     iconMargin: 8,
     iconSize: 24,
-    actionMargin: 16,
+    actionMargin: 8,
     descriptionMargin: 4
   };