[IOAPPX-359] Remove mandatory a11y props from some ListItem… compon…

…ents (#317) ## Short description This PR removes mandatory a11y props from some `ListItem…` components: - `ListItemAction` - `ListItemNavAlert` - `ListItemInfoCopy` ## How to test N/A --------- Co-authored-by: Cristiano Tofani <cri.tofani@gmail.com>
pagopa · Jul 30, 2024 · 236101c · 236101c
1 parent bb750af
commit 236101c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 15 deletions.
diff --git a/src/components/listitems/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -36,9 +36,11 @@ export type ListItemAction = WithTestID<{
   variant: "primary" | "danger";
   onPress: (event: GestureResponderEvent) => void;
   icon?: IOIcons;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 const styles = StyleSheet.create({
   label: {
@@ -63,13 +65,19 @@ export const ListItemAction = ({
   onPress,
   icon,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  const listItemAccessibilityLabel = useMemo(
+    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
+    [label, accessibilityLabel]
+  );
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -171,13 +179,15 @@ export const ListItemAction = ({
       onPressOut={handlePressOut}
       onTouchEnd={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
         importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}

diff --git a/src/components/listitems/ListItemInfoCopy.tsx b/src/components/listitems/ListItemInfoCopy.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
@@ -30,9 +30,11 @@ export type ListItemInfoCopy = WithTestID<{
   numberOfLines?: number;
   onPress: (event: GestureResponderEvent) => void;
   icon?: IOIcons;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 export const ListItemInfoCopy = ({
   label,
@@ -41,12 +43,26 @@ export const ListItemInfoCopy = ({
   onPress,
   icon,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemInfoCopy) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  const componentValueToAccessibility = useMemo(
+    () => (typeof value === "string" ? value : ""),
+    [value]
+  );
+
+  const listItemAccessibilityLabel = useMemo(
+    () =>
+      accessibilityLabel
+        ? accessibilityLabel
+        : `${label}; ${componentValueToAccessibility}`,
+    [label, componentValueToAccessibility, accessibilityLabel]
+  );
+
   const foregroundColor = isExperimental
     ? theme["interactiveElem-default"]
     : "blue";
@@ -120,12 +136,14 @@ export const ListItemInfoCopy = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
       >
         <Animated.View

diff --git a/src/components/listitems/ListItemNavAlert.tsx b/src/components/listitems/ListItemNavAlert.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
@@ -29,21 +29,45 @@ export type ListItemNavAlert = WithTestID<{
   description?: string | React.ReactNode;
   withoutIcon?: boolean;
   onPress: (event: GestureResponderEvent) => void;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 export const ListItemNavAlert = ({
   value,
   description,
   withoutIcon = false,
   onPress,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemNavAlert) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
 
+  const componentValueToAccessibility = useMemo(
+    () => (typeof value === "string" ? value : ""),
+    [value]
+  );
+
+  const componentDescriptionToAccessibility = useMemo(
+    () => (typeof description === "string" ? description : ""),
+    [description]
+  );
+
+  const listItemAccessibilityLabel = useMemo(
+    () =>
+      accessibilityLabel
+        ? accessibilityLabel
+        : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`,
+    [
+      componentDescriptionToAccessibility,
+      componentValueToAccessibility,
+      accessibilityLabel
+    ]
+  );
   const theme = useIOTheme();
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -124,12 +148,15 @@ export const ListItemNavAlert = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}

diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
   onTouchEnd={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       [
@@ -343,6 +344,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
   onStartShouldSetResponder={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       [
@@ -727,6 +729,8 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
   onStartShouldSetResponder={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -1863,6 +1867,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       [
@@ -2170,6 +2175,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
   onStartShouldSetResponder={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
     importantForAccessibility="no-hide-descendants"
     style={
       [
@@ -2554,6 +2560,8 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
   onStartShouldSetResponder={[Function]}
 >
   <View
+    accessibilityElementsHidden={true}
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {