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

[gp3gp3gp3]

Description

This is a duplicate of https://github.com/facebook/react-native/issues/31298, which is following up on https://github.com/facebook/react-native/issues/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

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

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

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

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