Change accessibility focus in react-native app on drawer/modal open

Question

I'm trying to improve accessibility on a react native app and am facing the following problem: when the user opens the menu drawer, the focus doesn't change to the modal drawer content. Instead swiping left and right focuses content that's in the background.

I have tried setting dynamic accessibility props to the drawer and main content area:

<NavigationMenu
    importantForAccessibility={isNavigationVisible ? 'yes' : 'no-hide-descendants'}
/>
<DashboardContent
    importantForAccessibility={isNavigationVisible ? 'no-hide-descendants' : 'yes'}
/>

Where isNavigationVisible is a prop that gets updated when the drawer opens, but this had no effect.

Is there any way to force the focus change to the drawer when it opens?

Answer 1

This is what i ended up using:

const setFocus = ({ current: ref }) => {
    const FOCUS_ON_VIEW = 8;
    const reactTag = findNodeHandle(ref);

    Platform.OS === 'android'
        ? UIManager.sendAccessibilityEvent(reactTag, FOCUS_ON_VIEW)
        : AccessibilityInfo.setAccessibilityFocus(reactTag);
}