ExpandableOverlay - Focus accessibility after overlay close (#3503)

* Added focus on close

* Fixed typings and added focus to renderCustom

* Update src/incubator/expandableOverlay/index.tsx

* Remove containerRef dependency from useEffect in ExpandableOverlay

* Refactor import statements in ExpandableOverlay for improved readability

* Remove focusAccessibility method from ExpandableOverlay interface

---------

Co-authored-by: Miki Leib <[email protected]>

Author: nitzanyiz

src/incubator/expandableOverlay/index.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useState, forwardRef, PropsWithChildren, useImperativeHandle} from 'react';
-
+import React, {useCallback, useState, forwardRef, PropsWithChildren, useImperativeHandle, useRef} from 'react';
+import {AccessibilityInfo, findNodeHandle} from 'react-native';
 import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
 import View from '../../components/view';
 import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
@@ -68,14 +68,25 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
     ...others
   } = props;
   const [visible, setExpandableVisible] = useState(false);
+  const containerRef = useRef(null);
+
+  const focusAccessibility = useCallback(() => {
+    const reactTag = findNodeHandle(containerRef.current);
+    if (reactTag) {
+      AccessibilityInfo.setAccessibilityFocus(reactTag);
+    }
+  }, []);
+
   const openExpandable = useCallback(() => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
+
   const closeExpandable = useCallback(() => {
     setExpandableVisible(false);
+    focusAccessibility();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss]);
+  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
 
   const toggleExpandable = useCallback(() => (visible ? closeExpandable() : openExpandable()),
     [visible, openExpandable, closeExpandable]);
@@ -126,7 +137,7 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   };
 
   return (
-    <TouchableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
+    <TouchableOpacity ref={containerRef} {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
       <View pointerEvents="none">{children}</View>
       {renderOverlay()}
     </TouchableOpacity>