Accessibility Bug

Description

Enabling Accessibility is reading out parent’s accessibilityRole first and then reading out children’s accessibilityRole. Expected: Accessibility should read children’s accessibilityRole first and then parent’s accessibilityRole.

Lets take following example:

<TouchableOpacity accessible=“true” accessibilityRole=“button">
      <Text>Hi I am First Text Element</Text>
      <Text>Hi I am Second Text Element</Text>
      <Text>Hi I am Third Text Element</Text>
</TouchableOpacity >

Here, TouchableOpacity’s accessibilityRole is reading out first and then Text 1, Text 2, Text 3 and so on.

React Native version:

System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Memory: 413.25 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 15.0.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.0.3 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 IDEs: Android Studio: 4.1 AI-201.8743.12.41.6953283 Xcode: 12.1/12A7403 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.60.5 => 0.60.5 npmGlobalPackages: react-native-cli: 2.0.1

Steps To Reproduce

Enable Accessibility Click on the Parent Component(TouchableOpacity)

Expected Results

Accessibility should read children’s first and then parent’s accessibilityRole.

Snack, code example, screenshot, or link to a repository:

<TouchableOpacity accessible=“true” accessibilityRole=“button">
      <Text>Hi I am First Text Element</Text>
      <Text>Hi I am Second Text Element</Text>
      <Text>Hi I am Third Text Element</Text>
</TouchableOpacity >

[blavalla]

Just to clarify a few things here.

1. This is still an issue, and is related to the way that Talkback combines element descriptions (see #31042 for all the details).
2. This is being worked on in this PR https://github.com/facebook/react-native/pull/33690
3. The original issues “expected behavior”, written as “Accessibility should read children’s accessibilityRole first and then parent’s accessibilityRole.” is actually incorrect. An element can only really have one role, even if it’s made up of the combination of other elements. So there is never a case where both the parent’s role and the child’s role should be announced. Talkback will always defer to the parent in this case, and whatever role it has, as it only pulls up the contentDescription/text of the child when combining them. This is by design so that you don’t end up with elements that have two conflicting roles (for example, “button” and “slider”). Generally speaking, if the child has a role defined, it should probably also be accessible on its own, and therefore won’t get pulled up into its parents announcement in the first place.

Once the above PR is finished, the core of this issue will be resolved and the example in the issue would be announced as:

“Hi I am First Text Element, Hi I am Second Text Element, Hi I am Third Text Element, button”

[amarlette]

This issue should be resolved by #31042 once that issue is closed as part of the Improved React Native Accessibility Project