CODEWITHSUNDEEP
reactjsaccessibilityreact-nativereact-native-ios
Andrei Rosca
Andrei Rosca

Reputation: 1097

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

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?

Upvotes: 3

Views: 8447

Answers (3)

s-hunter
s-hunter

Reputation: 25826

Looks like there is a bug on AccessibilityInfo.setAccessibilityFocus(reactTag), it doesn't work consistently and calling it more than once increase the chance of success.

See this answer for how to make this call twice to do the focus on view launch.

See this open issue on github for more detail.

Upvotes: 1

Estev&#227;o Lucas
Estev&#227;o Lucas

Reputation: 4688

Currently, React-Native doesn't provide a way, to out-of-the-box, traverse the view tree and get the first focusable element to set the focus for it.

So you need to use AccessibilityInfo.setAccessibilityFocus passing a reactTag case by case.

Upvotes: 4

Andrei Rosca
Andrei Rosca

Reputation: 1097

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);
}

Upvotes: 6

Related Questions