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

Description

Same as this issue https://github.com/facebook/react-native/issues/27147 Inline elements are not accessible. Such element can be <Text>This is a sentence, that has a <Text onPress={() => {}}>#hashtag</Text>, as well as a <Image /></Text>. Example such as a tweet that has inline hashtags, mentions, etc.

React Native version:

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.05 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.3 - /var/folders/jk/v93zkv010j1dkt0vhtt0qw906bd4gy/T/yarn--1617574215615-0.8276275399979687/node
    Yarn: 1.22.10 - /var/folders/jk/v93zkv010j1dkt0vhtt0qw906bd4gy/T/yarn--1617574215615-0.8276275399979687/yarn
    npm: 7.8.0 - ~/.nvm/versions/node/v14.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-29 | Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.9 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: ~0.64.0 => 0.64.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

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

Expected Results

There should be a way to make inline elements accessible. Looking at Twitter official client’s example, these inline elements can be announced after reading through the full text.

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

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

[moddatherrashed]

+1 This issue has to be resolved, since it is one of the main accessibility needs

[blavalla]

Links should now be working in the new Fabric renderer.

<View style={styles.container}>
  <Text style={styles.paragraph}>
    {'This is a test of '}
    <Text style={styles.link} accessibilityRole="link" onPress={() =>{ alert('clicked')}}>inline links</Text>
    {' in Fabric. Here is '}
    <Text style={styles.link} accessibilityRole="link" onPress={() =>{ alert('clicked')}}>another link</Text>
    {'.'}
  </Text>
</View>

https://user-images.githubusercontent.com/1518064/186504872-de0aaee7-d6d2-49e0-a1be-6b85da29bc86.mp4

Images aren’t currently supported, but the logic would be similar for supporting links, you’d just need to look for <Image>'s in the same way we look for links and buttons here:

https://github.com/facebook/react-native/blob/7b05b091fd97f95b778369277ac2147730abc7b8/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentAccessibilityProvider.mm#L79

And add them as additional elements to the accessibilityElements array.