Files
react-native/ReactCommon/react
Emily Janzer b352e2da81 Create a ClickableSpan for nested Text components
Summary:
Right now nested Text components are not accessible on Android. This is because we only create a native ReactTextView for the parent component; the styling and touch handling for the child component are handled using spans. In order for TalkBack to announce the link, we need to linkify the text using a ClickableSpan.

This diff adds ReactClickableSpan, which TextLayoutManager uses to linkify a span of text when its corresponding React component has `accessibilityRole="link"`. For example:

  <Text>
    A paragraph with some
    <Text accessible={true} accessibilityRole="link" onPress={onPress} onClick={onClick}>links</Text>
    surrounded by other text.
  </Text>

With this diff, the child Text component will be announced by TalkBack ('links available') and exposed as an option in the context menu. Clicking on the link in the context menu fires the Text component's onClick, which we're explicitly forwarding to onPress in Text.js (for now - ideally this would probably use a separate event, but that would involve wiring it up in the renderer as well).

ReactClickableSpan also applies text color from React if it exists; this is to override the default Android link styling (teal + underline).

Changelog: [Android][Fixed] Make nested Text components accessible as links

Reviewed By: yungsters, mdvacca

Differential Revision: D23553222

fbshipit-source-id: a962b2833d73ec81047e86cfb41846513c486d87
2020-09-15 17:34:35 -07:00
..