@pagopa/io-app-design-system 5.1.1 → 5.1.3

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { GestureResponderEvent } from "react-native";
+import { AccessibilityRole, GestureResponderEvent } from "react-native";
 import {
   BodySmall,
   HStack,
@@ -23,6 +23,7 @@ type FeatureInfoActionProps =
       action: {
         label: string;
         onPress: (event: GestureResponderEvent) => void;
+        accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
       };
     }
   | {
@@ -56,6 +57,10 @@ export const FeatureInfo = ({
 }: FeatureInfoProps) => {
   const theme = useIOTheme();
 
+  /* Already defined in the `BodySmall` component as a fallback value,
+  but I keep it here to avoid possible future inconsistencies. */
+  const accessibilityRole = action?.accessibilityRole ?? "link";
+
   return (
     <HStack style={{ alignItems: "center" }} space={24}>
       {iconName && (
@@ -83,6 +88,7 @@ export const FeatureInfo = ({
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}
+            accessibilityRole={accessibilityRole}
           >
             {action.label}
           </BodySmall>

package/src/components/listitems/ListItemRadio.tsx

@@ -31,11 +31,13 @@ type ListItemRadioLoadingProps =
       state: true;
       skeletonDescription?: boolean;
       skeletonIcon?: boolean;
+      loadingAccessibilityLabel?: string;
     }
   | {
       state?: false;
       skeletonDescription?: never;
       skeletonIcon?: never;
+      loadingAccessibilityLabel?: never;
     };
 
 type Props = WithTestID<{
@@ -122,8 +124,15 @@ export const ListItemRadio = ({
     </View>
   );
 
-  const SkeletonComponent = () => (
-    <View style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}>
+  const ListItemRadioSkeleton = ({
+    loadingAccessibilityLabel
+  }: Pick<ListItemRadioLoadingProps, "loadingAccessibilityLabel">) => (
+    <View
+      style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}
+      accessible={true}
+      accessibilityLabel={loadingAccessibilityLabel}
+      accessibilityState={{ busy: true }}
+    >
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
           style={[
@@ -155,7 +164,9 @@ export const ListItemRadio = ({
   );
 
   return loadingProps?.state ? (
-    <SkeletonComponent />
+    <ListItemRadioSkeleton
+      loadingAccessibilityLabel={loadingProps?.loadingAccessibilityLabel}
+    />
   ) : (
     <Pressable
       accessibilityRole="radio"

package/src/components/listitems/ListItemTransaction.tsx

@@ -41,6 +41,7 @@ export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
     showChevron?: boolean;
     isLoading?: boolean;
+    loadingAccessibilityLabel?: string;
     /**
      * A logo that will be displayed on the left of the list item.
      *
@@ -102,6 +103,7 @@ const StartComponent = ({
 
 export const ListItemTransaction = ({
   accessibilityLabel,
+  loadingAccessibilityLabel,
   showChevron = false,
   isLoading = false,
   paymentLogoIcon,
@@ -116,7 +118,11 @@ export const ListItemTransaction = ({
   const theme = useIOTheme();
 
   if (isLoading) {
-    return <SkeletonComponent />;
+    return (
+      <ListItemTransactionSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   const interactiveColor: IOColors = theme["interactiveElem-default"];
@@ -207,8 +213,15 @@ export const ListItemTransaction = ({
   }
 };
 
-const SkeletonComponent = () => (
-  <View style={IOListItemStyles.listItem} accessible={false}>
+const ListItemTransactionSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ListItemTransaction, "loadingAccessibilityLabel">) => (
+  <View
+    style={IOListItemStyles.listItem}
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
+  >
     <View style={IOListItemStyles.listItemInner}>
       <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
         <Placeholder.Box

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -1364,7 +1364,12 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
 
 exports[`Test List Item Components - Experimental Enabled  ListItemTransaction Snapshot 1`] = `
 <View
-  accessible={false}
+  accessibilityState={
+    {
+      "busy": true,
+    }
+  }
+  accessible={true}
   style={
     {
       "marginHorizontal": -24,
@@ -2942,7 +2947,12 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
 
 exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
 <View
-  accessible={false}
+  accessibilityState={
+    {
+      "busy": true,
+    }
+  }
+  accessible={true}
   style={
     {
       "marginHorizontal": -24,

package/src/components/modules/ModuleAttachment.tsx

@@ -16,6 +16,7 @@ type PartialProps = WithTestID<{
   format: "doc" | "pdf";
   isLoading?: boolean;
   isFetching?: boolean;
+  loadingAccessibilityLabel?: string;
   fetchingAccessibilityLabel?: string;
   onPress: (event: GestureResponderEvent) => void;
 }>;
@@ -87,6 +88,7 @@ const ModuleAttachmentContent = ({
  * @param {string}   accessibilityLabel - Optional accessibility label.
  * @param {boolean}  disabled - If true, the button is disabled.
  * @param {string}   fetchingAccessibilityLabel - Optional accessibility label to use during fetching.
+ * @param {string}   loadingAccessibilityLabel - Optional accessibility label to use during loading.
  * @param {string}   format - Badge content. PDF or DOC.
  * @param {boolean}  isLoading - If true, displays a skeleton loading component.
  * @param {boolean}  isFetching - If true, displays an activity indicator.
@@ -99,6 +101,7 @@ export const ModuleAttachment = ({
   accessibilityLabel,
   disabled = false,
   fetchingAccessibilityLabel,
+  loadingAccessibilityLabel,
   format,
   isLoading = false,
   isFetching = false,
@@ -117,7 +120,11 @@ export const ModuleAttachment = ({
   );
 
   if (isLoading) {
-    return <ModuleAttachmentSkeleton />;
+    return (
+      <ModuleAttachmentSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   const pressableAccessibilityLabel =
@@ -149,8 +156,13 @@ export const ModuleAttachment = ({
   );
 };
 
-const ModuleAttachmentSkeleton = () => (
+const ModuleAttachmentSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ModuleAttachmentProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
         <Placeholder.Box animate="fade" radius={8} width={114} height={16} />

package/src/components/modules/ModuleCheckout.tsx

@@ -21,6 +21,7 @@ import { PressableModuleBase } from "./PressableModuleBase";
 
 type LoadingProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type ImageProps =
@@ -45,7 +46,11 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const imageMargin: IOSpacingScale = 12;
 
   if (props.isLoading) {
-    return <ModuleCheckoutSkeleton />;
+    return (
+      <ModuleCheckoutSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
   }
 
   const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
@@ -98,8 +103,13 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   );
 };
 
-const ModuleCheckoutSkeleton = () => (
+const ModuleCheckoutSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack space={8} style={{ alignItems: "center" }}>
         <Placeholder.Box animate="fade" radius={8} height={24} width={24} />

package/src/components/modules/ModuleCredential.tsx

@@ -32,6 +32,7 @@ type ImageProps =
 
 type LoadingModuleProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type BaseModuleProps = {
@@ -48,7 +49,9 @@ const ModuleCredential = (
   props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
 ) =>
   props.isLoading ? (
-    <ModuleCredentialSkeleton />
+    <ModuleCredentialSkeleton
+      loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+    />
   ) : (
     <ModuleCredentialContent {...props} />
   );
@@ -144,8 +147,13 @@ const ModuleCredentialContent = ({
   );
 };
 
-const ModuleCredentialSkeleton = () => (
+const ModuleCredentialSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingModuleProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack
         style={{ alignItems: "center" }}

package/src/components/modules/ModuleNavigation.tsx

@@ -28,6 +28,7 @@ import {
 
 type LoadingProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type ImageProps =
@@ -49,7 +50,11 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   const { hugeFontEnabled } = useIOFontDynamicScale();
 
   if (props.isLoading) {
-    return <ModuleNavigationSkeleton />;
+    return (
+      <ModuleNavigationSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
   }
 
   const { icon, image, title, subtitle, onPress, badge, ...pressableProps } =
@@ -111,8 +116,13 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   );
 };
 
-const ModuleNavigationSkeleton = () => (
+const ModuleNavigationSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack
         style={{ alignItems: "center" }}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -23,6 +23,7 @@ export type ModulePaymentNoticeProps = WithTestID<
   {
     isLoading?: boolean;
     accessibilityLabel?: string;
+    loadingAccessibilityLabel?: string;
     title?: string;
     subtitle: string;
     onPress: (event: GestureResponderEvent) => void;
@@ -140,10 +141,15 @@ export const ModulePaymentNotice = ({
   testID,
   accessibilityLabel,
   onPress,
+  loadingAccessibilityLabel,
   ...rest
 }: ModulePaymentNoticeProps) => {
   if (isLoading) {
-    return <ModulePaymentNoticeSkeleton />;
+    return (
+      <ModulePaymentNoticeSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   return (
@@ -157,8 +163,13 @@ export const ModulePaymentNotice = ({
   );
 };
 
-const ModulePaymentNoticeSkeleton = () => (
+const ModulePaymentNoticeSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ModulePaymentNoticeProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
         <Placeholder.Box animate="fade" radius={8} width={120} height={12} />

package/src/components/modules/ModuleStatic.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
-import { PressableProps, View } from "react-native";
+import { PressableProps, View, ViewProps } from "react-native";
 import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
 import { HStack } from "../stack";
 
-type ModuleStaticProps =
-  | ModuleStaticSingleBlockProps
-  | ModuleStaticMultipleBlockProps;
+type ModuleStaticProps = Pick<
+  ViewProps,
+  "accessible" | "accessibilityLabel" | "accessibilityState"
+> &
+  (ModuleStaticSingleBlockProps | ModuleStaticMultipleBlockProps);
 
 type ModuleStaticMultipleBlockProps = {
   startBlock: React.ReactNode;
@@ -27,7 +29,10 @@ export const ModuleStatic = ({
   disabled = false,
   startBlock,
   endBlock,
-  children
+  children,
+  accessible = false,
+  accessibilityLabel,
+  accessibilityState
 }: ModuleStaticProps) => {
   const theme = useIOTheme();
 
@@ -40,7 +45,9 @@ export const ModuleStatic = ({
           opacity: disabled ? DISABLED_OPACITY : 1
         }
       ]}
-      accessible={false}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={accessibilityState}
     >
       {startBlock && (
         <HStack space={8} style={{ alignItems: "center" }}>

package/src/components/textInput/TextInputBase.tsx

@@ -120,17 +120,27 @@ const styles = StyleSheet.create({
 
 type InputTextHelperRow = Pick<
   InputTextProps,
-  "value" | "counterLimit" | "bottomMessage" | "bottomMessageColor"
+  | "value"
+  | "counterLimit"
+  | "bottomMessage"
+  | "bottomMessageColor"
+  | "inputType"
 >;
 
 const HelperRow = ({
   value,
   counterLimit,
   bottomMessage,
-  bottomMessageColor
+  bottomMessageColor,
+  inputType
 }: InputTextHelperRow) => {
   const theme = useIOTheme();
-  const valueCount = useMemo(() => value.length, [value]);
+
+  const valueCount = useMemo(
+    () =>
+      inputType !== "default" ? value.replace(/\s/g, "").length : value.length,
+    [inputType, value]
+  );
 
   const bottomMessageColorDefault: IOColors = theme["textBody-tertiary"];
   const bottomMessageColorValue =
@@ -315,12 +325,22 @@ export const TextInputBase = ({
 
   const onChangeTextHandler = useCallback(
     (text: string) => {
-      if (counterLimit && text.length > counterLimit) {
+      const actualTextLength =
+        inputType !== "default" ? text.replace(/\s/g, "").length : text.length;
+
+      if (counterLimit && actualTextLength > counterLimit) {
         return;
       }
-      onChangeText(text);
+
+      if (inputType !== "default") {
+        // necessary to omit whitespaces added by the valueFormat function
+        const formattedText = text.replace(/\s/g, "");
+        onChangeText(formattedText);
+      } else {
+        onChangeText(text);
+      }
     },
-    [counterLimit, onChangeText]
+    [counterLimit, onChangeText, inputType]
   );
 
   const onBlurHandler = useCallback(() => {
@@ -348,6 +368,15 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
 
+  // Calculate the adjusted maxLength to account for spaces
+  const adjustedMaxLength = useMemo(() => {
+    if (counterLimit && derivedInputProps && derivedInputProps.valueFormat) {
+      const spacesCount = Math.floor(counterLimit / 4);
+      return counterLimit + spacesCount;
+    }
+    return counterLimit;
+  }, [counterLimit, derivedInputProps]);
+
   return (
     <>
       <Pressable
@@ -407,7 +436,7 @@ export const TextInputBase = ({
           accessibilityHint={accessibilityHint}
           selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret on iOS
           cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
-          maxLength={counterLimit}
+          maxLength={adjustedMaxLength}
           onBlur={onBlurHandler}
           onFocus={onFocusHandler}
           blurOnSubmit={true}
@@ -499,10 +528,11 @@ export const TextInputBase = ({
 
       {(bottomMessage || counterLimit) && (
         <HelperRow
-          value={value}
+          value={inputValue}
           bottomMessage={bottomMessage}
           bottomMessageColor={bottomMessageColor}
           counterLimit={counterLimit}
+          inputType={inputType}
         />
       )}
     </>

package/src/components/typography/Body.tsx

@@ -24,7 +24,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const Body = forwardRef<View, BodyStyleProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -44,7 +50,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})

package/src/components/typography/BodySmall.tsx

@@ -21,7 +21,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const BodySmall = forwardRef<View, BodySmallProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -41,7 +47,7 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})

package/src/components/typography/IOText.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentProps, forwardRef, useMemo } from "react";
 import {
+  AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   Text,
@@ -60,6 +61,7 @@ export type TypographicStyleAsLinkProps =
       color?: never;
       asLink: true;
       onPress: (event: GestureResponderEvent) => void;
+      accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
     }
   | { color?: IOColors; asLink?: false };
 

package/src/components/typography/LabelMini.tsx

@@ -21,7 +21,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const LabelMini = forwardRef<View, LabelMiniProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -41,7 +47,7 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})