Accessibility Bug

[ajaysaini-sgvu]

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(R) Core(TM) 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 >

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, 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 current release.

[chrisglein]

Version is a bit stale (0.60 is 3 releases behind).
Also, can you clarify where you're getting your expectations about how the roles are read?
Inferring from your environment info, is this Android only?

[ajaysaini-sgvu]

Yes. This is on android only.

[ajaysaini-sgvu]

We are using RN .60.5 in the production. it will not be possible for us to test on latest RN due to some constraints. We are using Voice Over and Talkback for the accessibility.

[safaiyeh]

@ajaysaini-sgvu Could you test it on a brand new template and see if you can reproduce it?

[ajaysaini-sgvu]

what do you mean by brand new template ?

[nico22utn]

Hi! just one question, have you noticed some issue related with the accessibilityRole=header??
Are you able to read it?

JUST FOR ANDROID.

[safaiyeh]

what do you mean by brand new template ?

the template provide by React Native. npx react-native init ProjectName

[amarlette]

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

[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 Android: Role description is announced before the components text, rather than after #31042 for all the details).
2. This is being worked on in this PR Override default Talkback automatic content grouping and generate a custom contentDescription  #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"

[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.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.