[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[bot]]

:warning:	Missing Reproducible Example
:information_source:	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[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

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 https://github.com/facebook/react-native/issues/32969

[github-actions[bot]]

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;