@pagopa/io-app-design-system 6.0.6 → 6.0.7

package/src/components/otpInput/OTPInput.tsx

@@ -8,10 +8,11 @@ import {
 } from "react";
 import {
   AccessibilityInfo,
-  NativeSyntheticEvent,
+  Platform,
   Pressable,
+  StyleSheet,
   TextInput,
-  TextInputKeyPressEventData,
+  TextInputKeyPressEvent,
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
@@ -35,6 +36,10 @@ type Props = {
   accessibilityLabel?: string;
   deleteButtonAccessibilityLabel?: string;
   accessibilityHint?: string;
+  accessibilityValueText?: (params: {
+    valueLength: number;
+    length: number;
+  }) => string;
   inputAccessoryViewID?: string;
   autoFocus?: boolean;
 };
@@ -60,6 +65,7 @@ export const OTPInput = forwardRef<View, Props>(
       length,
       accessibilityLabel,
       accessibilityHint,
+      accessibilityValueText,
       onValidate,
       errorMessage = "",
       secret = false,
@@ -120,10 +126,8 @@ export const OTPInput = forwardRef<View, Props>(
       handleValidate(value);
     };
 
-    const handleKeyPress = ({
-      nativeEvent
-    }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      switch (nativeEvent.key) {
+    const handleKeyPress = (e: TextInputKeyPressEvent) => {
+      switch (e.nativeEvent.key) {
         case "Backspace":
           if (deleteButtonAccessibilityLabel && value.length > 0) {
             AccessibilityInfo.announceForAccessibility(
@@ -132,7 +136,7 @@ export const OTPInput = forwardRef<View, Props>(
           }
           break;
         default:
-          AccessibilityInfo.announceForAccessibility(nativeEvent.key);
+          AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
           break;
       }
     };
@@ -147,21 +151,20 @@ export const OTPInput = forwardRef<View, Props>(
             setHasFocus(true);
           }}
           ref={ref}
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            columnGap: OTP_ITEMS_GAP
-          }}
-          accessible={true}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          accessibilityValue={{ text: value }}
+          accessible={false}
         >
           <TextInput
             value={value}
             onChangeText={handleChange}
             onKeyPress={handleKeyPress}
-            style={{ position: "absolute", opacity: 0 }}
+            caretHidden={Platform.OS === "ios"}
+            style={[
+              StyleSheet.absoluteFillObject,
+              Platform.select({
+                ios: { opacity: 0.01 },
+                android: { opacity: 0 }
+              })
+            ]}
             maxLength={length}
             ref={inputRef}
             onBlur={() => setHasFocus(false)}
@@ -172,23 +175,45 @@ export const OTPInput = forwardRef<View, Props>(
             autoComplete={autocomplete ? "sms-otp" : undefined}
             inputAccessoryViewID={inputAccessoryViewID}
             accessible={true}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            // Ensure the screen reader pronounces the code digit by digit
+            accessibilityValue={{
+              text:
+                accessibilityValueText?.({
+                  valueLength: value.length,
+                  length
+                }) ?? value.split("").join(" ")
+            }}
             autoFocus={autoFocus}
-            secureTextEntry={true}
+            secureTextEntry={secret}
           />
-          {cells.map((_, i) => (
-            <BoxedInput
-              key={i}
-              status={
-                hasError
-                  ? "error"
-                  : hasFocus && value.length === i
-                  ? "focus"
-                  : "default"
-              }
-              secret={secret}
-              value={value[i]}
-            />
-          ))}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              columnGap: OTP_ITEMS_GAP,
+              flexGrow: 1,
+              zIndex: 10
+            }}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+          >
+            {cells.map((_, i) => (
+              <BoxedInput
+                key={i}
+                status={
+                  hasError
+                    ? "error"
+                    : hasFocus && value.length === i
+                    ? "focus"
+                    : "default"
+                }
+                secret={secret}
+                value={value[i]}
+              />
+            ))}
+          </View>
         </Pressable>
         <VSpacer size={4} />
         {hasError && errorMessage && (

package/src/components/toast/ToastProvider.tsx

@@ -1,4 +1,3 @@
-import { throttle } from "lodash";
 import { ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import { AccessibilityInfo, StyleSheet, View } from "react-native";
 import Animated, {
@@ -10,6 +9,7 @@ import Animated, {
 import { SafeAreaView } from "react-native-safe-area-context";
 import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
+import { throttle } from "../../utils/throttle";
 import { Dismissable } from "../templates";
 import { ToastNotification } from "./ToastNotification";
 import { ToastContext } from "./context";

package/src/components/tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-import { every, some } from "lodash";
 import {
   JSXElementConstructor,
   PropsWithChildren,
@@ -194,8 +193,10 @@ export const Tooltip = ({
     () => ARROWS_BY_PLACEMENT[currentPlacement],
     [currentPlacement]
   );
+  const childrenCoordsValues = Object.values(childrenCoords);
   const isChildrenMeasurementFinished =
-    every(childrenCoords, isDefined) && some(childrenCoords, isNotZero);
+    childrenCoordsValues.every(isDefined) &&
+    childrenCoordsValues.some(isNotZero);
   const isTooltipMeasurementCompleted = isDefined(tooltipLayout);
   const tooltipVisibility = { opacity: isTooltipMeasurementCompleted ? 1 : 0 };
 
@@ -211,7 +212,7 @@ export const Tooltip = ({
           width,
           height
         };
-        if (every(coords, isDefined)) {
+        if (Object.values(coords).every(isDefined)) {
           setChildrenCoords(coords);
         }
       });

package/src/components/typography/IOText.tsx

@@ -8,7 +8,7 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIONewTypeface } from "../../context";
 import { IOColors } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
@@ -74,11 +74,11 @@ export type TypographicStyleAsLinkProps =
  * @param args the args of the function {@link makeFontStyleObject}
  */
 const calculateTextStyle = (
-  color: IOColors,
+  color?: IOColors,
   ...args: Parameters<typeof makeFontStyleObject>
 ) => ({
   ...makeFontStyleObject(...args),
-  color: IOColors[color]
+  color: color ? IOColors[color] : undefined
 });
 
 /**
@@ -106,7 +106,6 @@ export const IOText = forwardRef<View, IOTextProps>(
     },
     ref
   ) => {
-    const theme = useIOTheme();
     const boldEnabled = useBoldTextEnabled();
     const { newTypefaceEnabled } = useIONewTypeface();
 
@@ -116,7 +115,7 @@ export const IOText = forwardRef<View, IOTextProps>(
     const computedStyleObj = useMemo(
       () =>
         calculateTextStyle(
-          color ?? theme["textBody-default"],
+          color,
           size,
           computedFont,
           lineHeight,
@@ -124,16 +123,7 @@ export const IOText = forwardRef<View, IOTextProps>(
           fontStyle,
           boldEnabled
         ),
-      [
-        color,
-        theme,
-        size,
-        computedFont,
-        lineHeight,
-        weight,
-        fontStyle,
-        boldEnabled
-      ]
+      [color, size, computedFont, lineHeight, weight, fontStyle, boldEnabled]
     );
 
     /* In some cases, for example when we use color transitions with

package/src/utils/throttle.ts

@@ -0,0 +1,15 @@
+export const throttle = <T extends Array<unknown>>(
+  fn: (...args: T) => void,
+  ms: number
+) => {
+  // eslint-disable-next-line functional/no-let
+  let lastCall = 0;
+  return (...args: T) => {
+    const now = Date.now();
+
+    if (now - lastCall >= ms) {
+      lastCall = now;
+      fn(...args);
+    }
+  };
+};