@pagopa/io-app-design-system 1.29.0 → 1.31.0

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={80}
         bbWidth={80}
-        color={4278240714}
+        color="#00C5CA"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -252,15 +252,27 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             },
           ]
         }
-        tintColor={4278240714}
+        tintColor="#00C5CA"
         vbHeight={240}
         vbWidth={240}
         width={80}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -269,7 +281,12 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -278,7 +295,12 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -287,7 +309,12 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -296,7 +323,12 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-            fill={4289392367}
+            fill={
+              {
+                "payload": 4289392367,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -305,7 +337,12 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-            fill={4278240714}
+            fill={
+              {
+                "payload": 4278240714,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -552,7 +589,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={80}
         bbWidth={80}
-        color={4278240714}
+        color="#00C5CA"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -571,15 +608,27 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             },
           ]
         }
-        tintColor={4278240714}
+        tintColor="#00C5CA"
         vbHeight={240}
         vbWidth={240}
         width={80}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -588,7 +637,12 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -597,7 +651,12 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -606,7 +665,12 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-            fill={4278927075}
+            fill={
+              {
+                "payload": 4278927075,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -615,7 +679,12 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-            fill={4289392367}
+            fill={
+              {
+                "payload": 4289392367,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",
@@ -624,7 +693,12 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           />
           <RNSVGPath
             d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-            fill={4278240714}
+            fill={
+              {
+                "payload": 4278240714,
+                "type": 0,
+              }
+            }
             propList={
               [
                 "fill",

package/src/components/buttons/ButtonSolid.tsx

@@ -310,7 +310,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
               entering={
                 isMounted.current ? enterTransitionInnerContent : undefined
               }
-              exiting={exitTransitionInnerContent}
+              /* Temporarily disable the exiting transition because it caused
+              a weird glitch on page exit */
+              // exiting={exitTransitionInnerContent}
             >
               {icon && (
                 <>

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -112,7 +112,6 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -135,19 +134,26 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={24}
         vbWidth={24}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
             fill={
-              [
-                2,
-              ]
+              {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -448,7 +454,6 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
     }
   >
     <View
-      exiting={[Function]}
       style={
         [
           {
@@ -572,7 +577,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278927075}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -595,19 +599,26 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
           },
         ]
       }
-      tintColor={4278927075}
+      tintColor="#0B3EE3"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -698,7 +709,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278927075}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -721,19 +731,26 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
           },
         ]
       }
-      tintColor={4278927075}
+      tintColor="#0B3EE3"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -822,7 +839,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
-      color={4294967295}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -845,19 +861,26 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
           },
         ]
       }
-      tintColor={4294967295}
+      tintColor="#FFFFFF"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -985,7 +1008,6 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -1008,19 +1030,26 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={24}
         vbWidth={24}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
             fill={
-              [
-                2,
-              ]
+              {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -1318,7 +1347,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <View
-      exiting={[Function]}
       style={
         [
           {
@@ -1442,7 +1470,6 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -1465,19 +1492,26 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           },
         ]
       }
-      tintColor={4278219750}
+      tintColor="#0073E6"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -1568,7 +1602,6 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -1591,19 +1624,26 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
           },
         ]
       }
-      tintColor={4278219750}
+      tintColor="#0073E6"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -1692,7 +1732,6 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
-      color={4294967295}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -1715,19 +1754,26 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
           },
         ]
       }
-      tintColor={4294967295}
+      tintColor="#FFFFFF"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
           fill={
-            [
-              2,
-            ]
+            {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -105,10 +105,11 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
 
   return (
     <Pressable
+      accessible={false}
       disabled={disabled}
-      testID="AnimatedCheckboxInput"
       onPress={onPress}
       style={styles.checkBoxWrapper}
+      testID="AnimatedCheckboxInput"
     >
       <View
         style={[

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -55,7 +55,7 @@ export const AnimatedMessageCheckbox = ({
   const isChecked = checked ?? true;
   const { isExperimental } = useIOExperimentalDesign();
 
-  const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const shapeAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
   const backgroundColorOnState =
     IOColors[IOSelectionTickVisualParams.bgColorOnState];
@@ -68,7 +68,7 @@ export const AnimatedMessageCheckbox = ({
 
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
-    circleAnimationProgress.value = withSpring(
+    shapeAnimationProgress.value = withSpring(
       checked ? 1 : 0,
       IOSpringValues.selection
     );
@@ -77,11 +77,11 @@ export const AnimatedMessageCheckbox = ({
       duration: 250,
       easing: Easing.out(Easing.cubic)
     });
-  }, [checked, circleAnimationProgress, tickAnimationProgress]);
+  }, [checked, shapeAnimationProgress, tickAnimationProgress]);
 
-  const animatedCheckboxCircle = useAnimatedStyle(() => {
-    const scale = interpolate(circleAnimationProgress.value, [0, 1], [0.8, 1]);
-    const opacity = circleAnimationProgress.value;
+  const animatedCheckboxShape = useAnimatedStyle(() => {
+    const scale = interpolate(shapeAnimationProgress.value, [0, 1], [0.8, 1]);
+    const opacity = shapeAnimationProgress.value;
 
     return {
       opacity,
@@ -91,6 +91,8 @@ export const AnimatedMessageCheckbox = ({
 
   return (
     <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked }}
       testID="AnimatedMessageCheckboxInput"
       onPress={onPress}
       style={styles.checkBoxWrapper}
@@ -101,7 +103,7 @@ export const AnimatedMessageCheckbox = ({
           {
             backgroundColor: backgroundColorProp
           },
-          animatedCheckboxCircle
+          animatedCheckboxShape
         ]}
       />
       {isChecked && (

package/src/components/checkbox/CheckboxLabel.tsx

@@ -56,6 +56,11 @@ export const CheckboxLabel = ({
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
       // This is required to avoid opacity
       // inheritance on Android
       needsOffscreenAlphaCompositing={true}

package/src/components/image/Image.tsx

@@ -44,6 +44,11 @@ export const IOImage = ({
   );
 
   return (
-    <Image {...imageProps} style={[styles.image, aspectRatioStyle]} alt={alt} />
+    <Image
+      accessibilityIgnoresInvertColors
+      {...imageProps}
+      style={[styles.image, aspectRatioStyle]}
+      alt={alt}
+    />
   );
 };

package/src/components/listitems/ListItemNav.tsx

@@ -30,9 +30,9 @@ import {
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
+import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
 import { Caption, H6, LabelSmall } from "../typography";
-import { LoadingSpinner } from "../loadingSpinner";
 
 type ListItemTopElementProps =
   | {
@@ -219,6 +219,7 @@ export const ListItemNav = ({
           {paymentLogoUri && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
               <Image
+                accessibilityIgnoresInvertColors
                 source={{ uri: paymentLogoUri }}
                 style={styles.paymentLogoSize}
               />