[Android][Talkback] Can't focus on TextInput via double tap

🐛 Bug Report

When using <TextInput> in combination with TalkBack on android you can't double tap to give the field focus. Double tap and hold on the other hand works to give focus and providing the context menu (paste, select all etc)

To Reproduce

Add <TextInput /> to your project and start TalkBack, swipe your way to the <TextInput /> and double tap. You will get a "thump" sounding sound and nothing else will happen.
Android 8.0(API 26+) or greater is needed to reproduce, earlier versions everything seems to work as expected.

Expected Behavior

Focus to be set to the TextInput and keyboard showing.

Code Example

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <TextInput />
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

Other

If you add an accessible view around the TextInput and you double tap that focus correctly goes to the TextInput.

<View accessible accessibilityLabel="Double tap me!" >
  <TextInput />
</View>

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 1.04 GB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.15.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: ^0.59 => 0.59.5 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Same issue can be reproduced on amongst other, Facebook marketplace, the field "send message" can't be focused by double tap.

Hello!!

I had the same issue and from what I've been researching, React Native disables natively received "requests" for focus (Android). But I found a way, wrapping the TextInput in a TouchableWithoutFeedback.

It went something like this:

focusInput = () => {
    this.input && this.input.focus();
  };

<TouchableWithoutFeedback onPress={this.focusInput} accessible={false}>
  <View style={[style, styles.main]}>
    <TextInput
      accessible={true}
      ref={(ref) => this.input}
      importantForAccessibility="no"
    />
  </View>
</TouchableWithoutFeedback>

So the focus is given by the java script code when the TouchableWithoutFeedback is clicked. The importantForAccessibility = "no" property is used to prevent TextInput from being focused with TalkBack.

same here, I just wonder why accessibility is not being taken seriously!
the first issue regarding this bug was open in 2017. but noone seems to care to fix it.

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

no, the issue has not been fixed. could you add it ot the discussion?

Is there going to be work done on this? It is basically not possible to write properly accessible apps on Android using RN until this is fixed. The work arounds posted break the navigation order, manually calling focus moves accessibility focus back to the start of the screen, so if filling out multiple text inputs fields the user has to navigate from the start back through all the ones they have filled out and then go to the next empty field.

We encountered this in our app and I was doing some exploratory testing to understand the bug better. A workaround I found is that if I two-finger tap in the text field, I can get it to focus and bring up the keyboard. Obviously that isn't a complete fix as it's an unexpected gesture for folks who are used to how TalkBack works.

I'm investigating an issue that sounds like it might be similar, but I'm not sure if it's exactly the same - what I'm observing is that double tap will focus the TextInput the first time, but it won't work again after dismissing the keyboard with the hardware back button. Is everyone else seeing that double tap never works? Or is this the same issue?

The issue has not been fixed.

I am getting the same issue.

The issue has not been fixed. I am going through this now.

@fabriziobertoglio1987

@fabriziobertoglio1987 any update on this issue?

@shivenmian

@shivenmian PR #33468 (comment) includes extensive video tests of this functionality. I did not detect any issues, but I will do more tests in a couple of days. Thanks

https://drive.google.com/file/d/1kAHHrYKXP6tRFf7w1_rcxOFp3cCa2L_C/view

Main Branch
#24519 (comment)
#24519 (comment)

2023-01-27.15-17-23.mp4

Related fabOnReact@6c4224e

@GuilhermePortella

@GuilhermePortella @Bertlk @kevinrodriguez-io I could not reproduce this issue using the latest version of react-native.
Could you test again and give us some feedback? Thanks

My test on the latest release of react-native

2023-01-27.15-44-54.mp4

@fabriziobertoglio1987

hey @fabriziobertoglio1987 how are you? I managed to solve this problem by updating to version 0.70, thanks 😃

Navigation Menu

Repository navigation

[Android][Talkback] Can't focus on TextInput via double tap #24519

🐛 Bug Report

To Reproduce

Expected Behavior

Code Example

Other

Environment

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Android][Talkback] Can't focus on TextInput via double tap #24519

Description

🐛 Bug Report

To Reproduce

Expected Behavior

Code Example

Other

Environment

Activity

PeoB commented on Apr 19, 2019

fhugoduarte commented on Apr 23, 2019

adil-s commented on May 13, 2019

stale commented on Aug 21, 2019

adil-s commented on Aug 22, 2019

devlinb commented on Oct 25, 2019

jeremywiebe commented on Jan 14, 2020

ejanzer commented on Feb 5, 2020

8 remaining items

kevinrodriguez-io commented on Dec 26, 2020

Bertlk commented on Mar 23, 2021

GuilhermePortella commented on Jun 24, 2022

shivenmian commented on Jan 25, 2023

fabOnReact commented on Jan 25, 2023

fabOnReact commented on Jan 27, 2023

fabOnReact commented on Jan 27, 2023

GuilhermePortella commented on Jan 27, 2023

fabOnReact commented on Jan 27, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions