Make links independently focusable by Talkback (#31757)

Summary:
Pull Request resolved: #31757

This follows up on D23553222 (b352e2d), which made links functional by using Talkback's Links menu.  We don't often use this as the sole access point for links due to it being more difficult for users to navigate to, and easy for users to miss if they don't listen to the entire description, including the hint text that announces that links are available.

Instead, we generally allow links to be focusable after the main text that contains them is focused. This diff adds this functionality for both Paper and Fabric, and also retains the existing Links menu functionality as well, for users who prefer to use it.

Reviewed By: yungsters

Differential Revision: D28691177

fbshipit-source-id: 55e675cf84df5dda3b15d81a7f9bf1f071006bd2

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"),
     ],
 )