facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.16k stars 24.32k forks source link

Keyboard accessibility issues on Android (TextInput but also beyond) #45801

Open BogdanCerovac opened 3 months ago

BogdanCerovac commented 3 months ago

Description

Can not operate TextInput with external keyboards and it seems that TextInputs "block" focus for other elements if those are between two TextInputs.

We can not really use TextInputs for applications that need to be accessible (app is failing WCAG and EN 301 549 accessibility standards).

This issue is also reopening https://github.com/facebook/react-native/issues/31820 (that was closed because it was stale)...

Steps to reproduce

  1. Connect a physical keyboard to Android device (I've used both PC with direct connection to Android and external Bluetooth keyboard that works with other apps).

  2. Open Expo snack (https://snack.expo.dev/aAQHfOdiVoSZF6jo6TzWN) or basically run this code:

<Button
  onPress={() => onPressLearnMore("First")}
  title="First focus"
  color="#841584"
/>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />

      <Button
  onPress={() => onPressLearnMore("between")}
  title="Focus in between"
  color="#2196F3"
/>
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="1234"
        keyboardType="numeric"
      />

            <Button
  onPress={() => onPressLearnMore("Last")}
  title="Last focus"
  color="#000"
/>
  1. try to focus in either of TextInput's or try to focus and activate the button in between them....

React Native Version

0.74.3

Affected Platforms

Runtime - Android

Output of npx react-native info

N/A

Stacktrace or Logs

Nothing reported...

Reproducer

https://snack.expo.dev/aAQHfOdiVoSZF6jo6TzWN

Screenshots and Videos

https://www.youtube.com/watch?v=EZmllQhzzMU

BogdanCerovac commented 6 days ago

As a temporary solution we can use https://www.npmjs.com/package/react-native-external-keyboard or https://github.com/ArturKalach/react-native-a11y from @ArturKalach.

But would be great if React Native would just support this out of the box as many don't test for external keyboard support and therefore introduce barriers to folks without being aware.