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

…bility improvements (#6064) ## Short description This PR upgrade the ds library to gain all the accessibility improvements made by the high priority activities highlighted from the first external assessment. ## List of changes proposed in this pull request - Except from improvements coming from the library now all the validation inputs require a mandatory errorMessage ## How to test Check the error message are properly set by the related content on each section. --------- Co-authored-by: Damiano Plebani <[email protected]>
pagopa · Aug 2, 2024 · 8d7271d · 8d7271d
1 parent 49d1d9e
commit 8d7271d
Show file tree

Hide file tree

Showing 36 changed files with 878 additions and 331 deletions.
diff --git a/locales/en/index.yml b/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: It has 18 digits, starts with 0, 1 or 3.
         placeholder: Codice avviso
       fiscalCode:
         title: Inserisci il codice fiscale dell’Ente Creditore
         subtitle: Ha 11 cifre, lo trovi vicino al codice QR.
+        validationError: Enter 11 digits.
         placeholder: Codice fiscale Ente Creditore
     abortDialog:
       title: Vuoi interrompere l'operazione?

diff --git a/locales/it/index.yml b/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: Ha 18 cifre, inizia con 0, 1 o 3.
         placeholder: Codice avviso
       fiscalCode:
         title: Inserisci il codice fiscale dell’Ente Creditore
         subtitle: Ha 11 cifre, lo trovi vicino al codice QR.
+        validationError: Inserisci 11 cifre.
         placeholder: Codice fiscale Ente Creditore
     abortDialog:
       title: Vuoi interrompere l'operazione?

diff --git a/package.json b/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.43.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",

diff --git a/ts/components/screens/__tests__/WizardScreen.test.tsx b/ts/components/screens/__tests__/WizardScreen.test.tsx
@@ -10,7 +10,7 @@ import { WizardScreen, WizardScreenProps } from "../WizardScreen";
 const defaultProps: WizardScreenProps = {
   title: "This is a title",
   description: "This is a description",
-  pictogram: "abacus",
+  pictogram: "success",
   primaryButton: {
     label: "primaryButton",
     accessibilityLabel: "accessible primaryButton",

diff --git a/ts/features/design-system/core/DSBadges.tsx b/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" />

diff --git a/ts/features/design-system/core/DSListItems.tsx b/ts/features/design-system/core/DSListItems.tsx
@@ -118,48 +118,33 @@ export const DSListItems = () => {
 const renderListItemNav = () => (
   <VStack space={componentMargin}>
     <DSComponentViewerBox name="ListItemNav">
-      <ListItemNav
-        value={"Value"}
-        onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
-      />
+      <ListItemNav value={"Value"} onPress={onButtonPress} />
       <Divider />
       <ListItemNav
         value={"Value"}
         description="Description"
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <Divider />
       <ListItemNav
         value="A looong looooong looooooooong looooooooooong title"
         description="Description"
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <Divider />
-      <ListItemNav
-        value={"Value"}
-        icon="gallery"
-        onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
-      />
+      <ListItemNav value={"Value"} icon="gallery" onPress={onButtonPress} />
       <Divider />
       <ListItemNav
         value={"Value"}
         description="Description"
         icon="gallery"
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <Divider />
       <ListItemNav
         value={"Value"}
         description="This is a list item nav with badge"
-        onPress={() => {
-          alert("Action triggered");
-        }}
-        accessibilityLabel="Empty just for testing purposes"
+        onPress={onButtonPress}
         topElement={{
           badgeProps: {
             text: "Novità",
@@ -172,20 +157,14 @@ const renderListItemNav = () => (
       <ListItemNav
         value={"Value"}
         description="This is a list item nav without chevron icon"
-        onPress={() => {
-          alert("Action triggered");
-        }}
-        accessibilityLabel="Empty just for testing purposes"
+        onPress={onButtonPress}
         hideChevron
       />
       <Divider />
       <ListItemNav
         value={"Value"}
         description="This is a list item nav with badge without chevron"
-        onPress={() => {
-          alert("Action triggered");
-        }}
-        accessibilityLabel="Empty just for testing purposes"
+        onPress={onButtonPress}
         topElement={{
           badgeProps: {
             text: "Novità",
@@ -196,32 +175,21 @@ const renderListItemNav = () => (
       />
     </DSComponentViewerBox>
     <DSComponentViewerBox name="ListItemNavAlert">
-      <ListItemNavAlert
-        value={"Value"}
-        onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
-      />
+      <ListItemNavAlert value={"Value"} onPress={onButtonPress} />
       <Divider />
       <ListItemNavAlert
         value={"Value"}
         description="Description"
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <Divider />
-      <ListItemNavAlert
-        withoutIcon
-        value={"Value"}
-        onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
-      />
+      <ListItemNavAlert withoutIcon value={"Value"} onPress={onButtonPress} />
       <Divider />
       <ListItemNavAlert
         withoutIcon
         value={"Value"}
         description="Description"
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
     </DSComponentViewerBox>
   </VStack>
@@ -233,30 +201,26 @@ const renderListItemInfoCopy = () => (
       label={"Label"}
       value="Value"
       onPress={onCopyButtonPress}
-      accessibilityLabel="Empty just for testing purposes"
     />
     <Divider />
     <ListItemInfoCopy
       label={"Codice fiscale"}
       value="01199250158"
       onPress={onCopyButtonPress}
-      accessibilityLabel="Empty just for testing purposes"
       icon="institution"
     />
     <Divider />
     <ListItemInfoCopy
       label={"Carta di credito"}
       value="4975 3013 5042 7899"
       onPress={onCopyButtonPress}
-      accessibilityLabel="Empty just for testing purposes"
       icon="creditCard"
     />
     <Divider />
     <ListItemInfoCopy
       label={"Indirizzo"}
       value={`P.za Colonna, 370\n00186 Roma (RM)`}
       onPress={onCopyButtonPress}
-      accessibilityLabel="Empty just for testing purposes"
     />
   </DSComponentViewerBox>
 );
@@ -268,81 +232,67 @@ const renderListItemAction = () => (
         variant="primary"
         label={"Link interno oppure link ad una pagina esterna"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="primary"
         icon="website"
         label={"Link interno oppure link ad una pagina esterna"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="primary"
         icon="device"
         label={"Scarica l'app"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="primary"
         icon="security"
         label={"Informativa sulla privacy"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="primary"
         icon="chat"
         label={"Richiedi assistenza"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
     </DSComponentViewerBox>
     <DSComponentViewerBox name="ListItemAction · Danger variant">
       <ListItemAction
         variant="danger"
         label={"Danger action"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="danger"
         icon="trashcan"
         label={"Elimina"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
       <ListItemAction
         variant="danger"
         icon="logout"
         label={"Esci da IO"}
         onPress={onButtonPress}
-        accessibilityLabel="Empty just for testing purposes"
       />
     </DSComponentViewerBox>
   </VStack>
 );
 
 const renderListItemInfo = () => (
   <DSComponentViewerBox name="ListItemInfo">
-    <ListItemInfo
-      label="Label"
-      value={"Value"}
-      accessibilityLabel="Empty just for testing purposes"
-    />
+    <ListItemInfo label="Label" value={"Value"} />
     <Divider />
     <ListItemInfo
       label="Label"
       value="A looong looooong looooooooong looooooooooong title"
-      accessibilityLabel="Empty just for testing purposes"
     />
     <Divider />
     <ListItemInfo
       icon="creditCard"
       label="Label"
       value="A looong looooong looooooooong looooooooooong title"
-      accessibilityLabel="Empty just for testing purposes"
       endElement={{
         type: "buttonLink",
         componentProps: {
@@ -357,7 +307,6 @@ const renderListItemInfo = () => (
       icon="psp"
       label="Label"
       value="A looong looooong looooooooong looooooooooong title"
-      accessibilityLabel="Empty just for testing purposes"
       endElement={{
         type: "iconButton",
         componentProps: {
@@ -372,7 +321,6 @@ const renderListItemInfo = () => (
       icon="psp"
       label="Label"
       value="A looong looooong looooooooong looooooooooong title"
-      accessibilityLabel="Empty just for testing purposes"
       endElement={{
         type: "badge",
         componentProps: {
@@ -382,12 +330,7 @@ const renderListItemInfo = () => (
       }}
     />
     <Divider />
-    <ListItemInfo
-      label="Label"
-      value={"Value"}
-      icon="gallery"
-      accessibilityLabel="Empty just for testing purposes"
-    />
+    <ListItemInfo label="Label" value={"Value"} icon="gallery" />
   </DSComponentViewerBox>
 );
 
@@ -396,13 +339,9 @@ const renderListItemInfo = () => (
 const renderListItemHeader = () => (
   <VStack space={componentMargin}>
     <DSComponentViewerBox name="ListItemHeader, without icon">
+      <ListItemHeader label="Label" />
       <ListItemHeader
         label="Label"
-        accessibilityLabel="Empty just for testing purposes"
-      />
-      <ListItemHeader
-        label="Label"
-        accessibilityLabel="Empty just for testing purposes"
         endElement={{
           type: "buttonLink",
           componentProps: {
@@ -414,7 +353,6 @@ const renderListItemHeader = () => (
       />
       <ListItemHeader
         label="Label"
-        accessibilityLabel="Empty just for testing purposes"
         endElement={{
           type: "iconButton",
           componentProps: {
@@ -426,15 +364,10 @@ const renderListItemHeader = () => (
       />
     </DSComponentViewerBox>
     <DSComponentViewerBox name="ListItemHeader, with icon">
-      <ListItemHeader
-        label="Label"
-        iconName="gallery"
-        accessibilityLabel="Empty just for testing purposes"
-      />
+      <ListItemHeader label="Label" iconName="gallery" />
       <ListItemHeader
         iconName="creditCard"
         label="Label"
-        accessibilityLabel="Empty just for testing purposes"
         endElement={{
           type: "buttonLink",
           componentProps: {
@@ -447,7 +380,6 @@ const renderListItemHeader = () => (
       <ListItemHeader
         iconName="psp"
         label="Label"
-        accessibilityLabel="Empty just for testing purposes"
         endElement={{
           type: "iconButton",
           componentProps: {
@@ -461,7 +393,6 @@ const renderListItemHeader = () => (
       <ListItemHeader
         iconName="psp"
         label="Label"
-        accessibilityLabel="Empty just for testing purposes"
         endElement={{
           type: "badge",
           componentProps: {

diff --git a/ts/features/design-system/core/DSTextFields.tsx b/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}
     />
   );

diff --git a/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx b/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx
@@ -20,7 +20,7 @@ const secondaryActionButtonTitle = "Cancel";
 const defaultProps = {
   title: "Test title",
   subtitle: "Test subtitle",
-  pictogramName: "timeout" as IOPictograms,
+  pictogramName: "timing" as IOPictograms,
   primaryAction: {
     label: primaryActionButtonTitle,
     accessibilityLabel: primaryActionButtonTitle,

diff --git a/ts/features/fci/components/GenericErrorComponent.tsx b/ts/features/fci/components/GenericErrorComponent.tsx
@@ -16,7 +16,7 @@ const GenericErrorComponent = (props: Props) => (
   <ErrorComponent
     title={props.title}
     subTitle={props.subTitle}
-    pictogram={"umbrella"}
+    pictogram={"umbrellaNew"}
     testID={props.testID}
     onPress={props.onPress}
     retry={props.retry}