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

package/src/components/icons/svg/originals/IconCategSport.svg

@@ -1,8 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M5.066 14.204c-.908 1.836-1.275 3.846-1.02 5.773a.747.747 0 0 0 .287.496c3.22 2.474 8.112 2.78 12.275.376 4.164-2.404 6.345-6.792 5.813-10.819a.753.753 0 0 0-.287-.497c-1.954-1.5-4.522-2.203-7.17-1.987A6.754 6.754 0 0 0 8.25 1.501a6.753 6.753 0 0 0-6.75 6.75 6.753 6.753 0 0 0 3.566 5.953Zm11.652-5.166 3.424 5.931c-.855 1.816-2.322 3.449-4.284 4.58-1.96 1.133-4.108 1.588-6.109 1.42l-3.424-5.931c.855-1.816 2.323-3.449 4.283-4.581 1.961-1.132 4.11-1.587 6.11-1.42ZM5.676 16.913l2.125 3.68a8.195 8.195 0 0 1-2.302-1.123 8.193 8.193 0 0 1 .177-2.556Zm9.131-3.684-1.3.75-.374-.65a.75.75 0 0 0-1.3.75l.376.65-1.3.75-.374-.65a.75.75 0 0 0-1.3.75l.376.65a.75.75 0 0 0 .75 1.299l.375.65a.75.75 0 0 0 1.299-.75l-.375-.65 1.299-.75.375.65a.75.75 0 0 0 1.299-.75l-.375-.65 1.3-.75.374.65a.75.75 0 0 0 1.3-.75l-.375-.65a.75.75 0 0 0-.75-1.3l-.375-.649a.75.75 0 0 0-1.3.75l.375.65Zm3.86-3.816c.829.257 1.606.633 2.301 1.125.077.848.015 1.709-.177 2.556l-2.125-3.68Zm-7.382-5.445A5.22 5.22 0 0 0 8.25 3a5.22 5.22 0 0 0-3.034.967A6.72 6.72 0 0 1 6.75 8.25a6.72 6.72 0 0 1-1.534 4.283c.192.137.393.261.604.37a12.189 12.189 0 0 1 3.994-3.72 6.72 6.72 0 0 1 1.47-5.216Zm-7.16 1.037A5.226 5.226 0 0 0 3 8.251c0 1.225.421 2.353 1.125 3.246A5.227 5.227 0 0 0 5.25 8.251c0-1.225-.42-2.353-1.125-3.246Zm8.25 0a5.227 5.227 0 0 0-1.12 3.457 12.176 12.176 0 0 1 2.223-.699 5.22 5.22 0 0 0-1.103-2.758Z"
-    fill="#000"
-  />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.9662 11.1717C19.5678 11.5812 17.4122 12.7023 15.7244 14.3102L13.4142 12L19.7071 5.70711C19.7192 5.69506 19.7308 5.68278 19.7421 5.67028C20.9894 7.19409 21.7957 9.09285 21.9662 11.1717ZM23.959 11.0006C23.4511 4.84079 18.2909 0 12 0C5.37258 0 0 5.37258 0 12V12.0001C0 12.3368 0.0138699 12.6703 0.0410685 13H0.0410724C0.549215 19.1595 5.70933 24 12 24C12.0137 24 12.0274 24 12.0411 23.9999C12.0411 24 12.0411 24 12.0411 24C12.7201 23.9977 13.3858 23.9391 14.0338 23.8284C14.0338 23.8284 14.0338 23.8284 14.0338 23.8284C19.3714 22.9171 23.5067 18.4808 23.9589 13.0002C23.984 12.6957 23.9978 12.3881 23.9998 12.0776C23.9999 12.0518 24 12.0259 24 12.0001C24 12 24 12 24 12C24 11.6635 23.9861 11.3301 23.959 11.0006ZM21.9269 13.2152C20.0965 13.6011 18.4506 14.4876 17.1391 15.7249L19.7071 18.2929C19.7192 18.3049 19.7308 18.3172 19.7421 18.3297C20.9116 16.901 21.6934 15.1426 21.9269 13.2152ZM14.3934 15.8076L12 13.4142L5.70711 19.7071C5.69506 19.7192 5.68278 19.7308 5.67028 19.7421C7.3943 21.1533 9.59827 22 12 22C12.0137 22 12.0274 22 12.0411 21.9999C12.2319 19.6879 13.078 17.5617 14.3934 15.8076ZM14.0731 21.7848C14.2765 20.106 14.8958 18.5555 15.8251 17.2393L18.2929 19.7071C18.3049 19.7192 18.3172 19.7308 18.3297 19.7421C17.1159 20.7357 15.6642 21.4494 14.0731 21.7848ZM10.5858 12L4.29289 18.2929C4.28084 18.3049 4.26917 18.3172 4.25786 18.3297C3.01059 16.8059 2.20429 14.9072 2.03382 12.8284C4.43222 12.419 6.58787 11.2978 8.27569 9.6899L10.5858 12ZM6.86097 8.27519C5.5495 9.51245 3.90355 10.399 2.07308 10.7849C2.30655 8.85746 3.08836 7.09905 4.25786 5.67028C4.26917 5.68278 4.28084 5.69506 4.29289 5.70711L6.86097 8.27519ZM12 10.5858L9.60662 8.1924C10.922 6.4383 11.7682 4.31212 11.9589 2.00008L12 2C14.4017 2 16.6057 2.84669 18.3297 4.25786C18.3172 4.26917 18.3049 4.28084 18.2929 4.29289L12 10.5858ZM8.175 6.76078C9.1042 5.44456 9.72356 3.89397 9.92692 2.21516C8.33579 2.55059 6.88408 3.26432 5.67028 4.25786C5.68278 4.26917 5.69506 4.28084 5.70711 4.29289L8.175 6.76078Z" fill="#BBC2D6"/></svg>

package/src/components/icons/svg/originals/IconCategTelco.svg

@@ -1,13 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M9.123 20.033c0 .646-.526 1.172-1.172 1.172a1.174 1.174 0 0 1-1.171-1.172c0-.645.526-1.172 1.171-1.172.646 0 1.172.527 1.172 1.172ZM23.291 12a6.998 6.998 0 0 1-8.097 6.902v2.716A2.385 2.385 0 0 1 12.81 24h-9.72A2.385 2.385 0 0 1 .71 21.618V2.382A2.385 2.385 0 0 1 3.092 0h9.72a2.385 2.385 0 0 1 2.382 2.382v2.716A6.998 6.998 0 0 1 23.29 12ZM5.276 1.5l.224.69h4.903l.224-.69H5.276Zm8.418 16.986A7.001 7.001 0 0 1 9.31 12a7.001 7.001 0 0 1 4.384-6.486V2.382a.883.883 0 0 0-.883-.882h-.607l-.543 1.672a.75.75 0 0 1-.713.519H4.955a.75.75 0 0 1-.713-.519L3.698 1.5h-.606a.883.883 0 0 0-.883.882v19.236c0 .486.396.882.883.882h9.72a.883.883 0 0 0 .882-.882v-3.132ZM21.79 12a5.496 5.496 0 0 0-5.49-5.49A5.496 5.496 0 0 0 10.81 12a5.496 5.496 0 0 0 5.49 5.49A5.496 5.496 0 0 0 21.79 12Z"
-    fill="#000"
-  />
-  <path d="M10.595 11.25h11.41v1.5h-11.41v-1.5Z" fill="#000" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="m17.635 7.12.007-.004a7.037 7.037 0 0 0-1.241-1.013A6.995 6.995 0 0 0 13.174 12a6.995 6.995 0 0 0 3.227 5.897c.452-.29.868-.63 1.241-1.013a.155.155 0 0 1-.007-.004A6.977 6.977 0 0 0 19.616 12c0-1.898-.755-3.62-1.981-4.88Zm-1.24.884A5.485 5.485 0 0 0 14.675 12c0 1.574.66 2.994 1.72 3.996A5.485 5.485 0 0 0 18.116 12a5.485 5.485 0 0 0-1.72-3.996Z"
-    fill="#000"
-  />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C6.23858 0 4 2.23858 4 5V19C4 21.7614 6.23858 24 9 24H15C17.7614 24 20 21.7614 20 19V5C20 2.23858 17.7614 0 15 0H9ZM6 5C6 3.34315 7.34315 2 9 2H15C16.6569 2 18 3.34315 18 5V19C18 20.6569 16.6569 22 15 22H9C7.34315 22 6 20.6569 6 19V5ZM12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" fill="#BBC2D6"/></svg>

package/src/components/icons/svg/originals/IconCategTravel.svg

@@ -1,12 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M7.712 11.941a.704.704 0 1 1 0-1.408.704.704 0 0 1 0 1.408ZM9.824 11.237a.704.704 0 1 0 1.408 0 .704.704 0 0 0-1.408 0ZM13.344 11.941a.704.704 0 1 1 0-1.408.704.704 0 0 1 0 1.408ZM15.46 11.234a.704.704 0 1 0 1.409.015.704.704 0 0 0-1.408-.015Z"
-    fill="#000"
-  />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="m.457 12.253 1.512-2.135a5.697 5.697 0 0 1 4.644-2.401h1.198l4.523-4.045a.703.703 0 0 1 .468-.18h4.063c.541-.017.9.645.589 1.09l-2.043 3.135h1.632c.751 0 1.426-.447 1.72-1.14l.722-1.708a2.25 2.25 0 0 1 2.077-1.376h1.735a.703.703 0 0 1 .687.852l-1.753 8.14a4.675 4.675 0 0 1-1.63 2.646 4.684 4.684 0 0 1-2.932 1.035h-1.784l2.046 3.263c.299.446-.06 1.095-.596 1.079h-4.627a.703.703 0 0 1-.493-.202l-3.803-3.739a1.888 1.888 0 0 1-.311-.401H2.484a2.473 2.473 0 0 1-2.207-1.344 2.47 2.47 0 0 1 .18-2.57ZM15.567 4.9H13.07L9.922 7.717h3.81L15.567 4.9Zm-6.17 10.661 3.598 3.537h3.069l-2.722-4.341H9.73c-.442.021-.632.48-.333.804Zm-7.87-1.386c.188.364.546.582.957.582H7.91a1.872 1.872 0 0 1 1.82-1.408h4c.243 0 .467.124.596.33l.676 1.078h2.667a3.263 3.263 0 0 0 3.187-2.569l1.57-7.288h-.864a.847.847 0 0 0-.782.517l-.723 1.709a3.268 3.268 0 0 1-3.014 1.998H6.613c-1.22 0-2.377.522-3.183 1.416l1.49.008a.704.704 0 0 1-.004 1.409h-.004L2.4 11.943l-.795 1.124a1.052 1.052 0 0 0-.078 1.109Z"
-    fill="#000"
-  />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.348971 12.0644L2.91373 14.1928C3.85392 14.973 4.99406 15.4429 6.21094 15.5517C6.39135 15.5679 6.57148 15.5759 6.75096 15.5759C7.78213 15.5759 8.79093 15.3112 9.6969 14.7992L22.5598 7.53064C23.2199 7.15603 23.6945 6.54682 23.8964 5.81518C24.0983 5.08363 24.0031 4.31716 23.6286 3.65709C22.8639 2.30958 21.1386 1.82313 19.7862 2.57095L15.5589 4.8839L10.0863 3.70223C7.93995 3.22966 5.68432 3.53532 3.73467 4.56268C3.42287 4.72697 3.22956 5.05232 3.23435 5.40476C3.23913 5.75724 3.4412 6.0772 3.75736 6.23296L8.77781 8.70665L6.07824 10.1735L5.53235 9.98628C3.83676 9.40454 1.98733 9.6075 0.458279 10.5434C0.200242 10.7012 0.0342643 10.974 0.012562 11.2758C-0.0090934 11.5775 0.116152 11.8712 0.348971 12.0644ZM4.92399 11.7598L5.85962 12.0808C6.108 12.1659 6.38071 12.1432 6.61142 12.0177L11.2638 9.48966C11.5716 9.32242 11.7605 8.99749 11.7535 8.64721C11.7465 8.29697 11.5448 7.97988 11.2306 7.82501L6.55316 5.5203C7.58015 5.30445 8.649 5.30557 9.68687 5.53408L15.5047 6.79024C15.7249 6.83777 15.9549 6.80449 16.1525 6.6963L20.6898 4.21366C21.1511 3.95872 21.7378 4.12414 21.9979 4.58242C22.1253 4.80684 22.1577 5.0676 22.089 5.3164C22.0203 5.56521 21.8589 5.77243 21.6359 5.89904L8.77448 13.1669C7.29389 14.0035 5.41986 13.836 4.11106 12.7499L2.75108 11.6213C3.46548 11.4728 4.21432 11.5163 4.92399 11.7598ZM23.9991 21.0608C23.9991 21.5786 23.5794 21.9983 23.0616 21.9983H0.937464C0.419703 21.9983 0 21.5786 0 21.0608C0 20.5431 0.419703 20.1234 0.937464 20.1234H23.0616C23.5794 20.1234 23.9991 20.5431 23.9991 21.0608Z" fill="#BBC2D6"/></svg>

package/src/components/icons/svg/originals/IconCategWellness.svg

@@ -1,10 +1 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M23.91 17.966c-.845-1.514-2.309-2.736-4.082-3.43.747-1.323 1.208-3.112 1.442-4.22a19.5 19.5 0 0 0 .39-2.702c.08-1.295-.115-1.679-.337-1.9-.237-.238-.605-.344-1.233-.355-.422-.008-.968.028-1.578.104l-.08.01c-.828-2.202-1.342-2.358-1.57-2.428-.387-.117-.866.025-1.656.49-.409.24-.882.56-1.371.926-1.532-1.937-2.122-1.936-3.654 0-.49-.365-.962-.685-1.372-.926-1.626-.908-2.11-.9-3.225 1.939l-.08-.01a11.687 11.687 0 0 0-1.578-.105c-.628.011-.997.117-1.234.354-.705.665-.197 3.313.054 4.603.233 1.107.694 2.892 1.439 4.214-1.78.694-3.244 1.912-4.096 3.436a.703.703 0 0 0 .175.892c3.254 2.636 8.787 1.936 11.497-1.182.158.008.32.008.479 0 2.71 3.119 8.243 3.818 11.496 1.182a.703.703 0 0 0 .175-.892ZM20.267 6.773c.165 1.593-.986 6.768-2.203 7.824-.535.536-1.21.9-1.933 1.065 2.088-2.696 1.259-5.4-.335-8.226a21.4 21.4 0 0 1 2.627-.543c.971-.136 1.556-.14 1.844-.12Zm-3.84-2.294c.127.201.333.588.588 1.227-.67.133-1.34.296-1.964.48a23.934 23.934 0 0 0-.388-.59c.845-.631 1.453-.98 1.763-1.117Zm-8.836 0c.31.138.92.486 1.763 1.118-.13.191-.26.389-.388.59a22.222 22.222 0 0 0-1.963-.48c.256-.64.461-1.027.588-1.228ZM3.75 6.773c.288-.02.873-.016 1.843.12.865.12 1.785.312 2.628.543-1.596 2.829-2.423 5.535-.334 8.228a3.973 3.973 0 0 1-1.935-1.067c-1.219-1.06-2.367-6.236-2.202-7.824ZM6.714 18.94c-1.825.358-3.669.052-5.06-.817.786-1.093 1.993-1.948 3.42-2.419a5.38 5.38 0 0 0 4.552 1.395c.16.083.324.158.492.225-.926.797-2.108 1.362-3.404 1.616Zm1.317-6.902c0-.982.665-2.68 1.78-4.543.372-.623 1.961-2.76 2.197-2.977.236.217 1.825 2.354 2.198 2.977 1.114 1.863 1.779 3.562 1.779 4.543-.222 5.625-7.733 5.625-7.954 0Zm9.255 6.902c-1.294-.254-2.474-.817-3.4-1.612.173-.068.341-.145.505-.23a5.4 5.4 0 0 0 4.546-1.39c1.42.471 2.626 1.329 3.41 2.415-1.393.87-3.236 1.175-5.061.817Z"
-    fill="#000"
-  />
-  <path
-    d="M13.806 17.93A4.807 4.807 0 0 1 12 21.12a4.806 4.806 0 0 1-1.81-3.23c-.387.314-.823.57-1.294.754a6.22 6.22 0 0 0 2.816 3.98.642.642 0 0 0 .576 0 6.22 6.22 0 0 0 2.812-3.961 4.821 4.821 0 0 1-1.294-.733Z"
-    fill="#000"
-  />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4199 11.1224C14.4199 13.5996 13.4741 15.8525 11.9199 17.5451C10.3657 15.8525 9.41992 13.5996 9.41992 11.1224C9.41992 8.64518 10.3657 6.39231 11.9199 4.69967C13.4741 6.39231 14.4199 8.64517 14.4199 11.1224ZM13.9948 18.187C15.8775 17.8718 17.6809 16.9882 19.1334 15.5356C20.8851 13.784 21.8093 11.5222 21.9072 9.22632C19.9557 9.30952 18.0289 9.98975 16.419 11.2677C16.3868 13.8748 15.4869 16.2731 13.9948 18.187ZM16.2178 8.9643C15.781 6.66414 14.6593 4.60655 13.0727 3.0118C12.4337 2.36944 11.4062 2.36944 10.7671 3.0118C9.20085 4.58617 8.08756 6.61162 7.63917 8.87622C5.82375 7.77581 3.76961 7.22296 1.7143 7.21766C0.808199 7.21532 0.081653 7.94187 0.08399 8.84797C0.0915549 11.7811 1.2143 14.7119 3.45222 16.9499C4.29172 17.7893 5.22871 18.4719 6.22675 18.9976H1C0.447715 18.9976 0 19.4453 0 19.9976C0 20.5498 0.447716 20.9976 1 20.9976H23C23.5523 20.9976 24 20.5498 24 19.9976C24 19.4453 23.5523 18.9976 23 18.9976H17.7731C18.7711 18.4719 19.7081 17.7893 20.5476 16.9499C22.7856 14.7119 23.9083 11.7811 23.9159 8.84797C23.9182 7.94187 23.1917 7.21532 22.2856 7.21766C20.1761 7.2231 18.0679 7.80531 16.2178 8.9643ZM7.41994 11.1427C7.42451 13.7832 8.31897 16.2149 9.81944 18.154C8.00404 17.813 6.2712 16.9404 4.86644 15.5356C3.11478 13.784 2.19054 11.5222 2.09265 9.22632C3.97952 9.30677 5.84337 9.94537 7.41994 11.1427Z" fill="#BBC2D6"/></svg>

package/src/components/index.tsx

@@ -5,8 +5,8 @@ export * from "./badge";
 export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
-export * from "./contentWrapper";
 export * from "./codeInput";
+export * from "./contentWrapper";
 export * from "./divider";
 export * from "./endOfPage";
 export * from "./featureInfo";
@@ -14,8 +14,8 @@ export * from "./icons";
 export * from "./image";
 export * from "./layout";
 export * from "./listitems";
-export * from "./logos";
 export * from "./loadingSpinner";
+export * from "./logos";
 export * from "./modules";
 export * from "./numberpad";
 export * from "./otpInput";
@@ -23,10 +23,11 @@ export * from "./pictograms";
 export * from "./progressLoader";
 export * from "./radio";
 export * from "./spacer";
+export * from "./stack";
 export * from "./stepper";
 export * from "./switch";
-export * from "./tag";
 export * from "./tabs";
+export * from "./tag";
+export * from "./textInput";
 export * from "./toast";
 export * from "./typography";
-export * from "./textInput";

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

@@ -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,
@@ -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

@@ -35,7 +35,7 @@ export type ModuleCheckoutProps = ModuleCheckoutPartialProps & {
   ctaText?: string;
 };
 
-type CtaOnlyProps = { text?: string };
+type ActionOnlyProps = { text?: string };
 
 // ---------------- component ----------------
 
@@ -75,7 +75,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     return (
       <PressableModuleBase onPress={props.onPress}>
         <ModuleBaseContent />
-        {props.ctaText && <CTA text={props.ctaText} />}
+        {props.ctaText && <ModuleAction text={props.ctaText} />}
       </PressableModuleBase>
     );
   }
@@ -89,7 +89,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
 
 // ---------------- sub-components----------------
 
-const CTA = ({ text }: CtaOnlyProps) => (
+const ModuleAction = ({ text }: ActionOnlyProps) => (
   <View pointerEvents="none">
     <ButtonLink
       label={text ?? ""}
@@ -99,7 +99,7 @@ const CTA = ({ text }: CtaOnlyProps) => (
   </View>
 );
 
-const LoadingVersion = ({ text }: CtaOnlyProps) => (
+const LoadingVersion = ({ text }: ActionOnlyProps) => (
   <View style={IOModuleStyles.button}>
     <View style={styles.rowCenter}>
       <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
@@ -110,7 +110,7 @@ const LoadingVersion = ({ text }: CtaOnlyProps) => (
         <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
       </View>
     </View>
-    <CTA text={text} />
+    <ModuleAction text={text} />
   </View>
 );
 

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

package/src/components/radio/RadioButtonLabel.tsx

@@ -16,11 +16,12 @@ type Props = {
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type RadioButtonLabelProps = Props &
   Pick<React.ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
-  Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+  Pick<
+    React.ComponentProps<typeof Pressable>,
+    "onPress" | "accessibilityLabel" | "accessibilityHint"
+  >;
 
 /**
  * A radio button with the automatic state management that uses a {@link AnimatedRadio}
@@ -33,8 +34,10 @@ export const RadioButtonLabel = ({
   label,
   checked,
   disabled,
-  onValueChange
-}: OwnProps) => {
+  onValueChange,
+  accessibilityLabel,
+  accessibilityHint
+}: RadioButtonLabelProps) => {
   const theme = useIOTheme();
 
   const [toggleValue, setToggleValue] = useState(checked ?? false);
@@ -49,17 +52,19 @@ export const RadioButtonLabel = ({
 
   return (
     <Pressable
-      accessibilityRole="radio"
-      accessibilityState={{
-        checked: checked ?? toggleValue,
-        disabled: !!disabled
-      }}
       onPress={toggleRadioButton}
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
       disabled={disabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       testID="AnimatedRadioButton"
     >
       <View