3

I'm using the ref prop along with findNodeHandle on a bunch of components in order to be able to trigger AccessibilityInfo.setAccessibilityFocus. However, it's not always working as expected. Sometimes the reference is null even though componentDidMount has executed.

I'm often using setAccessibilityFocus in order to focus the header of a new element which appears on the screen, for example when opening a modal.

IMPORTANT: This is Voiceover/Talkback functionality so you'll need to have that activated on your device.

See my snack: https://snack.expo.io/@insats/example-accessibilityinfo-setaccessibilityfocus-not-working

This is the code sample:

import React, { Component } from 'react';
import {
  View,
  Text,
  findNodeHandle,
  TouchableOpacity,
  AccessibilityInfo,
  StatusBar,
} from 'react-native';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.accessibilityRef = null;
  }

  componentDidMount() {
    console.log('componentDidMount');
    this.setAccessibilityFocus();
  }

  setAccessibilityRef(el) {
    console.log('setAccessibilityRef', el);
    this.accessibilityRef = el;
  }

  setAccessibilityFocus() {
    console.log('setAccessibilityFocus', this.accessibilityRef);

    if (this.accessibilityRef) {
      const reactTag = findNodeHandle(this.accessibilityRef);
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }
  }

  render() {
    console.log('Rendering Sample');

    return (
      <Text ref={this.setAccessibilityRef}>
        This text ought to be read out loud by the screenreader if enabled
      </Text>
    );
  }
}

export default class App extends React.Component {
  state = {
    open: false,
  };

  toggle = () => this.setState({ open: !this.state.open });

  render() {
    return (
      <View style={{ margin: 50 }}>
        <StatusBar hidden />
        <TouchableOpacity
          style={{ backgroundColor: 'blue', padding: 20, marginBottom: 20 }}
          onPress={this.toggle}>
          <Text style={{ color: 'white' }}>
            {this.state.open ? 'Hide text' : 'Show text'}
          </Text>
        </TouchableOpacity>

        {this.state.open && <Sample />}
      </View>
    );
  }
}
Adam Gerthel
  • 663
  • 3
  • 9
  • 24
  • `AccessibilityInfo.setAccessibilityFocus(reactTag);` might fix this issue, found it in the last code example here -> https://medium.com/@jessicalynnebyrne/setting-focus-for-accessibility-in-react-native-cd7bbe891c5d. It looks like your way works for web apps but not for native apps, sadly I do not know react so I could be wrong! – GrahamTheDev Aug 05 '20 at 06:19
  • @GrahamRitchie `AccessibilityInfo.setAccessibilityFocus(reactTag);` is precisely what I'm using but there seems to be some kind of race condition. If I wrap the setAccessibilityFocus call in a setTimeout with ~20ms delay, it works more often. But that solution causes new problems (such as the call being triggered even though the component has dismounted). It's also not very reliable since the timeout is just a guesstimate. – Adam Gerthel Aug 05 '20 at 11:26

1 Answers1

4

I don't really understand what is causing these issues. I've found that calling the setAccessibilityFocus twice solves the problem. You can simplify the logic of focusing by just handling everything in the callback ref as well.

Example:

export default () => {

    const setInitFocus = (element: React.Component | null) => {
        if (element == null) return;
        const elementId = findNodeHandle(element);
        if (elementId) {
            AccessibilityInfo.setAccessibilityFocus(elementId);
            AccessibilityInfo.setAccessibilityFocus(elementId);
        }
    };

    return (
        <TouchableOpacity
          onPress={() => {}}
          ref={setInitFocus}
        >
            <Text>Blah blah</Text>
        </TouchableOpacity>
    );
};

Here's your snack with those changes applied:

https://snack.expo.io/@loganlim/example-accessibilityinfo-setaccessibilityfocus-not-working

Logan Lim
  • 76
  • 4
  • 2
    I've added the issue to the react-native github as well. https://github.com/facebook/react-native/issues/30097 – Logan Lim Oct 02 '20 at 15:13