Issues with accessibility keyboard input on Android with React Native

Viewed 1284

I've been building an app using React Native, and we're making sure that it was highly accessible. When we tried testing it using a keyboard to navigate on Android, though, we were unable to activate any buttons. We tried reproducing it using the simplest app, and the issue was still there. We were able to reproduce the issue with React Native versions 0.41.0-0.44.0. We have tried every combination of props on our TouchableOpacity elements, as well as trying Button elements, and have not had any success.

With an android phone with TalkBack on and a bluetooth keyboard connected, take these steps:

  • react-native init myProject
  • cd myProject
  • Edit index.android.js to add a <TouchableOpacity> tag with a handler that you can test, like making an alert box
  • react-native run-android
  • Navigate to the touchable element and press Alt+Enter (or Alt+Shift+Enter if using an old enough flavor of Android)

Notice that your handler is not fired when using the keyboard, but you can still trigger the element by double-tapping on the screen.

Here is my index.android.js for example:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class myProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => alert('test')}>
          <Text style={styles.welcome}>
            Click me!
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myProject', () => myProject);

Does anyone know how to get the keyboard to trigger this event as expected?

0 Answers
Related