@pagopa/io-app-design-system 6.0.4 → 6.0.5

package/src/components/listitems/ListItemInfo.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode } from "react";
-import { AccessibilityRole, Platform, Pressable, View } from "react-native";
+import { AccessibilityRole, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../context";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -35,14 +35,8 @@ type EndElementProps =
   | BadgeProps;
 
 type GraphicProps =
-  | {
-      paymentLogoIcon?: IOLogoPaymentType;
-      icon?: never;
-    }
-  | {
-      paymentLogoIcon?: never;
-      icon?: IOIcons;
-    };
+  | { paymentLogoIcon?: IOLogoPaymentType; icon?: never }
+  | { paymentLogoIcon?: never; icon?: IOIcons };
 
 type InteractiveProps = Pick<
   ComponentProps<typeof Pressable>,
@@ -55,7 +49,6 @@ export type ListItemInfo = WithTestID<{
   numberOfLines?: number;
   endElement?: EndElementProps;
   topElement?: BadgeProps;
-  // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
   reversed?: boolean;
@@ -72,16 +65,16 @@ const EndElementComponent = ({ type, componentProps }: EndElementProps) => {
         <IOButton
           variant="link"
           {...componentProps}
-          accessibilityLabel={`${
+          accessibilityLabel={
             componentProps.accessibilityLabel ?? componentProps.label
-          }`}
+          }
         />
       );
     case "iconButton":
       return (
         <IconButton
           {...componentProps}
-          accessibilityLabel={`${componentProps.accessibilityLabel}`}
+          accessibilityLabel={componentProps.accessibilityLabel}
         />
       );
     case "badge":
@@ -99,7 +92,9 @@ const ListItemInfoContent = ({
   numberOfLines,
   reversed,
   topElement,
-  endElement
+  endElement,
+  hasInteractiveElements,
+  listItemAccessibilityLabel
 }: Pick<
   ListItemInfo,
   | "icon"
@@ -110,7 +105,10 @@ const ListItemInfoContent = ({
   | "reversed"
   | "topElement"
   | "endElement"
->) => {
+> & {
+  hasInteractiveElements: boolean;
+  listItemAccessibilityLabel?: string;
+}) => {
   const theme = useIOTheme();
   const { hugeFontEnabled } = useIOFontDynamicScale();
 
@@ -124,15 +122,23 @@ const ListItemInfoContent = ({
           size={IOListItemVisualParams.iconSize}
         />
       )}
+
       {paymentLogoIcon && (
         <LogoPaymentWithFallback
           brand={paymentLogoIcon}
           size={PAYMENT_LOGO_SIZE}
         />
       )}
+
       <View style={{ flex: 1 }}>
         <View
-          accessible={Platform.OS === "ios"}
+          accessible={hasInteractiveElements}
+          accessibilityLabel={
+            hasInteractiveElements ? listItemAccessibilityLabel : undefined
+          }
+          importantForAccessibility={
+            hasInteractiveElements ? "yes" : "no-hide-descendants"
+          }
           style={{ flexDirection: reversed ? "column-reverse" : "column" }}
         >
           {topElement?.type === "badge" && (
@@ -141,11 +147,13 @@ const ListItemInfoContent = ({
               <VSpacer size={4} />
             </View>
           )}
+
           {label && (
             <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {label}
             </BodySmall>
           )}
+
           {typeof value === "string" ? (
             <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
               {value}
@@ -155,8 +163,14 @@ const ListItemInfoContent = ({
           )}
         </View>
       </View>
+
       {endElement && (
-        <View>
+        <View
+          accessible={false}
+          importantForAccessibility={
+            hasInteractiveElements ? "auto" : "no-hide-descendants"
+          }
+        >
           <EndElementComponent {...endElement} />
         </View>
       )}
@@ -164,6 +178,35 @@ const ListItemInfoContent = ({
   );
 };
 
+/**
+ * ListItemInfo component displays information in a list item format with optional icons,
+ * labels, values, and end elements (buttons, badges).
+ *
+ * @remarks
+ * **Accessibility for Interactive Elements:**
+ * When using interactive end elements (`buttonLink` or `iconButton`), you must provide
+ * an appropriate `accessibilityLabel` directly to the interactive component props.
+ * This ensures that screen reader users can understand the relationship between the
+ * list item content and the action that the interactive element triggers.
+ *
+ * Example:
+ * ```tsx
+ * <ListItemInfo
+ *   label="Email"
+ *   value="user@example.com"
+ *   endElement={{
+ *     type: "buttonLink",
+ *     componentProps: {
+ *       label: "Edit",
+ *       accessibilityLabel: "Edit email address"
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * The design system cannot enforce this pattern automatically, so it's the responsibility
+ * of the implementing software engineer to ensure proper accessibility labels are set.
+ */
 export const ListItemInfo = ({
   value,
   label,
@@ -185,13 +228,41 @@ export const ListItemInfo = ({
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
 
+  /**
+   * A11Y Support: Two different combinations based on interactive elements
+   *
+   * 1. NO interactive elements (or just badge):
+   *    - The outer container is accessible and receives the complete accessibility label
+   *    - This allows the entire list item to be treated as a single accessibility element
+   *
+   * 2. WITH interactive elements (buttonLink or iconButton):
+   *    - The outer container is NOT accessible
+   *    - The inner content becomes accessible with its label
+   *    - The interactive element is separately accessible with its own label
+   *    - This allows screen readers to navigate between the content and the action separately
+   */
+  const hasInteractiveElements =
+    endElement?.type === "buttonLink" || endElement?.type === "iconButton";
+
   const componentValueToAccessibility = typeof value === "string" ? value : "";
 
+  const topBadgeText =
+    topElement?.type === "badge" ? topElement.componentProps.text ?? "" : "";
+
+  const endBadgeText =
+    endElement?.type === "badge" ? endElement.componentProps.text ?? "" : "";
+
+  /**
+   * Build text in VISUAL ORDER
+   */
+  const mainTextParts = reversed
+    ? [componentValueToAccessibility, label]
+    : [label, componentValueToAccessibility];
+
+  const textParts = [topBadgeText, ...mainTextParts, endBadgeText];
+
   const listItemAccessibilityLabel =
-    accessibilityLabel ??
-    (label
-      ? `${label}; ${componentValueToAccessibility}`
-      : componentValueToAccessibility);
+    accessibilityLabel ?? textParts.filter(Boolean).join("; ");
 
   const contentProps = {
     icon,
@@ -201,7 +272,9 @@ export const ListItemInfo = ({
     numberOfLines,
     reversed,
     topElement,
-    endElement
+    endElement,
+    hasInteractiveElements,
+    listItemAccessibilityLabel
   } as const;
 
   if (onLongPress) {
@@ -209,14 +282,14 @@ export const ListItemInfo = ({
       <Pressable
         onLongPress={onLongPress}
         testID={testID}
-        accessible={!endElement}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onTouchEnd={onPressOut}
-        accessibilityRole={"button"}
+        accessible
+        accessibilityRole="button"
         accessibilityLabel={listItemAccessibilityLabel}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onTouchEnd={onPressOut}
       >
         <Animated.View
           style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
@@ -238,29 +311,31 @@ export const ListItemInfo = ({
         </Animated.View>
       </Pressable>
     );
-  } else {
-    return (
+  }
+
+  return (
+    <View
+      style={IOListItemStyles.listItem}
+      testID={testID}
+      accessible={!hasInteractiveElements}
+      accessibilityLabel={
+        hasInteractiveElements ? undefined : listItemAccessibilityLabel
+      }
+      accessibilityRole={hasInteractiveElements ? undefined : accessibilityRole}
+    >
       <View
-        style={IOListItemStyles.listItem}
-        testID={testID}
-        accessible={!endElement}
-        accessibilityLabel={listItemAccessibilityLabel}
-        accessibilityRole={accessibilityRole}
+        style={[
+          IOListItemStyles.listItemInner,
+          {
+            columnGap:
+              IOListItemVisualParams.iconMargin *
+              dynamicFontScale *
+              spacingScaleMultiplier
+          }
+        ]}
       >
-        <View
-          style={[
-            IOListItemStyles.listItemInner,
-            {
-              columnGap:
-                IOListItemVisualParams.iconMargin *
-                dynamicFontScale *
-                spacingScaleMultiplier
-            }
-          ]}
-        >
-          <ListItemInfoContent {...contentProps} />
-        </View>
+        <ListItemInfoContent {...contentProps} />
       </View>
-    );
-  }
+    </View>
+  );
 };

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

@@ -190,7 +190,8 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
       }
     >
       <View
-        accessible={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "flexDirection": "column",
@@ -1379,7 +1380,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
-                  onLayout={[Function]}
+                  onSvgLayout={[Function]}
                   propList={
                     [
                       "fill",
@@ -2308,7 +2309,8 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <View
-        accessible={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "flexDirection": "column",
@@ -3497,7 +3499,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
-                  onLayout={[Function]}
+                  onSvgLayout={[Function]}
                   propList={
                     [
                       "fill",

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -1,12 +1,6 @@
-import { ReactElement, useEffect } from "react";
+import { ReactElement, useId } from "react";
 import { ColorValue, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { useIOTheme } from "../../context";
 import { IOColors } from "../../core/IOColors";
@@ -21,15 +15,18 @@ export type LoadingSpinner = WithTestID<{
 }>;
 
 /**
- * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
- * It will be removed in the future.
+ * Size scale
  */
-export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
+export type IOLoadingSpinnerSizeScale = 24 | 48;
 
-const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+const spinKeyframes = {
+  from: { transform: [{ rotateZ: "0deg" }] },
+  to: { transform: [{ rotateZ: "360deg" }] }
+};
+
+const strokeMap: Record<IOLoadingSpinnerSizeScale, number> = {
   24: 3,
-  48: 5,
-  76: 7
+  48: 5
 };
 
 export const LoadingSpinner = ({
@@ -41,23 +38,13 @@ export const LoadingSpinner = ({
   testID = "LoadingSpinnerTestID"
 }: LoadingSpinner): ReactElement => {
   const theme = useIOTheme();
-  const rotation = useSharedValue(0);
-  const stroke: number = strokeMap[size];
+  const id = useId();
+  const stroke = strokeMap[size];
 
   const color = customColor ?? IOColors[theme["interactiveElem-default"]];
 
-  useEffect(() => {
-    // eslint-disable-next-line functional/immutable-data
-    rotation.value = withRepeat(
-      withTiming(360, { duration: durationMs, easing: Easing.linear }),
-      -1,
-      false
-    );
-  }, [durationMs, rotation]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotateZ: `${rotation.value}deg` }]
-  }));
+  const secondHalfId = `${id}-secondHalf`;
+  const firstHalfId = `${id}-firstHalf`;
 
   return (
     <View
@@ -70,7 +57,13 @@ export const LoadingSpinner = ({
     >
       <Animated.View
         testID={"LoadingSpinnerAnimatedTestID"}
-        style={animatedStyle}
+        style={{
+          animationName: spinKeyframes,
+          animationDuration: durationMs,
+          animationIterationCount: "infinite",
+          animationTimingFunction: "linear",
+          transformOrigin: "center"
+        }}
       >
         {/* Thanks to Ben Ilegbodu for the article on how to
           create a a SVG gradient loading spinner. Below is
@@ -83,11 +76,11 @@ export const LoadingSpinner = ({
           fill="none"
         >
           <Defs>
-            <LinearGradient id="spinner-secondHalf">
+            <LinearGradient id={secondHalfId}>
               <Stop offset="0%" stopOpacity="0" stopColor={color} />
               <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
-            <LinearGradient id="spinner-firstHalf">
+            <LinearGradient id={firstHalfId}>
               <Stop offset="0%" stopOpacity="1" stopColor={color} />
               <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
@@ -95,13 +88,13 @@ export const LoadingSpinner = ({
 
           <G strokeWidth={stroke}>
             <Path
-              stroke="url(#spinner-secondHalf)"
+              stroke={`url(#${secondHalfId})`}
               d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
                 size / 2 - stroke / 2
               } 0 0 1 ${size - stroke / 2} ${size / 2}`}
             />
             <Path
-              stroke="url(#spinner-firstHalf)"
+              stroke={`url(#${firstHalfId})`}
               d={`M ${size - stroke / 2} ${size / 2} A ${
                 size / 2 - stroke / 2
               } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}