fix(IT Wallet): [SIW-1595] Fix IT Wallet a11y issues (#6248)

## Short description This PR fixes a11y problems in the eID and credential's issuance flows. ## List of changes proposed in this pull request - Added a11y value to `BoolClaimItem` component - Fixed a11y value for `ItwReleaserName` component - Removed a11y for `ClaimLabel` component - Removed claim content from a11y value in `ImageClaimItem` component, which was breaking voiceover functionality ## How to test With the voiceover enabled, check that all issuance flows are accessible and voiceover announces the correct data --------- Co-authored-by: LazyAfternoons <[email protected]> Co-authored-by: LazyAfternoons <[email protected]>
pagopa · Oct 14, 2024 · 464ade9 · 464ade9
1 parent bb5d91d
commit 464ade9
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/ts/components/AnimatedImage.tsx b/ts/components/AnimatedImage.tsx
@@ -7,10 +7,7 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 
-export type AnimatedImageProps = Pick<
-  React.ComponentProps<typeof Image>,
-  "source" | "style"
->;
+export type AnimatedImageProps = React.ComponentProps<typeof Image>;
 
 /**
  * AnimatedImage component renders an image with a fade-in animation
@@ -21,7 +18,7 @@ export type AnimatedImageProps = Pick<
  * @param {object} [props.style] - The style to apply to the image.
  * @returns {JSX.Element} The rendered AnimatedImage component.
  */
-export const AnimatedImage = ({ source, style }: AnimatedImageProps) => {
+export const AnimatedImage = ({ style, ...props }: AnimatedImageProps) => {
   const opacity = useSharedValue(0);
 
   const handleOnLoad = () => {
@@ -38,8 +35,8 @@ export const AnimatedImage = ({ source, style }: AnimatedImageProps) => {
 
   return (
     <Animated.Image
+      {...props}
       style={[opacityTransition, style]}
-      source={source}
       onLoad={handleOnLoad}
       accessibilityIgnoresInvertColors={false}
     />

diff --git a/ts/features/itwallet/common/components/ItwCredentialClaim.tsx b/ts/features/itwallet/common/components/ItwCredentialClaim.tsx
@@ -54,17 +54,19 @@ const PlaceOfBirthClaimItem = ({
  * @param label - the label of the claim
  * @param claim - the claim value
  */
-const BoolClaimItem = ({ label, claim }: { label: string; claim: boolean }) => (
-  <ListItemInfo
-    label={label}
-    value={I18n.t(
-      `features.itWallet.presentation.credentialDetails.boolClaim.${claim}`
-    )}
-    accessibilityLabel={I18n.t(
-      `features.itWallet.presentation.credentialDetails.boolClaim.${claim}`
-    )}
-  />
-);
+const BoolClaimItem = ({ label, claim }: { label: string; claim: boolean }) => {
+  const value = I18n.t(
+    `features.itWallet.presentation.credentialDetails.boolClaim.${claim}`
+  );
+
+  return (
+    <ListItemInfo
+      label={label}
+      value={value}
+      accessibilityLabel={`${label}: ${value}`}
+    />
+  );
+};
 
 /**
  * Component which renders a generic text type claim.
@@ -226,7 +228,7 @@ const ImageClaimItem = ({ label, claim }: { label: string; claim: string }) => (
         accessibilityIgnoresInvertColors
       />
     }
-    accessibilityLabel={`${label} ${claim}`}
+    accessibilityLabel={`${label}`}
   />
 );
 

diff --git a/ts/features/itwallet/common/components/ItwReleaserName.tsx b/ts/features/itwallet/common/components/ItwReleaserName.tsx
@@ -47,7 +47,7 @@ export const ItwReleaserName = ({ credential, isPreview }: Props) => {
       type: "iconButton",
       componentProps: {
         icon: "info",
-        accessibilityLabel: "test",
+        accessibilityLabel: "Info",
         onPress: () => releasedByBottomSheet.present()
       }
     };

diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx
@@ -39,6 +39,9 @@ export const ClaimLabel: React.FunctionComponent<
     font: "TitilliumSansPro",
     fontStyle: { fontSize: fontSize * fontScale, textTransform },
     lineBreakMode: "head",
-    numberOfLines: 1
+    numberOfLines: 1,
+    // This text should not be read by the voiceover.
+    // If you want to make it accessible use the parent components
+    accessible: false
   });
 };
diff --git a/...allet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap b/...allet/common/components/ItwSkeumorphicCard/__tests__/__snapshots__/CardData.test.tsx.snap
@@ -110,6 +110,7 @@ exports[`CardData should match snapshot for DC front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -157,6 +158,7 @@ exports[`CardData should match snapshot for DC front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -204,6 +206,7 @@ exports[`CardData should match snapshot for DC front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -251,6 +254,7 @@ exports[`CardData should match snapshot for DC front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -298,6 +302,7 @@ exports[`CardData should match snapshot for DC front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -359,6 +364,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -406,6 +412,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -453,6 +460,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -500,6 +508,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -547,6 +556,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -594,6 +604,7 @@ exports[`CardData should match snapshot for MDL back data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -688,6 +699,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -735,6 +747,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -782,6 +795,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -829,6 +843,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -876,6 +891,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -923,6 +939,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -970,6 +987,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -1017,6 +1035,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"
@@ -1064,6 +1083,7 @@ exports[`CardData should match snapshot for MDL front data 1`] = `
     }
   >
     <Text
+      accessible={false}
       allowFontScaling={false}
       color="black"
       defaultColor="black"

diff --git a/...resentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap b/...resentation/components/__tests__/__snapshots__/ItwPresentationClaimsSection.test.tsx.snap
@@ -1887,7 +1887,7 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are
                               }
                             >
                               <View
-                                accessibilityLabel="test"
+                                accessibilityLabel="Info"
                                 accessibilityRole="button"
                                 accessibilityState={
                                   {
@@ -4386,7 +4386,7 @@ exports[`ItwPresentationClaimsSection should match the snapshot when claims are
                               }
                             >
                               <View
-                                accessibilityLabel="test"
+                                accessibilityLabel="Info"
                                 accessibilityRole="button"
                                 accessibilityState={
                                   {