Improve accessibility of the list item header

pagopa · Jan 13, 2025 · 2576b10 · 2576b10
1 parent a852bea
commit 2576b10
Showing 1 changed file with 9 additions and 34 deletions.
diff --git a/src/components/listitems/ListItemHeader.tsx b/src/components/listitems/ListItemHeader.tsx
@@ -65,30 +65,19 @@ export const ListItemHeader = ({
   const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
     useIOFontDynamicScale();
 
-  const listItemAccessibilityLabel = useMemo(
-    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
-    [label, accessibilityLabel]
-  );
-
   const itemInfoTextComponent = useMemo(
     () => (
       <View
-        accessible={endElement === undefined ? true : false}
-        importantForAccessibility={
-          endElement !== undefined && endElement.type !== "badge"
-            ? "no-hide-descendants"
-            : "yes"
-        }
-        accessibilityElementsHidden={
-          endElement !== undefined && endElement.type !== "badge"
-        }
+        accessible
+        accessibilityRole="header"
+        accessibilityLabel={accessibilityLabel ?? label}
       >
         <H6 role="heading" color={theme["textBody-tertiary"]}>
           {label}
         </H6>
       </View>
     ),
-    [label, theme, endElement]
+    [label, accessibilityLabel, theme]
   );
 
   const listItemAction = useCallback(() => {
@@ -97,21 +86,12 @@ export const ListItemHeader = ({
 
       switch (type) {
         case "buttonLink":
-          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
-
           return (
-            <ButtonLink
-              {...componentProps}
-              accessibilityLabel={buttonLinkAccessibilityLabel}
-            />
+            <ButtonLink {...componentProps} />
           );
-        case "iconButton":
-          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+        case "iconButton": 
           return (
-            <IconButton
-              {...componentProps}
-              accessibilityLabel={iconButtonAccessibilityLabel}
-            />
+            <IconButton {...componentProps} />
           );
         case "badge":
           return <Badge {...componentProps} />;
@@ -120,19 +100,14 @@ export const ListItemHeader = ({
       }
     }
     return <></>;
-  }, [endElement, listItemAccessibilityLabel]);
+  }, [endElement]);
 
   return (
     <View
       style={IOListItemStyles.listItem}
       testID={testID}
-      accessible={endElement === undefined ? true : false}
-      accessibilityLabel={listItemAccessibilityLabel}
     >
-      <View
-        style={IOListItemStyles.listItemInner}
-        importantForAccessibility={endElement ? "auto" : "no-hide-descendants"}
-      >
+      <View style={IOListItemStyles.listItemInner}>
         {iconName && !hugeFontEnabled && (
           <View
             style={{