[Accessibility, Android] Adding testID cause malfunction to android talkback

[yanivbd]

Description

I have the following React Native code:

<View testID={'containerTestID'}>
    <Text>Title</Text>
    <Text>Subtitle</Text>
</View>

I'm working on accessibility to my app and found that after adding the testID above, I cannot focus on each one of the texts on talkback mode, the talkback focus them together only. This is reproduced in android only.
When removing the testID, each of the texts is focused separately as needed for the talkback. But since it is a big app with a lot of tests, removing testIDs from the components is not an option.

It is not reproduced in iOS.

Can you please advise? Thanks

Steps to reproduce

1. Enable talkback on Android device.
2. Try to focus on a text which is wrapped with a view with testID

React Native Version

0.71.13

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
    OS: macOS 13.6.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 641.53 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.6.0 - ~/.nvm/versions/node/v18.6.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v18.6.0/bin/npm
    Watchman: 2023.11.20.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.14.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    Android SDK:
      API Levels: 27, 28, 29, 30, 31, 33, 34
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.2, 30.0.3, 33.0.0, 34.0.0
      System Images: android-28 | Android TV Intel x86 Atom, android-28 | China version of Wear OS Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9477386
    Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.7 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.2.0 => 18.2.0 
    react-native: ^0.71.13 => 0.71.13 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Stacktrace or Logs

N/A

Reproducer

N/A

Screenshots and Videos

No response

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.15. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cortinico]

Looks like a duplicate of #32969

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[yanivbd]

Looks like a duplicate of #32969

Well, I'm not sure this is the same, the one you sent is talking about a problem of a text, mine is talking something that becomes not accessible

[ghcassell]

I found that this bug is not present on a scroll view. So, although not ideal, a potential workaround could be to use a custom View component which you can then swap back when the bug is resolved. This custom View could be something like this:

import { PropsWithChildren } from 'react';
import { Platform, View as RNView, ViewProps } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

const View = ({ children, ...props }: ViewProps & PropsWithChildren) =>
    // Workaround for https://github.com/facebook/react-native/issues/42359

    Platform.OS === 'android' && props.testID ? (
        <ScrollView enabled={false} {...props}>
            {children}
        </ScrollView>
    ) : (
        <RNView {...props}>{children}</RNView>
    );

export default View;

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[lgibso34]

Still seeing this on React Native 0.75.3

[lgibso34]

Okay. in my App I found that (v6) @react-navigation/native-stack's createNativeStackNavigator is the issue. If I change it to @react-navigation/stack's createStackNavigator the TalkBack issue goes away.... I found this out by just returning a native stack navigator and one screen with OP's content.

However, I cannot reproduce this issue in a new project. I also upgraded our app to react-navigation v7 and the problem still persists (and is "fixed" with the above) but yet I can't reproduce in a new project. Pretty frustrating.

[mateoguzmana]

I'm not able to reproduce this issue using the example in the description, I tried out with both "Read from next item" from the TalkBack menu which basically focuses automatically in available elements but also with manual focusing and both seem to work with and without testID in the view.

See my video:

Screen.Recording.2025-01-19.at.11.49.20.mov

Please try using the latest version, it might have been fixed already since the report.

[RohovDmytro]

Using @react-navigation/native-stack@npm:7.2.0 the TalkBack issue persist. Having testID prop messes things up heavily, simply removing it make things work.

[RohovDmytro]

My workaround is to use BaseButton instead of RectButton from react-native-gesture-handler as the base for custom Button component.