How can I make a link in a nested Text element accessible in React Native?

Question

Problem: I am trying to make a link accessible on both Android and iOS using React Native. iOS has a rotor when using VoiceOver that has an option to switch between links on the screen which does not work for the following element:

<Text>
Here is some text <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link</Text>
</Text> 

The same thing happens on Android when using the Links option to search for links on-screen with TalkBack on. In the above code sample, double-tapping in Android does not open the link when TalkBack is on but in iOS double-tapping the sentence with VoiceOver on does open the link.

Things I've Tried: I have tried splitting the Text elements like this:

<View>
  <Text> Here is some text</Text>
  <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link </Text>
</View>

This does fix the issue on Android with me being able to double-tap the link and it opens the webpage and it will also allow me to flick to it as a link when I have the links option on for TalkBack, but this is not an optimal strategy because it messes with the format of my sentence for sighted users. This also does not add the link item to the iOS rotor. Given that this is an accessibility problem I have not found a lot of resources on how to fix this issue.

Conclusion: I want to be able to click the link while it is in the nested Text element on Android and I want the links control on TalkBack to work. I would also like to add the links option to the rotor on iOS. For those unfamiliar with the iOS accessibility rotor here is a link to information on iOS accessibility rotor Here is a link for the local/global context menu for accessibility on Android. Any advice on this would be greatly appreciated.

Marxist

Did you find any solution to this? – Lorsung

@Lorsung no I have not found a solution to this. If you have any suggestions I'm all ears. – Marxist

I found this, but it's not working for me, maybe it would for you? callstack.com/blog/react-native-android-accessibility-tips – Adhere

As of React Native v0.69.6, the pattern in the initial example (setting accessibilityRole="link" on the inner Text element) works as expected for me. On Android, this is read as "Here is some text. [ding] Here is a link [pause] Links available, use tap with three fingers to view." – Lorenzen

Answer 1

I followed up with the link @verunar posted in the comments and found that this is most likely the best answer for inline links in text elements.

Here is the code:

 <Text
      accessibilityRole="link"
      onPress={() =>
        AccessibilityInfo.isScreenReaderEnabled().then(
          enabled =>
            enabled && openURL('https://callstack.com/team/lukasz-walczak/'),
        )
      }>
      Check my activity on 
      <Text
        onPress={() => openURL('https://callstack.com/team/lukasz-walczak/')}
        style={styles.link}>
        Callstack's 
      </Text>
      webpage
    </Text>
 

Basically, it checks if the screen reader is on and if it is then the whole text element will open the URL. If the screen reader is not on only the actual link text will navigate you to the linked site. This works with Android and iOS to get the screen readers to recognize the text as a link, but it only works if there is only one inline link.

Marxist

Answer 2

Following up on this post as I ran into the same issue. While the accepted answer works, when the user taps on the paragraph the user will get a box highlighting the entire paragraph that implies they have clicked on something when the user should be under the impression the paragraph is just text. My solution:

<TouchableOpacity activeOpacity={1} onPress={() => AccessibilityInfo.isScreenReaderEnabled().then((enabled) => enabled && openURL("https://callstack.com/team/lukasz-walczak/"))}>
  <Text accessibilityLabel="Link" accessibilityRole="link">
    Check my activity on
    <Text onPress={() => Linking.openURL("https://callstack.com/team/lukasz-walczak/")} style={styles.aboutPageLink} accessibilityRole="link">
      Callstack's
    </Text>
    <Text style={styles.aboutPageParagraph}>webpage</Text>
  </Text>
</TouchableOpacity>

Hunger