Teach ReactTextView Hit Testing/a11y about Facsimile State (Fixes hit testing/a11y for selectable Text in Facsimile) (#55559)

Summary:

When enablePreparedTextLayout is true, we may reuse layouts (including backing `Spannable`), even when ShadowNode generation changes. React tags are subject to change during this period, so we have an extra layer of indirection, that users of `PreparedLayout` based state currently have to deal with.

This adds that logic so that hit testing, a11y delegate, and spans against FragmentIndex, all work in the scenario of ReactTextView with Facsimile state, used for selectable text.





Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D93346617

Author: NickGerleman

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

@@ -37,6 +37,7 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.common.ReactConstants;
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.internal.SystraceSection;
 import com.facebook.react.uimanager.BackgroundStyleApplicator;
@@ -52,6 +53,7 @@
 import com.facebook.react.uimanager.style.BorderStyle;
 import com.facebook.react.uimanager.style.LogicalEdge;
 import com.facebook.react.uimanager.style.Overflow;
+import com.facebook.react.views.text.internal.span.ReactFragmentIndexSpan;
 import com.facebook.react.views.text.internal.span.ReactTagSpan;
 import com.facebook.react.views.text.internal.span.TextInlineViewPlaceholderSpan;
 import com.facebook.yoga.YogaMeasureMode;
@@ -77,6 +79,7 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
   private Overflow mOverflow = Overflow.VISIBLE;
 
   private @Nullable Spannable mSpanned;
+  private @Nullable PreparedLayout mPreparedLayout;
 
   public ReactTextView(Context context) {
     super(context);
@@ -100,6 +103,7 @@ private void initView() {
     mLetterSpacing = 0.f;
     mOverflow = Overflow.VISIBLE;
     mSpanned = null;
+    mPreparedLayout = null;
   }
 
   /* package */ void recycleView() {
@@ -448,16 +452,33 @@ public int reactTagForTouch(float touchX, float touchY) {
       // if no such span can be found we will send the textview's react id as a touch handler
       // In case when there are more than one spans with same length we choose the last one
       // from the spans[] array, since it correspond to the most inner react element
-      ReactTagSpan[] spans = spannedText.getSpans(index, index, ReactTagSpan.class);
-
-      if (spans != null) {
-        int targetSpanTextLength = text.length();
-        for (int i = 0; i < spans.length; i++) {
-          int spanStart = spannedText.getSpanStart(spans[i]);
-          int spanEnd = spannedText.getSpanEnd(spans[i]);
-          if (spanEnd >= index && (spanEnd - spanStart) <= targetSpanTextLength) {
-            target = spans[i].getReactTag();
-            targetSpanTextLength = (spanEnd - spanStart);
+      if (mPreparedLayout != null) {
+        ReactFragmentIndexSpan[] fragmentSpans =
+            spannedText.getSpans(index, index, ReactFragmentIndexSpan.class);
+
+        if (fragmentSpans != null) {
+          int targetSpanTextLength = text.length();
+          for (int i = 0; i < fragmentSpans.length; i++) {
+            int spanStart = spannedText.getSpanStart(fragmentSpans[i]);
+            int spanEnd = spannedText.getSpanEnd(fragmentSpans[i]);
+            if (spanEnd >= index && (spanEnd - spanStart) <= targetSpanTextLength) {
+              target = mPreparedLayout.getReactTags()[fragmentSpans[i].getFragmentIndex()];
+              targetSpanTextLength = (spanEnd - spanStart);
+            }
+          }
+        }
+      } else {
+        ReactTagSpan[] spans = spannedText.getSpans(index, index, ReactTagSpan.class);
+
+        if (spans != null) {
+          int targetSpanTextLength = text.length();
+          for (int i = 0; i < spans.length; i++) {
+            int spanStart = spannedText.getSpanStart(spans[i]);
+            int spanEnd = spannedText.getSpanEnd(spans[i]);
+            if (spanEnd >= index && (spanEnd - spanStart) <= targetSpanTextLength) {
+              target = spans[i].getReactTag();
+              targetSpanTextLength = (spanEnd - spanStart);
+            }
           }
         }
       }
@@ -627,6 +648,22 @@ public void setSpanned(Spannable spanned) {
     return mSpanned;
   }
 
+  /**
+   * Get the PreparedLayout originally generated by the Fabric renderer, if using {@code
+   * enablePreparedTextLayout()}
+   *
+   * <p>TODO: Should be made internal when ReactTextView is converted to Kotlin
+   */
+  @UnstableReactNativeAPI
+  @Nullable
+  public PreparedLayout getPreparedLayout() {
+    return mPreparedLayout;
+  }
+
+  /* package */ void setPreparedLayout(@Nullable PreparedLayout preparedLayout) {
+    mPreparedLayout = preparedLayout;
+  }
+
   public void setLinkifyMask(int mask) {
     mLinkifyMaskType = mask;
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewAccessibilityDelegate.kt

@@ -18,9 +18,11 @@ import androidx.core.view.ViewCompat
 import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
 import androidx.core.view.accessibility.AccessibilityNodeProviderCompat
 import com.facebook.react.R
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.uimanager.ReactAccessibilityDelegate
 import com.facebook.react.views.text.internal.span.ReactClickableSpan
 
+@OptIn(UnstableReactNativeAPI::class)
 internal class ReactTextViewAccessibilityDelegate(
     view: View,
     originalFocus: Boolean,
@@ -154,6 +156,8 @@ internal class ReactTextViewAccessibilityDelegate(
   private fun getLayoutFromHost(): Layout? {
     return if (hostView is PreparedLayoutTextView) {
       (hostView as PreparedLayoutTextView).preparedLayout?.layout
+    } else if (hostView is ReactTextView && (hostView as ReactTextView).preparedLayout != null) {
+      (hostView as ReactTextView).preparedLayout?.layout
     } else if (hostView is TextView) {
       (hostView as TextView).layout
     } else {
@@ -171,6 +175,8 @@ internal class ReactTextViewAccessibilityDelegate(
     val host = hostView
     return if (host is PreparedLayoutTextView) {
       host.preparedLayout?.layout?.text as? Spanned
+    } else if (host is ReactTextView && host.preparedLayout != null) {
+      host.preparedLayout?.layout?.text as? Spanned
     } else if (host is TextView) {
       host.text as? Spanned
     } else {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.kt

@@ -167,6 +167,9 @@ public constructor(
         paragraphAttributes.getDouble(TextLayoutManager.PA_KEY_MINIMUM_FONT_SIZE).toFloat()
     view.setMinimumFontSize(minimumFontSize)
 
+    // Clear any stale PreparedLayout from a previous update
+    view.setPreparedLayout(null)
+
     val textBreakStrategy =
         TextAttributeProps.getTextBreakStrategy(
             paragraphAttributes.getString(TextLayoutManager.PA_KEY_TEXT_BREAK_STRATEGY)
@@ -194,6 +197,7 @@ public constructor(
     val text = layout.text
     val spanned = if (text is Spannable) text else SpannableString(text)
     view.setSpanned(spanned)
+    view.setPreparedLayout(preparedLayout)
 
     val textAlign =
         when (layout.alignment) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/ReactLinkSpan.kt

@@ -11,8 +11,10 @@ import android.text.TextPaint
 import android.text.style.ClickableSpan
 import android.view.View
 import com.facebook.react.bridge.ReactContext
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.views.text.PreparedLayoutTextView
+import com.facebook.react.views.text.ReactTextView
 import com.facebook.react.views.text.TextLayoutManager
 import com.facebook.react.views.view.ViewGroupClickEvent
 
@@ -29,11 +31,16 @@ import com.facebook.react.views.view.ViewGroupClickEvent
  * </Text>
  * ```
  */
+@OptIn(UnstableReactNativeAPI::class)
 internal class ReactLinkSpan(val fragmentIndex: Int) : ClickableSpan(), ReactSpan {
   override fun onClick(view: View) {
     val context = view.context as ReactContext
-    val textView = view as? PreparedLayoutTextView ?: return
-    val preparedLayout = textView.preparedLayout ?: return
+    val preparedLayout =
+        when (view) {
+          is PreparedLayoutTextView -> view.preparedLayout
+          is ReactTextView -> view.preparedLayout
+          else -> null
+        } ?: return
     val reactTag = preparedLayout.reactTags[fragmentIndex]
     val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, reactTag)
     eventDispatcher?.dispatchEvent(