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

package/lib/module/components/listitems/ListItemInfo.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { Platform, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../context";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -23,12 +23,12 @@ const EndElementComponent = ({
       return /*#__PURE__*/_jsx(IOButton, {
         variant: "link",
         ...componentProps,
-        accessibilityLabel: `${componentProps.accessibilityLabel ?? componentProps.label}`
+        accessibilityLabel: componentProps.accessibilityLabel ?? componentProps.label
       });
     case "iconButton":
       return /*#__PURE__*/_jsx(IconButton, {
         ...componentProps,
-        accessibilityLabel: `${componentProps.accessibilityLabel}`
+        accessibilityLabel: componentProps.accessibilityLabel
       });
     case "badge":
       return /*#__PURE__*/_jsx(Badge, {
@@ -46,7 +46,9 @@ const ListItemInfoContent = ({
   numberOfLines,
   reversed,
   topElement,
-  endElement
+  endElement,
+  hasInteractiveElements,
+  listItemAccessibilityLabel
 }) => {
   const theme = useIOTheme();
   const {
@@ -66,7 +68,9 @@ const ListItemInfoContent = ({
         flex: 1
       },
       children: /*#__PURE__*/_jsxs(View, {
-        accessible: Platform.OS === "ios",
+        accessible: hasInteractiveElements,
+        accessibilityLabel: hasInteractiveElements ? listItemAccessibilityLabel : undefined,
+        importantForAccessibility: hasInteractiveElements ? "yes" : "no-hide-descendants",
         style: {
           flexDirection: reversed ? "column-reverse" : "column"
         },
@@ -90,12 +94,44 @@ const ListItemInfoContent = ({
         }) : value]
       })
     }), endElement && /*#__PURE__*/_jsx(View, {
+      accessible: false,
+      importantForAccessibility: hasInteractiveElements ? "auto" : "no-hide-descendants",
       children: /*#__PURE__*/_jsx(EndElementComponent, {
         ...endElement
       })
     })]
   });
 };
+
+/**
+ * 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,
@@ -122,8 +158,31 @@ export const ListItemInfo = ({
     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 listItemAccessibilityLabel = accessibilityLabel ?? (label ? `${label}; ${componentValueToAccessibility}` : componentValueToAccessibility);
+  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 ?? textParts.filter(Boolean).join("; ");
   const contentProps = {
     icon,
     paymentLogoIcon,
@@ -132,20 +191,22 @@ export const ListItemInfo = ({
     numberOfLines,
     reversed,
     topElement,
-    endElement
+    endElement,
+    hasInteractiveElements,
+    listItemAccessibilityLabel
   };
   if (onLongPress) {
     return /*#__PURE__*/_jsx(Pressable, {
       onLongPress: onLongPress,
       testID: testID,
-      accessible: !endElement,
-      onPressIn: onPressIn,
-      onPressOut: onPressOut,
-      onTouchEnd: onPressOut,
+      accessible: true,
       accessibilityRole: "button",
       accessibilityLabel: listItemAccessibilityLabel,
       accessibilityActions: accessibilityActions,
       onAccessibilityAction: onAccessibilityAction,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      onTouchEnd: onPressOut,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: [IOListItemStyles.listItem, backgroundAnimatedStyle],
         children: /*#__PURE__*/_jsx(Animated.View, {
@@ -158,22 +219,21 @@ export const ListItemInfo = ({
         })
       })
     });
-  } else {
-    return /*#__PURE__*/_jsx(View, {
-      style: IOListItemStyles.listItem,
-      testID: testID,
-      accessible: !endElement,
-      accessibilityLabel: listItemAccessibilityLabel,
-      accessibilityRole: accessibilityRole,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [IOListItemStyles.listItemInner, {
-          columnGap: IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
-        }],
-        children: /*#__PURE__*/_jsx(ListItemInfoContent, {
-          ...contentProps
-        })
-      })
-    });
   }
+  return /*#__PURE__*/_jsx(View, {
+    style: IOListItemStyles.listItem,
+    testID: testID,
+    accessible: !hasInteractiveElements,
+    accessibilityLabel: hasInteractiveElements ? undefined : listItemAccessibilityLabel,
+    accessibilityRole: hasInteractiveElements ? undefined : accessibilityRole,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [IOListItemStyles.listItemInner, {
+        columnGap: IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
+      }],
+      children: /*#__PURE__*/_jsx(ListItemInfoContent, {
+        ...contentProps
+      })
+    })
+  });
 };
 //# sourceMappingURL=ListItemInfo.js.map

package/lib/module/components/listitems/ListItemInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","Pressable","View","Animated","useIOTheme","IOListItemStyles","IOListItemVisualParams","useListItemAnimation","useIOFontDynamicScale","Badge","IOButton","IconButton","LogoPaymentWithFallback","Icon","VSpacer","BodySmall","H6","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PAYMENT_LOGO_SIZE","EndElementComponent","type","componentProps","variant","accessibilityLabel","label","ListItemInfoContent","icon","paymentLogoIcon","value","numberOfLines","reversed","topElement","endElement","theme","hugeFontEnabled","children","allowFontScaling","name","color","size","iconSize","brand","style","flex","accessible","OS","flexDirection","alignSelf","weight","ListItemInfo","accessibilityRole","accessibilityActions","onAccessibilityAction","onLongPress","testID","dynamicFontScale","spacingScaleMultiplier","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","componentValueToAccessibility","listItemAccessibilityLabel","contentProps","onTouchEnd","listItem","listItemInner","columnGap","iconMargin"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Pressable","View","Animated","useIOTheme","IOListItemStyles","IOListItemVisualParams","useListItemAnimation","useIOFontDynamicScale","Badge","IOButton","IconButton","LogoPaymentWithFallback","Icon","VSpacer","BodySmall","H6","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PAYMENT_LOGO_SIZE","EndElementComponent","type","componentProps","variant","accessibilityLabel","label","ListItemInfoContent","icon","paymentLogoIcon","value","numberOfLines","reversed","topElement","endElement","hasInteractiveElements","listItemAccessibilityLabel","theme","hugeFontEnabled","children","allowFontScaling","name","color","size","iconSize","brand","style","flex","accessible","undefined","importantForAccessibility","flexDirection","alignSelf","weight","ListItemInfo","accessibilityRole","accessibilityActions","onAccessibilityAction","onLongPress","testID","dynamicFontScale","spacingScaleMultiplier","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","componentValueToAccessibility","topBadgeText","text","endBadgeText","mainTextParts","textParts","filter","Boolean","join","contentProps","onTouchEnd","listItem","listItemInner","columnGap","iconMargin"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfo.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/components/loadingSpinner/LoadingSpinner.js

@@ -1,21 +1,31 @@
 "use strict";
 
-import { useEffect } from "react";
+import { useId } from "react";
 import { 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";
 
 /**
- * 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
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const spinKeyframes = {
+  from: {
+    transform: [{
+      rotateZ: "0deg"
+    }]
+  },
+  to: {
+    transform: [{
+      rotateZ: "360deg"
+    }]
+  }
+};
 const strokeMap = {
   24: 3,
-  48: 5,
-  76: 7
+  48: 5
 };
 export const LoadingSpinner = ({
   color: customColor,
@@ -26,21 +36,11 @@ export const LoadingSpinner = ({
   testID = "LoadingSpinnerTestID"
 }) => {
   const theme = useIOTheme();
-  const rotation = useSharedValue(0);
+  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 /*#__PURE__*/_jsx(View, {
     style: {
       width: size,
@@ -53,7 +53,13 @@ export const LoadingSpinner = ({
     testID: testID,
     children: /*#__PURE__*/_jsx(Animated.View, {
       testID: "LoadingSpinnerAnimatedTestID",
-      style: animatedStyle,
+      style: {
+        animationName: spinKeyframes,
+        animationDuration: durationMs,
+        animationIterationCount: "infinite",
+        animationTimingFunction: "linear",
+        transformOrigin: "center"
+      },
       children: /*#__PURE__*/_jsxs(Svg, {
         width: size,
         height: size,
@@ -61,7 +67,7 @@ export const LoadingSpinner = ({
         fill: "none",
         children: [/*#__PURE__*/_jsxs(Defs, {
           children: [/*#__PURE__*/_jsxs(LinearGradient, {
-            id: "spinner-secondHalf",
+            id: secondHalfId,
             children: [/*#__PURE__*/_jsx(Stop, {
               offset: "0%",
               stopOpacity: "0",
@@ -72,7 +78,7 @@ export const LoadingSpinner = ({
               stopColor: color
             })]
           }), /*#__PURE__*/_jsxs(LinearGradient, {
-            id: "spinner-firstHalf",
+            id: firstHalfId,
             children: [/*#__PURE__*/_jsx(Stop, {
               offset: "0%",
               stopOpacity: "1",
@@ -86,10 +92,10 @@ export const LoadingSpinner = ({
         }), /*#__PURE__*/_jsxs(G, {
           strokeWidth: stroke,
           children: [/*#__PURE__*/_jsx(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}`
           }), /*#__PURE__*/_jsx(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}`
           }), /*#__PURE__*/_jsx(Path, {
             stroke: color,

package/lib/module/components/loadingSpinner/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","View","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","Svg","Defs","G","LinearGradient","Path","Stop","useIOTheme","IOColors","jsx","_jsx","jsxs","_jsxs","strokeMap","LoadingSpinner","color","customColor","size","durationMs","accessibilityHint","accessibilityLabel","testID","theme","rotation","stroke","value","duration","easing","linear","animatedStyle","transform","rotateZ","style","width","height","accessible","accessibilityRole","children","viewBox","fill","id","offset","stopOpacity","stopColor","strokeWidth","d","strokeLinecap"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useId","View","Animated","Svg","Defs","G","LinearGradient","Path","Stop","useIOTheme","IOColors","jsx","_jsx","jsxs","_jsxs","spinKeyframes","from","transform","rotateZ","to","strokeMap","LoadingSpinner","color","customColor","size","durationMs","accessibilityHint","accessibilityLabel","testID","theme","id","stroke","secondHalfId","firstHalfId","style","width","height","accessible","accessibilityRole","children","animationName","animationDuration","animationIterationCount","animationTimingFunction","transformOrigin","viewBox","fill","offset","stopOpacity","stopColor","strokeWidth","d","strokeLinecap"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/listitems/ListItemInfo.d.ts

@@ -36,6 +36,35 @@ export type ListItemInfo = WithTestID<{
     accessibilityRole?: AccessibilityRole;
     reversed?: boolean;
 }> & GraphicProps & InteractiveProps;
+/**
+ * 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 declare const ListItemInfo: ({ value, label, numberOfLines, reversed, icon, paymentLogoIcon, endElement, topElement, accessibilityLabel, accessibilityRole, accessibilityActions, onAccessibilityAction, onLongPress, testID }: ListItemInfo) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ListItemInfo.d.ts.map

package/lib/typescript/components/listitems/ListItemInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAY,SAAS,EAAQ,MAAM,cAAc,CAAC;AAM5E,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAY,yBAAyB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;CACnD,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,eAAe,GAChB,qBAAqB,GACrB,qBAAqB,GACrB,UAAU,CAAC;AAEf,KAAK,YAAY,GACb;IACE,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACE,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEN,KAAK,gBAAgB,GAAG,IAAI,CAC1B,cAAc,CAAC,OAAO,SAAS,CAAC,EAChC,aAAa,GAAG,sBAAsB,GAAG,uBAAuB,CACjE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,GACA,YAAY,GACZ,gBAAgB,CAAC;AAuGnB,eAAO,MAAM,YAAY,GAAI,mMAe1B,YAAY,4CAoFd,CAAC"}
+{"version":3,"file":"ListItemInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAMlE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAY,yBAAyB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;CAC5D,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;CACnD,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,eAAe,GAChB,qBAAqB,GACrB,qBAAqB,GACrB,UAAU,CAAC;AAEf,KAAK,YAAY,GACb;IAAE,eAAe,CAAC,EAAE,iBAAiB,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GACrD;IAAE,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,CAC1B,cAAc,CAAC,OAAO,SAAS,CAAC,EAChC,aAAa,GAAG,sBAAsB,GAAG,uBAAuB,CACjE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,GACA,YAAY,GACZ,gBAAgB,CAAC;AA4HnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,YAAY,GAAI,mMAe1B,YAAY,4CAoHd,CAAC"}

package/lib/typescript/components/loadingSpinner/LoadingSpinner.d.ts

@@ -9,9 +9,8 @@ export type LoadingSpinner = WithTestID<{
     accessibilityHint?: string;
 }>;
 /**
- * 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;
 export declare const LoadingSpinner: ({ color: customColor, size, durationMs, accessibilityHint, accessibilityLabel, testID }: LoadingSpinner) => ReactElement;
 //# sourceMappingURL=LoadingSpinner.d.ts.map

package/lib/typescript/components/loadingSpinner/LoadingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/loadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,UAAU,EAAQ,MAAM,cAAc,CAAC;AAWhD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,yBAAyB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAQrD,eAAO,MAAM,cAAc,GAAI,yFAO5B,cAAc,KAAG,YA+EnB,CAAC"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/loadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAQ,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,yBAAyB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,EAAE,GAAG,EAAE,CAAC;AAYhD,eAAO,MAAM,cAAc,GAAI,yFAO5B,cAAc,KAAG,YA2EnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -584,7 +584,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
                         <RNSVGPath
                           d="m7 12 4 4 7-7"
                           fill={null}
-                          onLayout={[Function]}
+                          onSvgLayout={[Function]}
                           propList={
                             [
                               "fill",
@@ -906,7 +906,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
       }
     >
       <View
-        accessibilityLabel="Nome e cognome; "
+        accessibilityLabel="Nome e cognome"
         accessibilityRole="image"
         accessible={true}
         style={
@@ -939,7 +939,8 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
             }
           >
             <View
-              accessible={true}
+              accessible={false}
+              importantForAccessibility="no-hide-descendants"
               style={
                 {
                   "flexDirection": "column-reverse",
@@ -1825,7 +1826,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
       }
     >
       <View
-        accessibilityLabel="Nome e cognome; Mario Rossi"
+        accessibilityLabel="Mario Rossi; Nome e cognome"
         accessibilityRole="text"
         accessible={true}
         style={
@@ -1858,7 +1859,8 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
             }
           >
             <View
-              accessible={true}
+              accessible={false}
+              importantForAccessibility="no-hide-descendants"
               style={
                 {
                   "flexDirection": "column-reverse",