fix: [IOPLT-995] Fix Talkback issue on Android when accordion is collapsed (#418)

dmnplb · web-flow · commit 0136a8e7131e · 2025-02-28T12:03:41.000+01:00
## Short description
This PR fixes a _Talkback_ issue on Android when the accordion is
collapsed. Specifically, _Talkback_ was intercepting all interactive
elements present in the `body` prop, even when the accordion was
collapsed.
 
## List of changes proposed in this pull request
- Add a dynamic value to `importantForAccessibility` prop based on
`expanded` value

## How to test
1. Activate Talkback on Android
2. Launch the example app
3. Go to the **Collapsible** page
4. Navigate through the content. When you reach "Come posso eliminare un
metodo di pagamento" (collapsed), the screen reader should read the next
question
diff --git a/example/src/pages/Collapsible.tsx b/example/src/pages/Collapsible.tsx
@@ -31,7 +31,10 @@ const assistanceData: Array<AccordionItem> = [
       <Body>
         I tuoi metodi di pagamento sono visualizzati come card nella parte alta
         dello schermo del Portafoglio. Seleziona la card del metodo che vuoi
-        eliminare e poi premi Elimina questo metodo!
+        eliminare e poi premi{" "}
+        <Body onPress={() => null} asLink>
+          Elimina questo metodo!
+        </Body>
       </Body>
     )
   },
diff --git a/src/components/accordion/AccordionItem.tsx b/src/components/accordion/AccordionItem.tsx
@@ -99,7 +99,10 @@ export const AccordionItem = ({
         </View>
       </TouchableWithoutFeedback>
 
-      <Animated.View style={bodyAnimatedStyle}>
+      <Animated.View
+        style={bodyAnimatedStyle}
+        importantForAccessibility={expanded ? "auto" : "no-hide-descendants"}
+      >
         <View style={bodyInnerStyle} onLayout={onBodyLayout}>
           {typeof body === "string" ? <Body>{body}</Body> : body}
         </View>
@@ -108,6 +111,7 @@ export const AccordionItem = ({
       {/* This gradient adds a smooth end to the content. If it is missing,
       the content will be cut sharply during the height transition. */}
       <LinearGradient
+        accessible={false}
         style={{
           height: accordionBodySpacing,
           position: "absolute",
