@pagopa/io-app-design-system 1.33.0 → 1.35.0

package/src/components/listitems/ListItemCheckbox.tsx

@@ -36,12 +36,10 @@ type Props = {
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type ListItemCheckboxProps = Props &
   Pick<
     React.ComponentProps<typeof Pressable>,
-    "onPress" | "accessibilityLabel" | "disabled"
+    "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 
 /**
@@ -57,9 +55,10 @@ export const ListItemCheckbox = ({
   icon,
   selected,
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   onValueChange
-}: OwnProps) => {
+}: ListItemCheckboxProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -74,6 +73,12 @@ export const ListItemCheckbox = ({
   // Theme
   const theme = useIOTheme();
 
+  // Accessibility
+  // Comma = Small pause when announcing content
+  const fallbackAccessibilityLabel = description
+    ? `${value}, ${description}`
+    : value;
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -130,7 +135,8 @@ export const ListItemCheckbox = ({
       onTouchEnd={handlePressOut}
       testID="ListItemCheckbox"
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={accessibilityLabel || fallbackAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="checkbox"
       accessibilityState={{
         checked: selected ?? toggleValue,

package/src/components/listitems/ListItemNav.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback } from "react";
 import {
   GestureResponderEvent,
   Image,
@@ -44,16 +44,19 @@ type ListItemTopElementProps =
       dateValue: string;
     };
 
-type ListItemNavPartialProps = WithTestID<{
-  value: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  loading?: boolean;
-  onPress: (event: GestureResponderEvent) => void;
-  // Accessibility
-  accessibilityLabel: string;
-  hideChevron?: boolean;
-  topElement?: ListItemTopElementProps;
-}>;
+type ListItemNavPartialProps = WithTestID<
+  {
+    value: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    loading?: boolean;
+    onPress: (event: GestureResponderEvent) => void;
+    hideChevron?: boolean;
+    topElement?: ListItemTopElementProps;
+  } & Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 export type ListItemNavGraphicProps =
   | { icon?: never; iconColor?: never; paymentLogoUri: string }
@@ -77,6 +80,7 @@ export const ListItemNav = ({
   iconColor = "grey-450",
   paymentLogoUri,
   accessibilityLabel,
+  accessibilityHint,
   testID,
   hideChevron = false,
   topElement,
@@ -197,7 +201,9 @@ export const ListItemNav = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
+      accessibilityState={{ busy: loading }}
       accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >

package/src/components/listitems/ListItemRadio.tsx

@@ -57,12 +57,10 @@ type Props = WithTestID<{
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type ListItemRadioProps = Props &
   Pick<
     React.ComponentProps<typeof Pressable>,
-    "onPress" | "accessibilityLabel" | "disabled"
+    "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 
 const styles = StyleSheet.create({
@@ -87,9 +85,11 @@ export const ListItemRadio = ({
   selected,
   disabled,
   onValueChange,
+  accessibilityLabel,
+  accessibilityHint,
   loadingProps,
   testID
-}: OwnProps) => {
+}: ListItemRadioProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -217,6 +217,8 @@ export const ListItemRadio = ({
         checked: selected ?? toggleValue,
         disabled: !!disabled
       }}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       onPress={toggleRadioItem}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -14,24 +14,32 @@ export type ListItemRadioWithAmountProps = {
   selected?: boolean;
   label: string;
   formattedAmountString: string;
+  accessibilityLabel?: string;
 } & (
   | {
       isSuggested?: false;
+      suggestReason?: never;
     }
   | {
-      isSuggested: true;
+      isSuggested?: true;
       suggestReason: string;
     }
 );
-export const ListItemRadioWithAmount = (
-  props: ListItemRadioWithAmountProps
-) => {
-  const [toggleValue, setToggleValue] = React.useState(props.selected ?? false);
+export const ListItemRadioWithAmount = ({
+  onValueChange,
+  selected,
+  label,
+  accessibilityLabel,
+  isSuggested = false,
+  suggestReason,
+  formattedAmountString
+}: ListItemRadioWithAmountProps) => {
+  const [toggleValue, setToggleValue] = React.useState(selected ?? false);
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);
-    if (props.onValueChange !== undefined) {
-      props.onValueChange(!toggleValue);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
     }
   };
   const theme = useIOTheme();
@@ -39,19 +47,26 @@ export const ListItemRadioWithAmount = (
   const suggestColor: IOColors = "hanPurple-500";
 
   return (
-    <PressableListItemBase onPress={pressHandler}>
+    <PressableListItemBase
+      onPress={pressHandler}
+      accessibilityRole="radio"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        checked: selected ?? toggleValue
+      }}
+    >
       <View style={{ flexShrink: 1 }}>
         <LabelSmallAlt numberOfLines={1} color={theme["textBody-default"]}>
-          {props.label} con nome molto molto lungo
+          {label} con nome molto molto lungo
         </LabelSmallAlt>
-        {props.isSuggested && (
+        {isSuggested && (
           <>
             <VSpacer size={4} />
             <View style={styles.rowCenter}>
               <Icon name="sparkles" size={16} color={suggestColor} />
               <HSpacer size={4} />
               <LabelSmall weight="Regular" color={suggestColor}>
-                {props.suggestReason}
+                {suggestReason}
               </LabelSmall>
             </View>
           </>
@@ -60,10 +75,10 @@ export const ListItemRadioWithAmount = (
       <View pointerEvents="none" style={{ flexDirection: "row" }}>
         <HSpacer size={8} />
         <H6 color={theme["interactiveElem-default"]}>
-          {props.formattedAmountString}
+          {formattedAmountString}
         </H6>
         <HSpacer size={8} />
-        <AnimatedRadio checked={props.selected ?? toggleValue} />
+        <AnimatedRadio checked={selected ?? toggleValue} />
       </View>
     </PressableListItemBase>
   );

package/src/components/listitems/ListItemSwitch.tsx

@@ -98,6 +98,7 @@ export const ListItemSwitch = React.memo(
                   : "no-hide-descendants"
               }
             })}
+            accessibilityState={{ disabled }}
           >
             {icon && (
               <View

package/src/components/listitems/PressableListItemsBase.tsx

@@ -5,15 +5,23 @@ import { IOListItemStyles } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
-export type PressableBaseProps = WithTestID<{
-  accessibilityLabel?: string;
-  onPress?: () => void;
-}>;
+export type PressableBaseProps = WithTestID<
+  Pick<
+    React.ComponentProps<typeof Pressable>,
+    | "onPress"
+    | "accessibilityLabel"
+    | "accessibilityHint"
+    | "accessibilityState"
+    | "accessibilityRole"
+  >
+>;
+
 export const PressableListItemBase = ({
   onPress,
   testID,
-  accessibilityLabel,
-  children
+  children,
+  accessibilityRole,
+  ...props
 }: React.PropsWithChildren<PressableBaseProps>) => {
   const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
     useListItemSpringAnimation();
@@ -22,11 +30,11 @@ export const PressableListItemBase = ({
       onPress={onPress}
       testID={testID}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onTouchEnd={onPressOut}
-      accessibilityRole="button"
+      accessibilityRole={accessibilityRole || "button"}
+      {...props}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}

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

@@ -777,7 +777,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
                 "borderWidth": 0,
               },
               {
-                "color": "#FE6666",
+                "color": "#D13333",
               },
               {
                 "flex": 0,
@@ -786,7 +786,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               },
             ]
           }
-          tintColor="#FE6666"
+          tintColor="#D13333"
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -931,11 +931,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 1`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": true,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -1348,11 +1348,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 2`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": false,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -2582,7 +2582,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#FE6666",
+                "color": "#D13333",
               },
               {
                 "flex": 0,
@@ -2591,7 +2591,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor="#FE6666"
+          tintColor="#D13333"
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -2736,11 +2736,11 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": true,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -3153,11 +3153,11 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": false,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,

package/src/components/modules/ModuleAttachment.tsx

@@ -23,11 +23,11 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { Icon } from "../icons";
-import { LabelSmall } from "../typography";
-import { VSpacer } from "../spacer";
 import { Badge } from "../badge";
+import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { VSpacer } from "../spacer";
+import { LabelSmall } from "../typography";
 
 type PartialProps = WithTestID<{
   title: string;
@@ -243,6 +243,7 @@ const SkeletonComponent = ({
   <View
     style={styles.button}
     accessible={true}
+    accessibilityState={{ busy: true }}
     accessibilityLabel={loadingAccessibilityLabel}
   >
     <View style={styles.innerContent}>

package/src/components/modules/ModuleCheckout.tsx

@@ -1,8 +1,15 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageURISource,
+  StyleSheet,
+  View
+} from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOModuleStyles,
+  IOSelectionListItemVisualParams,
   IOSpacingScale,
   IOStyles,
   useIOTheme
@@ -13,54 +20,57 @@ import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 import { PressableModuleBase } from "./PressableModuleBase";
 
-// ---------------- types ----------------
-
-type ModuleCheckoutPartialProps =
-  | {
-      isLoading?: false;
-      paymentLogo?: IOLogoPaymentType;
-      title: string;
-      subtitle?: string;
-      onPress: () => void;
-    }
-  | {
-      isLoading: true;
-      paymentLogo?: never;
-      title?: never;
-      subtitle?: never;
-      onPress?: never;
-    };
-
-export type ModuleCheckoutProps = ModuleCheckoutPartialProps & {
+type LoadingProps = {
+  isLoading: true;
   ctaText?: string;
 };
 
-type CtaOnlyProps = { text?: string };
+type ImageProps =
+  | { paymentLogo: IOLogoPaymentType; image?: never }
+  | { paymentLogo?: never; image: ImageURISource | ImageSourcePropType }
+  | { paymentLogo?: never; image?: never };
 
-// ---------------- component ----------------
+type BaseProps = {
+  isLoading?: false;
+  paymentLogo?: IOLogoPaymentType;
+  title: string;
+  subtitle?: string;
+  ctaText?: string;
+  onPress: () => void;
+} & ImageProps;
+
+export type ModuleCheckoutProps = LoadingProps | BaseProps;
 
 export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const theme = useIOTheme();
 
   if (props.isLoading) {
-    return <LoadingVersion text={props.ctaText} />;
+    return <LoadingVersion {...props} />;
   }
 
-  const paymentLogoEndMargin: IOSpacingScale = 12;
+  const { paymentLogo, image } = props;
 
-  const ModuleBaseContent = () => (
-    <View style={styles.rowCenter}>
-      {/*
-          we don't want to let the `space-between`
-          handle spacing for the logo/text section,
-          so we use a row and a marginEnd on the logo
-        */}
-      {props.paymentLogo && (
-        <View style={{ marginEnd: paymentLogoEndMargin }}>
-          <LogoPayment name={props.paymentLogo} />
+  const imageComponent = (
+    <>
+      {paymentLogo && (
+        <View style={styles.imageWrapper}>
+          <LogoPayment name={paymentLogo} />
         </View>
       )}
-      <View style={IOStyles.flex}>
+      {image && (
+        <Image
+          source={image}
+          style={[styles.imageWrapper, styles.image]}
+          accessibilityIgnoresInvertColors={true}
+        />
+      )}
+    </>
+  );
+
+  const ModuleBaseContent = () => (
+    <>
+      {imageComponent}
+      <View style={styles.content}>
         <H6>{props.title}</H6>
         {props.subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
@@ -68,14 +78,14 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
           </LabelSmall>
         )}
       </View>
-    </View>
+    </>
   );
 
   if (props.ctaText) {
     return (
       <PressableModuleBase onPress={props.onPress}>
         <ModuleBaseContent />
-        {props.ctaText && <CTA text={props.ctaText} />}
+        {props.ctaText && <ModuleAction ctaText={props.ctaText} />}
       </PressableModuleBase>
     );
   }
@@ -87,21 +97,19 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   );
 };
 
-// ---------------- sub-components----------------
-
-const CTA = ({ text }: CtaOnlyProps) => (
+const ModuleAction = ({ ctaText }: Pick<ModuleCheckoutProps, "ctaText">) => (
   <View pointerEvents="none">
     <ButtonLink
-      label={text ?? ""}
-      accessibilityLabel={text}
+      label={ctaText ?? ""}
+      accessibilityLabel={ctaText}
       onPress={() => null}
     />
   </View>
 );
 
-const LoadingVersion = ({ text }: CtaOnlyProps) => (
+const LoadingVersion = ({ ctaText }: LoadingProps) => (
   <View style={IOModuleStyles.button}>
-    <View style={styles.rowCenter}>
+    <View style={[IOStyles.row, IOStyles.alignCenter]}>
       <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
       <HSpacer size={8} />
       <View>
@@ -110,16 +118,23 @@ const LoadingVersion = ({ text }: CtaOnlyProps) => (
         <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
       </View>
     </View>
-    <CTA text={text} />
+    <ModuleAction ctaText={ctaText} />
   </View>
 );
 
-// ---------------- styles ----------------
+const imageMarginRight: IOSpacingScale = 12;
 
 const styles = StyleSheet.create({
-  rowCenter: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1
+  imageWrapper: {
+    marginRight: imageMarginRight
+  },
+  image: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize,
+    resizeMode: "contain"
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1
   }
 });

package/src/components/modules/ModuleCredential.tsx

@@ -7,7 +7,6 @@ import {
   View
 } from "react-native";
 import Placeholder from "rn-placeholder";
-import { WithTestID } from "src/utils/types";
 import {
   IOListItemVisualParams,
   IOModuleStyles,
@@ -15,6 +14,7 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";

package/src/components/modules/PressableModuleBase.tsx

@@ -1,23 +1,28 @@
 import * as React from "react";
-import { GestureResponderEvent, Pressable } from "react-native";
+import { PropsWithChildren } from "react";
+import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
 
-export type PressableModuleBaseProps = WithTestID<{
-  accessibilityLabel?: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  withLooseSpacing?: boolean;
-}>;
+export type PressableModuleBaseProps = WithTestID<
+  {
+    withLooseSpacing?: boolean;
+  } & Pick<
+    React.ComponentProps<typeof Pressable>,
+    "onPress" | "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 export const PressableModuleBase = ({
   onPress,
-  testID,
-  accessibilityLabel,
   withLooseSpacing = false,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
   children
-}: React.PropsWithChildren<PressableModuleBaseProps>) => {
+}: PropsWithChildren<PressableModuleBaseProps>) => {
   const { handlePressIn, handlePressOut, animatedStyle } =
     useModuleSpringAnimation();
   return (
@@ -25,10 +30,11 @@ export const PressableModuleBase = ({
       onPress={onPress}
       testID={testID}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       onTouchEnd={handlePressOut}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
     >
       <Animated.View