[Documentation] updating documentation for accessible and accessibilityRole="link" prop

[fabOnReact]

screenreader difference in behaviour of accessible prop between TalkBack and VoiceOver

Sometimes this will group's descendants that are also marked as accessible together into one focusable element (e.g. accessible with accessible descendants), and sometimes it does not (e.g. accessible with accessible descendants). It's definitely worth clarifying this behavior in the documentation

https://github.com/facebook/react-native/issues/30851#issuecomment-1194938293 https://github.com/facebook/react-native/issues/30851#issuecomment-1194944880 https://github.com/facebook/react-native/issues/30851#issuecomment-1194957300

On iOS the default behavior (and really, the only reasonably possible behavior), would be that the outer view is focusable, and must be given an accessibilityLabel to describe it. No accessible element can have accessible descendants, and all accessible elements must have an accessibility label. Apple has has this very straightforward, and easy to understand for developers.

Google on the other hand, has made things quite a bit more complicated.

On Android, the default behavior in this situation would be that all three views (the outer View and the inner two Text views) would attempt to become focusable (assume that the accessible prop maps to Androids focusable view property), but in this case the outer view would actually need some sort of label to be provided, as it has no content that it could announce. If no label was given, the outer view would become unfocusable and only the inner views would end up being focusable, which is exactly what you are seeing happen with the "Nested Text Views" example. If a label was given (and this label was mapped to the contentDescription property), then all three views would become focusable.

• [x] prepare documentation PR clarifying differences between iOS and Android for scenarios accessible parent view and one not accessible child and parent view with accessibilityLabel does not over-ride children with onPress handler
• [x] iOS documentation for Nested Text is not accessible

fixes https://github.com/facebook/react-native/issues/30851

importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images

Nested Test with accessibilityRole="link" is accessible when parent sets importantForAccessibility="yes"

https://github.com/facebook/react-native/pull/33215/files#diff-37199b6b562523b453547e7fb56c95fd9aed5dc01fee3f6bdd50e97297ff8e7fR78 https://developer.android.com/reference/android/view/View#IMPORTANT_FOR_ACCESSIBILITY_YES https://github.com/facebook/react-native/issues/30375#issuecomment-781494859

sourcecode of the example

class AccessibilityExample extends React.Component<{}> {
  render(): React.Node {
    const uri =
      'https://portfoliofabrizio.s3.eu-central-1.amazonaws.com/videos/surfcheck-poster.png';
    return (
      <View>
        <RNTesterBlock title="TextView without label">
          <Text importantForAccessibility="no" accessible={true}>
            This is a Text with an Image as nested Child and a Link.
            <Text
              accessibilityRole="link">
              This is a link
            </Text>
            <Image
              accessible={true}
              focusable={true}
              importantForAccessibility="yes"
              accessibilityLabel="image accessibilityLabel"
              source={{uri}}
              style={{height: 400, width: 200}}
            />
          </Text>
        </RNTesterBlock>
      </View>
    );
  }
}

Nested Test with accessibilityRole="link" is **not** accessible when parent sets importantForAccessibility="no"

fixes https://github.com/facebook/react-native/issues/30850#issuecomment-1192286477

[netlify[bot]]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	62a4b13e1c9cf91def521dc9102029d956eaf863
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/62e9ffad2e17900008b9bddd
😎 Deploy Preview	https://deploy-preview-3226--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.