chore: [IOPAE-1728] Improve accessibility on SearchInput component (#416)

## Short description
This PR improves the accessibility of the `SearchInput` component. 

## List of changes proposed in this pull request
- added `importantForAccessibility` prop to make the input field
inaccessible when the component is pressable. This change ensures that
the input is not announced by SR when the component is intended to be
used as a button.

Co-authored-by: Damiano Plebani <[email protected]>

Author: adelloste

src/components/searchInput/SearchInput.tsx

@@ -214,15 +214,15 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
         : inputWidth;
     };
 
-    const cancel = useCallback(
+    const handleCancel = useCallback(
       (event: GestureResponderEvent) => {
         onChangeText?.("");
         onCancel?.(event);
       },
       [onCancel, onChangeText]
     );
 
-    const clear = useCallback(() => {
+    const handleClear = useCallback(() => {
       onChangeText?.("");
       searchInputRef.current?.clear();
     }, [onChangeText]);
@@ -233,7 +233,10 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     );
 
     const renderSearchBar = () => (
-      <Animated.View style={styles.searchBar}>
+      <Animated.View
+        importantForAccessibility={pressable ? "no-hide-descendants" : "auto"}
+        style={styles.searchBar}
+      >
         <Animated.View
           style={[styles.searchInput, animatedStyle]}
           pointerEvents={pressable ? "none" : "auto"}
@@ -279,7 +282,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           />
           <AnimatedPressable
             style={[styles.clearButton, clearButtonAnimatedStyle]}
-            onPress={clear}
+            onPress={handleClear}
             accessibilityLabel={clearAccessibilityLabel}
             accessibilityRole="button"
             hitSlop={16}
@@ -294,7 +297,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={cancelButtonLabel}
-            onPress={cancel}
+            onPress={handleCancel}
           >
             <IOText
               color={theme["interactiveElem-default"]}
@@ -316,9 +319,10 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
     return pressable ? (
       <Pressable
+        accessible={true}
         accessibilityRole="button"
         accessibilityLabel={placeholder}
-        onPress={pressable?.onPress}
+        onPress={pressable.onPress}
       >
         {renderSearchBar()}
       </Pressable>