diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx index d3cf6846fd..8eaf0fe49b 100644 --- a/src/incubator/expandableOverlay/index.tsx +++ b/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 ( - + {children} {renderOverlay()}