[a11y][iOS] Nested accessibility items inside Text not accessible

[gp3gp3gp3]

Description

This is a duplicate of #31298, which is following up on #27147.

Nested text is not readable by the screen reader on iOS. It is working in the latest version of React Native for Android and when the Fabric renderer is enabled, but is not working on iOS if fabric is not enabled. Fabric is too new to be used by larger production applications because so few third party libraries have adopted to it.

Using @xmflsct snack and steps to reproduce since their issue was incorrectly closed.

Version

0.70.4

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 187.17 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
Watchman: 2022.10.03.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK:
Android NDK: 21.4.7075529
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.4 => 0.70.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Use an example such as This is a sentence, that has a <Text onPress={() => {}}>#hashtag</Text>, as well as a <Image /></Text>
On iPhone physical device, turn on VoiceOver

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

In case this helps, https://github.com/tooot-app/app/blob/main/src/components/Parse/HTML.tsx

[carlaTatiana]

Any update about this?

[danielrhodes]

Can confirm this is happening.

If you adjust iOS accessibility to increase font size, and have something like:

<Text style={{fontSize: 15}}>Hello World</Text>
<Text style={{fontSize: 15}}>Hello <Text>World</Text></Text>

The first line will increase as expected, and the second line will not. However, if you decrease the OS accessibility font size, both decrease as expected.

[github-actions]

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.

[Jokerwolf]

Bumping this ticket as the problem is still there, unfortunately.

I can see that there is a solution for Fabric renderer. Is there a solution or a plan to enable it for non-fabric? Also not sure if it's fixed for iOS in Fabric or not? Could you pls provide some updates?

[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 was closed because it has been stalled for 7 days with no activity.