Rewrite accessibilityOrder with virtual view hierarchy (#51692)

Summary:
Pull Request resolved: #51692

The original algorithm for accessibilityOrder on Android had unexpected bugs. For some reason `.traversalAfter()` and `traversalBefore()` have unexpected behaviors when dealing with ancestor/descendant relationships getting more and more unexpected the further apart they are.

So we are ditching that approach entirely.

Now we have the view with accessibilityOrder create a virtual view hierarchy. We create a virtual node for each child that is in the order, and set the virtual node's position to be the same as the View it is trying to represent.

We then also populate that node with the same stuff we populate regular ax nodes with the `populateAccessibilityNodeInfo()` function and the content description of the view it is backing so we get matching descriptions with what would otherwise be the normal announcement.

**We have no way to exhaustively check every accessibility use case so we'll have to fine tune this as bugs come up, I'm expecting there to not be many issues since we populate the node the exact same way we populate every other node but anything that happens before React Native handles the node might miss some things**

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D74766296

fbshipit-source-id: 5e77c17bed1644bc5fbf5c1e19c3c6908cc1e3e9

Author: jorge-cab

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -292,7 +292,6 @@ public void setNativeId(@NonNull T view, @Nullable String nativeId) {
     if (view.getTag(R.id.accessibility_order_parent) != null) {
       ViewGroup accessibilityParent = (ViewGroup) view.getTag(R.id.accessibility_order_parent);
 
-      ReactAxOrderHelper.unsetAccessibilityOrder(accessibilityParent);
       accessibilityParent.setTag(R.id.accessibility_order_dirty, true);
 
       accessibilityParent.notifySubtreeAccessibilityStateChanged(
@@ -334,12 +333,11 @@ public void onChildViewRemoved(View parent, View child) {
                   view.setTag(R.id.accessibility_order_dirty, true);
                 }
               });
-    }
 
-    ReactAxOrderHelper.unsetAccessibilityOrder(view);
-    ((ViewGroup) view)
-        .notifySubtreeAccessibilityStateChanged(
-            view, view, AccessibilityEvent.CONTENT_CHANGE_TYPE_SUBTREE);
+      ((ViewGroup) view)
+          .notifySubtreeAccessibilityStateChanged(
+              view, view, AccessibilityEvent.CONTENT_CHANGE_TYPE_SUBTREE);
+    }
   }
 
   @ReactProp(name = ViewProps.ACCESSIBILITY_LABELLED_BY)

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -17,6 +17,7 @@
 import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
 import android.widget.EditText;
+import android.widget.TextView;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.core.view.ViewCompat;
@@ -41,8 +42,11 @@
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.uimanager.util.ReactFindViewUtil;
+import java.util.ArrayList;
 import java.util.HashMap;
+import java.util.HashSet;
 import java.util.List;
+import java.util.Set;
 
 /**
  * Utility class that handles the addition of a "role" for accessibility to either a View or
@@ -65,6 +69,7 @@ public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
   private static final String STATE_CHECKED = "checked";
 
   private final View mView;
+  private List<View> mAxOrderViews;
   private Handler mHandler;
   private final HashMap<Integer, String> mAccessibilityActionsMap;
 
@@ -108,7 +113,6 @@ public static void setDelegate(
     if (!ViewCompat.hasAccessibilityDelegate(view)
         && (view.getTag(R.id.accessibility_role) != null
             || view.getTag(R.id.accessibility_order) != null
-            || view.getTag(R.id.accessibility_order_parent) != null
             || view.getTag(R.id.accessibility_state) != null
             || view.getTag(R.id.accessibility_actions) != null
             || view.getTag(R.id.react_test_id) != null
@@ -134,22 +138,7 @@ protected View getHostView() {
     return mView;
   }
 
-  @Override
-  public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
-    super.onInitializeAccessibilityNodeInfo(host, info);
-
-    if (host.getTag(R.id.accessibility_order_dirty) != null) {
-      boolean isAxOrderDirty = (boolean) host.getTag(R.id.accessibility_order_dirty);
-      if (isAxOrderDirty) {
-        ReactAxOrderHelper.setCustomAccessibilityFocusOrder(host);
-        host.setTag(R.id.accessibility_order_dirty, false);
-      }
-    }
-
-    if (host.getTag(R.id.accessibility_order_flow_to) != null) {
-      ReactAxOrderHelper.applyFlowToTraversal(host, info);
-    }
-
+  private void populateAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
     if (host.getTag(R.id.accessibility_state_expanded) != null) {
       final boolean accessibilityStateExpanded =
           (boolean) host.getTag(R.id.accessibility_state_expanded);
@@ -266,6 +255,34 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
     }
   }
 
+  @Override
+  public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
+    // If we set an accessibility order then all the focusing logic should go through our custom
+    // virtual view tree hierarchy and ignore the default path
+    ReadableArray axOrderIds = (ReadableArray) mView.getTag(R.id.accessibility_order);
+    if (axOrderIds != null && axOrderIds.size() != 0) {
+
+      Boolean isAxOrderDirty = (Boolean) mView.getTag(R.id.accessibility_order_dirty);
+      if (isAxOrderDirty != null && isAxOrderDirty) {
+        List<String> axOrderIdsList = new ArrayList<>();
+        Set<String> axOrderSet = new HashSet<>();
+        for (int i = 0; i < axOrderIds.size(); i++) {
+          String id = axOrderIds.getString(i);
+          if (id != null) {
+            axOrderIdsList.add(id);
+            axOrderSet.add(id);
+          }
+        }
+
+        mAxOrderViews = ReactAxOrderHelper.processAxOrderTree(mView, axOrderIdsList, axOrderSet);
+      }
+      return;
+    }
+
+    super.onInitializeAccessibilityNodeInfo(host, info);
+    populateAccessibilityNodeInfo(host, info);
+  }
+
   @Override
   public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
     super.onInitializeAccessibilityEvent(host, event);
@@ -436,17 +453,65 @@ public static void setRole(
 
   @Override
   protected int getVirtualViewAt(float x, float y) {
-    return INVALID_ID;
+    if (mAxOrderViews == null) {
+      return HOST_ID;
+    }
+
+    int closestViewId = HOST_ID;
+    int smallestArea = Integer.MAX_VALUE;
+
+    for (int i = 0; i < mAxOrderViews.size(); i++) {
+      Rect bounds = ReactAxOrderHelper.getVirtualViewBounds(mView, mAxOrderViews.get(i));
+      if (bounds.contains((int) x, (int) y)) {
+        int area = bounds.width() * bounds.height();
+        if (area < smallestArea) {
+          smallestArea = area;
+          closestViewId = i;
+        }
+      }
+    }
+
+    return closestViewId;
   }
 
   @Override
-  protected void getVisibleVirtualViews(List<Integer> virtualViewIds) {}
+  protected void getVisibleVirtualViews(List<Integer> virtualViewIds) {
+    if (mAxOrderViews != null && !mAxOrderViews.isEmpty()) {
+      for (int i = 0; i < mAxOrderViews.size(); i++) {
+        virtualViewIds.add(i);
+      }
+    }
+  }
 
   @Override
   protected void onPopulateNodeForVirtualView(
       int virtualViewId, @NonNull AccessibilityNodeInfoCompat node) {
-    node.setContentDescription("");
-    node.setBoundsInParent(new Rect(0, 0, 1, 1));
+    if (mView.getTag(R.id.accessibility_order) != null) {
+      if (mAxOrderViews.size() <= virtualViewId) {
+        node.setContentDescription("");
+        node.setBoundsInParent(new Rect(0, 0, 1, 1));
+        return;
+      }
+
+      View virtualView = mAxOrderViews.get(virtualViewId);
+
+      node.setContentDescription("");
+      if (virtualView == mView) {
+        if (mView.getContentDescription() != null) {
+          node.setContentDescription(mView.getContentDescription());
+        }
+
+        if (mView instanceof TextView && ((TextView) mView).getText() != null) {
+          node.setText(((TextView) mView).getText());
+        }
+
+        populateAccessibilityNodeInfo(mView, node);
+        node.setBoundsInParent(new Rect(0, 0, mView.getWidth(), mView.getHeight()));
+      } else {
+        node.setBoundsInParent(ReactAxOrderHelper.getVirtualViewBounds(mView, virtualView));
+      }
+      node.addChild(virtualView);
+    }
   }
 
   @Override
@@ -457,6 +522,10 @@ protected boolean onPerformActionForVirtualView(
 
   @Override
   public @Nullable AccessibilityNodeProviderCompat getAccessibilityNodeProvider(View host) {
+    if (mView.getTag(R.id.accessibility_order) != null) {
+      return super.getAccessibilityNodeProvider(host);
+    }
+
     return null;
   }