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

package/src/components/listitems/ListItemRadio.tsx

@@ -211,6 +211,11 @@ export const ListItemRadio = ({
     <SkeletonComponent />
   ) : (
     <Pressable
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: selected ?? toggleValue,
+        disabled: !!disabled
+      }}
       onPress={toggleRadioItem}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
@@ -246,7 +251,11 @@ export const ListItemRadio = ({
                     />
                   )}
                   {startImage.uri && (
-                    <Image source={startImage} style={styles.imageSize} />
+                    <Image
+                      accessibilityIgnoresInvertColors
+                      source={startImage}
+                      style={styles.imageSize}
+                    />
                   )}
                   {startImage.paymentLogo && (
                     <LogoPayment

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

@@ -179,6 +179,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
       }
     />
     <Image
+      accessibilityIgnoresInvertColors={true}
       source={
         {
           "uri": "undefined",
@@ -447,7 +448,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -470,19 +470,26 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -618,7 +625,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -641,19 +647,26 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -751,7 +764,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4294862438}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -774,19 +786,26 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               },
             ]
           }
-          tintColor={4294862438}
+          tintColor="#FE6666"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -851,7 +870,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -874,19 +892,26 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -1031,7 +1056,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             align="xMidYMid"
             bbHeight={16}
             bbWidth={16}
-            color={4283766755}
             focusable={false}
             height={16}
             importantForAccessibility="no-hide-descendants"
@@ -1054,18 +1078,25 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 },
               ]
             }
-            tintColor={4283766755}
+            tintColor="#5517E3"
             vbHeight={17}
             vbWidth={16}
             width={16}
           >
-            <RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
               <RNSVGPath
                 d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"
                 fill={
-                  [
-                    2,
-                  ]
+                  {
+                    "type": 2,
+                  }
                 }
                 propList={
                   [
@@ -1184,7 +1215,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "text": undefined,
             }
           }
-          accessible={true}
+          accessible={false}
           collapsable={false}
           focusable={true}
           onBlur={[Function]}
@@ -1272,7 +1303,14 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               vbHeight={24}
               vbWidth={24}
             >
-              <RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
@@ -1287,7 +1325,12 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                       "strokeLinejoin",
                     ]
                   }
-                  stroke={4294967295}
+                  stroke={
+                    {
+                      "payload": 4294967295,
+                      "type": 0,
+                    }
+                  }
                   strokeDasharray={null}
                   strokeLinecap={1}
                   strokeLinejoin={1}
@@ -1479,7 +1522,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "text": undefined,
             }
           }
-          accessible={true}
+          accessible={false}
           collapsable={false}
           focusable={true}
           onBlur={[Function]}
@@ -1941,6 +1984,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
       }
     />
     <Image
+      accessibilityIgnoresInvertColors={true}
       source={
         {
           "uri": "undefined",
@@ -2209,7 +2253,6 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -2232,19 +2275,26 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278219750}
+          tintColor="#0073E6"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -2380,7 +2430,6 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -2403,19 +2452,26 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278219750}
+          tintColor="#0073E6"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -2513,7 +2569,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4294862438}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -2536,19 +2591,26 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4294862438}
+          tintColor="#FE6666"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -2613,7 +2675,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -2636,19 +2697,26 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278219750}
+          tintColor="#0073E6"
           vbHeight={24}
           vbWidth={24}
           width={24}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGPath
               clipRule={0}
               d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
               fill={
-                [
-                  2,
-                ]
+                {
+                  "type": 2,
+                }
               }
               fillRule={0}
               propList={
@@ -2793,7 +2861,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             align="xMidYMid"
             bbHeight={16}
             bbWidth={16}
-            color={4283766755}
             focusable={false}
             height={16}
             importantForAccessibility="no-hide-descendants"
@@ -2816,18 +2883,25 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 },
               ]
             }
-            tintColor={4283766755}
+            tintColor="#5517E3"
             vbHeight={17}
             vbWidth={16}
             width={16}
           >
-            <RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
               <RNSVGPath
                 d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"
                 fill={
-                  [
-                    2,
-                  ]
+                  {
+                    "type": 2,
+                  }
                 }
                 propList={
                   [
@@ -2946,7 +3020,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               "text": undefined,
             }
           }
-          accessible={true}
+          accessible={false}
           collapsable={false}
           focusable={true}
           onBlur={[Function]}
@@ -3034,7 +3108,14 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               vbHeight={24}
               vbWidth={24}
             >
-              <RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
@@ -3049,7 +3130,12 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                       "strokeLinejoin",
                     ]
                   }
-                  stroke={4294967295}
+                  stroke={
+                    {
+                      "payload": 4294967295,
+                      "type": 0,
+                    }
+                  }
                   strokeDasharray={null}
                   strokeLinecap={1}
                   strokeLinejoin={1}
@@ -3241,7 +3327,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               "text": undefined,
             }
           }
-          accessible={true}
+          accessible={false}
           collapsable={false}
           focusable={true}
           onBlur={[Function]}

package/src/components/logos/LogoPaymentCard.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { hexToRgba, IOColors } from "../../core";
+import { StyleSheet, View } from "react-native";
+import { WithTestID } from "src/utils/types";
+import { IOColors, hexToRgba } from "../../core";
 
 /* Logos */
-import LogoPaymentCardPayPal from "./svg/LogoPaymentCardPayPal";
 import LogoPaymentCardBancomatPay from "./svg/LogoPaymentCardBancomatPay";
+import LogoPaymentCardPayPal from "./svg/LogoPaymentCardPayPal";
 import { SVGCardLogoProps } from "./types";
 
 export const IOPaymentCardLogos = {
@@ -14,13 +15,14 @@ export const IOPaymentCardLogos = {
 
 export type IOLogoPaymentCardType = keyof typeof IOPaymentCardLogos;
 
-type IOPaymentLogos = {
+type IOPaymentLogos = WithTestID<{
   name: IOLogoPaymentCardType;
+  accessibilityLabel: string;
   align: "start" | "center" | "end";
   width?: "100%" | number;
   height?: number;
   debugMode?: boolean;
-};
+}>;
 
 const preserveAspectRatioValues: Record<
   IOPaymentLogos["align"],
@@ -42,12 +44,19 @@ const LogoPaymentCard = ({
   width = "100%",
   height = 32,
   align = "center",
+  accessibilityLabel,
+  testID,
   debugMode = false,
   ...props
 }: IOPaymentLogos) => {
   const LogoElement = IOPaymentCardLogos[name];
   return (
-    <View style={[{ width, height }, debugMode && styles.debugMode]}>
+    <View
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      style={[{ width, height }, debugMode && styles.debugMode]}
+      testID={testID}
+    >
       <LogoElement
         preserveAspectRatio={preserveAspectRatioValues[align]}
         {...props}

package/src/components/modules/ModuleIDP.tsx

@@ -83,7 +83,11 @@ export const ModuleIDP = ({
       >
         {name}
       </Text>
-      <Image source={urlLogoIDP} style={styles.idpLogo} />
+      <Image
+        accessibilityIgnoresInvertColors
+        source={urlLogoIDP}
+        style={styles.idpLogo}
+      />
     </PressableModuleBase>
   );
 };

package/src/components/radio/AnimatedRadio.tsx

@@ -101,6 +101,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
 
   return (
     <Pressable
+      accessible={false}
       disabled={disabled}
       testID="AnimatedRadioInput"
       onPress={onPress}

package/src/components/radio/RadioButtonLabel.tsx

@@ -49,13 +49,18 @@ export const RadioButtonLabel = ({
 
   return (
     <Pressable
-      disabled={disabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
       onPress={toggleRadioButton}
-      testID="AnimatedRadioButton"
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
+      disabled={disabled}
+      testID="AnimatedRadioButton"
     >
       <View
         style={[

package/src/components/switch/AnimatedSwitch.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing,
-  interpolateColor
+  withTiming
 } from "react-native-reanimated";
-import { IOColors } from "../../core/IOColors";
 import { IOSpringValues } from "../../core/IOAnimations";
-import { AnimatedTick } from "../common/AnimatedTick";
+import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
+import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
   checked?: boolean;
@@ -106,6 +106,7 @@ export const AnimatedSwitch = ({ checked, onPress, disabled }: OwnProps) => {
 
   return (
     <Pressable
+      accessibilityRole="switch"
       disabled={disabled}
       testID="AnimatedSwitch"
       onPress={onPress}

package/src/components/switch/SwitchLabel.tsx

@@ -78,11 +78,16 @@ export const SwitchLabel = ({
     <Pressable
       disabled={disabled}
       onPress={toggleCheckbox}
-      testID="AnimatedCheckbox"
+      accessibilityRole="switch"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
+      testID="SwitchLabel"
     >
       <View
         style={[