chore(Cross): [IOAPPX-358] Updates io-app-design-system for accessibility improvements

locales/en/index.yml

@@ -1788,10 +1788,12 @@ wallet:
       noticeNumber:
         title: Inserisci il codice avviso
         subtitle: Ha 18 cifre, lo trovi vicino al codice QR.
+        validationError: Codice avviso errato.
         placeholder: Codice avviso
       fiscalCode:
         title: Inserisci il codice fiscale dell’Ente Creditore
         subtitle: Ha 11 cifre, lo trovi vicino al codice QR.
+        validationError: Codice fiscale Ente Creditore errato.
         placeholder: Codice fiscale Ente Creditore
     abortDialog:
       title: Vuoi interrompere l'operazione?

locales/it/index.yml

@@ -1788,10 +1788,12 @@ wallet:
       noticeNumber:
         title: Inserisci il codice avviso
         subtitle: Ha 18 cifre, lo trovi vicino al codice QR.
+        validationError: Codice avviso errato.
         placeholder: Codice avviso
       fiscalCode:
         title: Inserisci il codice fiscale dell’Ente Creditore
         subtitle: Ha 11 cifre, lo trovi vicino al codice QR.
+        validationError: Codice fiscale Ente Creditore errato.
         placeholder: Codice fiscale Ente Creditore
     abortDialog:
       title: Vuoi interrompere l'operazione?

package.json

@@ -103,7 +103,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.40.1",
+    "@pagopa/io-app-design-system": "1.41.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.3.0",
     "@pagopa/io-react-native-http-client": "1.0.5",

ts/features/design-system/core/DSBadges.tsx

@@ -110,7 +110,7 @@ const renderTag = () => (
       </VStack>
     </DSComponentViewerBox>
     <DSComponentViewerBox name={"Tag · With icon, no text"}>
-      <Tag variant="attachment" />
+      <Tag variant="attachment" iconAccessibilityLabel="Allegati" />
     </DSComponentViewerBox>
     <DSComponentViewerBox name={"Tag · Without icon"}>
       <Tag text={"No icon"} variant="noIcon" />

ts/features/design-system/core/DSTextFields.tsx

@@ -117,15 +117,16 @@ const InputComponentWrapper = (
 const InputValidationComponentWrapper = (
   props: Omit<
     React.ComponentProps<typeof TextInputValidation>,
-    "value" | "onChangeText"
-  > & { value?: string }
+    "value" | "onChangeText" | "errorMessage"
+  > & { value?: string; errorMessage?: string }
 ) => {
   const [inputValue, setInputValue] = React.useState(props.value ?? "");
 
   return (
     <TextInputValidation
       {...props}
       value={inputValue}
+      errorMessage={props.errorMessage ?? "error"}
       onChangeText={setInputValue}
     />
   );

ts/features/messages/components/Home/DS/MessageListItem.tsx

@@ -16,6 +16,7 @@ import {
   Tag,
   WithTestID
 } from "@pagopa/io-app-design-system";
+import I18n from "../../../../../i18n";
 import { CustomPressableListItemBase } from "./CustomPressableListItemBase";
 import { DoubleAvatar } from "./DoubleAvatar";
 
@@ -168,7 +169,12 @@ export const MessageListItem = ({
             {badgeVariant === "legalMessage" && (
               <>
                 <HSpacer size={8} />
-                <Tag variant="attachment" />
+                <Tag
+                  variant="attachment"
+                  iconAccessibilityLabel={I18n.t(
+                    "features.pn.details.attachmentsSection.title"
+                  )}
+                />
               </>
             )}
           </View>

ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx

@@ -145,6 +145,9 @@ const WalletPaymentInputFiscalCodeScreen = () => {
                 accessibilityLabel={I18n.t(
                   "wallet.payment.manual.fiscalCode.placeholder"
                 )}
+                errorMessage={I18n.t(
+                  "wallet.payment.manual.fiscalCode.validationError"
+                )}
                 value={inputState.fiscalCodeText}
                 icon="fiscalCodeIndividual"
                 onChangeText={value =>

ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx

@@ -97,6 +97,9 @@ const WalletPaymentInputNoticeNumberScreen = () => {
                 accessibilityLabel={I18n.t(
                   "wallet.payment.manual.noticeNumber.placeholder"
                 )}
+                errorMessage={I18n.t(
+                  "wallet.payment.manual.noticeNumber.validationError"
+                )}
                 value={inputState.noticeNumberText}
                 icon="docPaymentCode"
                 onChangeText={value =>

ts/screens/authentication/TestAuthenticationScreen.tsx

@@ -172,6 +172,7 @@ const TestAuthenticationScreen = () => {
         testID={"usernameInput"}
         icon="profile"
         onValidate={isUsernameFieldValid}
+        errorMessage={`${I18n.t("global.username")} is invalid`}
         disabled={isLoading}
         textInputProps={{
           inputMode: "text",

yarn.lock

@@ -2046,10 +2046,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/io-app-design-system@1.40.1":
-  version "1.40.1"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.40.1.tgz#8233f88090e785324d1d859ee11c3c91eef2f586"
-  integrity sha512-eyA5jF3jrXG2y+zHIMkShm3K+Bb6nkkcDNODUE6MYIPUd/DeUNP0XguQFqNNsrcNj4uS8ob7EozIVsvHIhcSeg==
+"@pagopa/io-app-design-system@1.41.0":
+  version "1.41.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.41.0.tgz#406ddcdee76a338ad7de23b15f7564d9c12d5e04"
+  integrity sha512-E8tMoIv2NhuR5F4+tREBM+s3QeSF/Z6pbpnUhR7DJgyMxyZuj39tvgCRUELQ7hDldLbgwyMfj3Lc7Km3ukSKyw==
   dependencies:
     "@pagopa/ts-commons" "^12.0.0"
     "@testing-library/jest-native" "^5.4.2"