Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BogdanCerovac opened this issue Jul 29, 2024 · 1 comment
Open
Labels
API: Keyboard Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications.

Comments

@BogdanCerovac
Copy link

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 #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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Keyboard Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications.
Projects
None yet
Development

No branches or pull requests

3 participants