Make links independently focusable by Talkback

Libraries/Text/Text.js

@@ -120,6 +120,7 @@ const Text: React.AbstractComponent<
                 onResponderTerminate(event);
               }
             },
+            onClick: eventHandlers.onClick,
             onResponderTerminationRequest:
               eventHandlers.onResponderTerminationRequest,
             onStartShouldSetResponder: eventHandlers.onStartShouldSetResponder,

Libraries/Text/TextNativeComponent.js

@@ -14,11 +14,13 @@ import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
 import {type ProcessedColorValue} from '../StyleSheet/processColor';
 import {type TextProps} from './TextProps';
+import {type PressEvent} from '../Types/CoreEventTypes';
 
 type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,
+  onClick?: ?(event: PressEvent) => void,
 }>;
 
 export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComponentClass(

ReactAndroid/build.gradle

@@ -499,7 +499,8 @@ dependencies {
     api("com.facebook.infer.annotation:infer-annotation:0.18.0")
     api("com.facebook.yoga:proguard-annotations:1.19.0")
     api("javax.inject:javax.inject:1")
-    api("androidx.appcompat:appcompat:1.0.2")
+    api("androidx.appcompat:appcompat:1.3.0")
+    api("androidx.appcompat:appcompat-resources:1.3.0")
     api("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
     api("com.facebook.fresco:fresco:${FRESCO_VERSION}")
     api("com.facebook.fresco:imagepipeline-okhttp3:${FRESCO_VERSION}")

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -418,7 +418,8 @@ private static void resetTransformProperty(@NonNull View view) {
   }
 
   private void updateViewAccessibility(@NonNull T view) {
-    ReactAccessibilityDelegate.setDelegate(view);
+    ReactAccessibilityDelegate.setDelegate(
+        view, view.isFocusable(), view.getImportantForAccessibility());
   }
 
   @Override

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -8,19 +8,26 @@
 package com.facebook.react.uimanager;
 
 import android.content.Context;
+import android.graphics.Paint;
+import android.graphics.Rect;
 import android.os.Bundle;
 import android.os.Handler;
 import android.os.Message;
-import android.text.SpannableString;
-import android.text.style.URLSpan;
+import android.text.Layout;
+import android.text.Spannable;
+import android.text.Spanned;
+import android.text.style.AbsoluteSizeSpan;
+import android.text.style.ClickableSpan;
 import android.view.View;
 import android.view.accessibility.AccessibilityEvent;
+import android.widget.TextView;
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
 import androidx.core.view.accessibility.AccessibilityNodeInfoCompat;
 import androidx.core.view.accessibility.AccessibilityNodeInfoCompat.AccessibilityActionCompat;
 import androidx.core.view.accessibility.AccessibilityNodeInfoCompat.RangeInfoCompat;
+import androidx.customview.widget.ExploreByTouchHelper;
 import com.facebook.react.R;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Dynamic;
@@ -35,13 +42,15 @@
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import java.util.ArrayList;
 import java.util.HashMap;
+import java.util.List;
 
 /**
  * Utility class that handles the addition of a "role" for accessibility to either a View or
  * AccessibilityNodeInfo.
  */
-public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
+public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
 
   private static final String TAG = "ReactAccessibilityDelegate";
   public static final String TOP_ACCESSIBILITY_ACTION_EVENT = "topAccessibilityAction";
@@ -58,6 +67,9 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
     sActionIdMap.put("decrement", AccessibilityActionCompat.ACTION_SCROLL_BACKWARD.getId());
   }
 
+  private final View mView;
+  private final AccessibilityLinks mAccessibilityLinks;
+
   private Handler mHandler;
 
   /**
@@ -178,8 +190,10 @@ public static AccessibilityRole fromValue(@Nullable String value) {
   private static final String STATE_SELECTED = "selected";
   private static final String STATE_CHECKED = "checked";
 
-  public ReactAccessibilityDelegate() {
-    super();
+  public ReactAccessibilityDelegate(
+      final View view, boolean originalFocus, int originalImportantForAccessibility) {
+    super(view);
+    mView = view;
     mAccessibilityActionsMap = new HashMap<Integer, String>();
     mHandler =
         new Handler() {
@@ -189,6 +203,14 @@ public void handleMessage(Message msg) {
             host.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
           }
         };
+
+    // We need to reset these two properties, as ExploreByTouchHelper sets focusable to "true" and
+    // importantForAccessibility to "Yes" (if it is Auto). If we don't reset these it would force
+    // every element that has this delegate attached to be focusable, and not allow for
+    // announcement coalescing.
+    mView.setFocusable(originalFocus);
+    ViewCompat.setImportantForAccessibility(mView, originalImportantForAccessibility);
+    mAccessibilityLinks = (AccessibilityLinks) mView.getTag(R.id.accessibility_links);
   }
 
   @Override
@@ -376,18 +398,6 @@ public static void setRole(
     nodeInfo.setClassName(AccessibilityRole.getValue(role));
     if (role.equals(AccessibilityRole.LINK)) {
       nodeInfo.setRoleDescription(context.getString(R.string.link_description));
-
-      if (nodeInfo.getContentDescription() != null) {
-        SpannableString spannable = new SpannableString(nodeInfo.getContentDescription());
-        spannable.setSpan(new URLSpan(""), 0, spannable.length(), 0);
-        nodeInfo.setContentDescription(spannable);
-      }
-
-      if (nodeInfo.getText() != null) {
-        SpannableString spannable = new SpannableString(nodeInfo.getText());
-        spannable.setSpan(new URLSpan(""), 0, spannable.length(), 0);
-        nodeInfo.setText(spannable);
-      }
     } else if (role.equals(AccessibilityRole.IMAGE)) {
       nodeInfo.setRoleDescription(context.getString(R.string.image_description));
     } else if (role.equals(AccessibilityRole.IMAGEBUTTON)) {
@@ -433,16 +443,233 @@ public static void setRole(
     }
   }
 
-  public static void setDelegate(final View view) {
+  public static void setDelegate(
+      final View view, boolean originalFocus, int originalImportantForAccessibility) {
     // if a view already has an accessibility delegate, replacing it could cause
     // problems,
     // so leave it alone.
     if (!ViewCompat.hasAccessibilityDelegate(view)
         && (view.getTag(R.id.accessibility_role) != null
             || view.getTag(R.id.accessibility_state) != null
             || view.getTag(R.id.accessibility_actions) != null
-            || view.getTag(R.id.react_test_id) != null)) {
-      ViewCompat.setAccessibilityDelegate(view, new ReactAccessibilityDelegate());
+            || view.getTag(R.id.react_test_id) != null
+            || view.getTag(R.id.accessibility_links) != null)) {
+      ViewCompat.setAccessibilityDelegate(
+          view,
+          new ReactAccessibilityDelegate(view, originalFocus, originalImportantForAccessibility));
+    }
+  }
+
+  // Explicitly re-set the delegate, even if one has already been set.
+  public static void resetDelegate(
+      final View view, boolean originalFocus, int originalImportantForAccessibility) {
+    ViewCompat.setAccessibilityDelegate(
+        view,
+        new ReactAccessibilityDelegate(view, originalFocus, originalImportantForAccessibility));
+  }
+
+  @Override
+  protected int getVirtualViewAt(float x, float y) {
+    if (mAccessibilityLinks == null
+        || mAccessibilityLinks.size() == 0
+        || !(mView instanceof TextView)) {
+      return INVALID_ID;
+    }
+
+    TextView textView = (TextView) mView;
+    if (!(textView.getText() instanceof Spanned)) {
+      return INVALID_ID;
+    }
+
+    Layout layout = textView.getLayout();
+    if (layout == null) {
+      return INVALID_ID;
+    }
+
+    x -= textView.getTotalPaddingLeft();
+    y -= textView.getTotalPaddingTop();
+    x += textView.getScrollX();
+    y += textView.getScrollY();
+
+    int line = layout.getLineForVertical((int) y);
+    int charOffset = layout.getOffsetForHorizontal(line, x);
+
+    ClickableSpan clickableSpan = getFirstSpan(charOffset, charOffset, ClickableSpan.class);
+    if (clickableSpan == null) {
+      return INVALID_ID;
+    }
+
+    Spanned spanned = (Spanned) textView.getText();
+    int start = spanned.getSpanStart(clickableSpan);
+    int end = spanned.getSpanEnd(clickableSpan);
+
+    final AccessibilityLinks.AccessibleLink link = mAccessibilityLinks.getLinkBySpanPos(start, end);
+    return link != null ? link.id : INVALID_ID;
+  }
+
+  @Override
+  protected void getVisibleVirtualViews(List<Integer> virtualViewIds) {
+    if (mAccessibilityLinks == null) {
+      return;
+    }
+
+    for (int i = 0; i < mAccessibilityLinks.size(); i++) {
+      virtualViewIds.add(i);
+    }
+  }
+
+  @Override
+  protected void onPopulateNodeForVirtualView(
+      int virtualViewId, @NonNull AccessibilityNodeInfoCompat node) {
+    // If we get an invalid virtualViewId for some reason (which is known to happen in API 19 and
+    // below), return an "empty" node to prevent from crashing. This will never be presented to
+    // the user, as Talkback filters out nodes with no content to announce.
+    if (mAccessibilityLinks == null) {
+      node.setContentDescription("");
+      node.setBoundsInParent(new Rect(0, 0, 1, 1));
+      return;
+    }
+
+    final AccessibilityLinks.AccessibleLink accessibleTextSpan =
+        mAccessibilityLinks.getLinkById(virtualViewId);
+    if (accessibleTextSpan == null) {
+      node.setContentDescription("");
+      node.setBoundsInParent(new Rect(0, 0, 1, 1));
+      return;
+    }
+
+    node.setContentDescription(accessibleTextSpan.description);
+    node.addAction(AccessibilityNodeInfoCompat.ACTION_CLICK);
+    node.setBoundsInParent(getBoundsInParent(accessibleTextSpan));
+    node.setRoleDescription(mView.getResources().getString(R.string.link_description));
+    node.setClassName(AccessibilityRole.getValue(AccessibilityRole.BUTTON));
+  }
+
+  private Rect getBoundsInParent(AccessibilityLinks.AccessibleLink accessibleLink) {
+    // This view is not a text view, so return the entire views bounds.
+    if (!(mView instanceof TextView)) {
+      return new Rect(0, 0, mView.getWidth(), mView.getHeight());
+    }
+
+    TextView textView = (TextView) mView;
+    Layout textViewLayout = textView.getLayout();
+    if (textViewLayout == null) {
+      return new Rect(0, 0, textView.getWidth(), textView.getHeight());
+    }
+
+    Rect rootRect = new Rect();
+
+    double startOffset = accessibleLink.start;
+    double endOffset = accessibleLink.end;
+    double startXCoordinates = textViewLayout.getPrimaryHorizontal((int) startOffset);
+
+    final Paint paint = new Paint();
+    AbsoluteSizeSpan sizeSpan =
+        getFirstSpan(accessibleLink.start, accessibleLink.end, AbsoluteSizeSpan.class);
+    float textSize = sizeSpan != null ? sizeSpan.getSize() : textView.getTextSize();
+    paint.setTextSize(textSize);
+    int textWidth = (int) Math.ceil(paint.measureText(accessibleLink.description));
+
+    int startOffsetLineNumber = textViewLayout.getLineForOffset((int) startOffset);
+    int endOffsetLineNumber = textViewLayout.getLineForOffset((int) endOffset);
+    boolean isMultiline = startOffsetLineNumber != endOffsetLineNumber;
+    textViewLayout.getLineBounds(startOffsetLineNumber, rootRect);
+
+    int verticalOffset = textView.getScrollY() + textView.getTotalPaddingTop();
+    rootRect.top += verticalOffset;
+    rootRect.bottom += verticalOffset;
+    rootRect.left += startXCoordinates + textView.getTotalPaddingLeft() - textView.getScrollX();
+
+    // The bounds for multi-line strings should *only* include the first line. This is because for
+    // API 25 and below, Talkback's click is triggered at the center point of these bounds, and if
+    // that center point is outside the spannable, it will click on something else. There is no
+    // harm in not outlining the wrapped part of the string, as the text for the whole string will
+    // be read regardless of the bounding box.
+    if (isMultiline) {
+      return new Rect(rootRect.left, rootRect.top, rootRect.right, rootRect.bottom);
+    }
+
+    return new Rect(rootRect.left, rootRect.top, rootRect.left + textWidth, rootRect.bottom);
+  }
+
+  @Override
+  protected boolean onPerformActionForVirtualView(
+      int virtualViewId, int action, @Nullable Bundle arguments) {
+    return false;
+  }
+
+  protected @Nullable <T> T getFirstSpan(int start, int end, Class<T> classType) {
+    if (!(mView instanceof TextView) || !(((TextView) mView).getText() instanceof Spanned)) {
+      return null;
+    }
+
+    Spanned spanned = (Spanned) ((TextView) mView).getText();
+    T[] spans = spanned.getSpans(start, end, classType);
+    return spans.length > 0 ? spans[0] : null;
+  }
+
+  public static class AccessibilityLinks {
+    private final List<AccessibleLink> mLinks;
+
+    public AccessibilityLinks(ClickableSpan[] spans, Spannable text) {
+      ArrayList<AccessibleLink> links = new ArrayList<>();
+      for (int i = 0; i < spans.length; i++) {
+        ClickableSpan span = spans[i];
+        int start = text.getSpanStart(span);
+        int end = text.getSpanEnd(span);
+        // zero length spans, and out of range spans should not be included.
+        if (start == end || start < 0 || end < 0 || start > text.length() || end > text.length()) {
+          continue;
+        }
+
+        final AccessibleLink link = new AccessibleLink();
+        link.description = text.subSequence(start, end).toString();
+        link.start = start;
+        link.end = end;
+
+        // ID is the reverse of what is expected, since the ClickableSpans are returned in reverse
+        // order due to being added in reverse order. If we don't do this, focus will move to the
+        // last link first and move backwards.
+        //
+        // If this approach becomes unreliable, we should instead look at their start position and
+        // order them manually.
+        link.id = spans.length - 1 - i;
+        links.add(link);
+      }
+      mLinks = links;
+    }
+
+    @Nullable
+    public AccessibleLink getLinkById(int id) {
+      for (AccessibleLink link : mLinks) {
+        if (link.id == id) {
+          return link;
+        }
+      }
+
+      return null;
+    }
+
+    @Nullable
+    public AccessibleLink getLinkBySpanPos(int start, int end) {
+      for (AccessibleLink link : mLinks) {
+        if (link.start == start && link.end == end) {
+          return link;
+        }
+      }
+
+      return null;
+    }
+
+    public int size() {
+      return mLinks.size();
+    }
+
+    private static class AccessibleLink {
+      public String description;
+      public int start;
+      public int end;
+      public int id;
     }
   }
 }

ReactAndroid/src/main/java/com/facebook/react/views/text/BUCK

@@ -29,5 +29,6 @@ rn_android_library(
         react_native_target("java/com/facebook/react/uimanager:uimanager"),
         react_native_target("java/com/facebook/react/uimanager/annotations:annotations"),
         react_native_target("java/com/facebook/react/views/view:view"),
+        react_native_target("res:uimanager"),
     ],
 )