Fix View Coopting View edge case on Android (#52066)

Summary:

Before, to disable views that were excluded from the order we were setting them to be not important for accessibility. This however breaks coopting behavior of parent views, because parent views will not announce content descriptions of children that are not important for accessibility.

Instead of disabling by setting `important for accessibility = no` now we just set `isFocusable = false` which disables focusing but still allows parent views to coopt

We also add functionality to restore view focusability when enabling disabling screen readers since `isFocusable` changes keyboard focusability and when screen readers are disabled we don't want to change it.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D76745057

Author: jorge-cab

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3659,6 +3659,7 @@ public class com/facebook/react/uimanager/ReactAccessibilityDelegate : androidx/
 	public static final field TOP_ACCESSIBILITY_ACTION_EVENT Ljava/lang/String;
 	public static final field sActionIdMap Ljava/util/HashMap;
 	public fun <init> (Landroid/view/View;ZI)V
+	public fun cleanUp ()V
 	public static fun createNodeInfoFromView (Landroid/view/View;)Landroidx/core/view/accessibility/AccessibilityNodeInfoCompat;
 	public fun getAccessibilityNodeProvider (Landroid/view/View;)Landroidx/core/view/accessibility/AccessibilityNodeProviderCompat;
 	protected fun getHostView ()Landroid/view/View;

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

@@ -19,6 +19,7 @@
 import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.react.R;
@@ -186,6 +187,16 @@ public void onDropViewInstance(@NonNull T view) {
     if (focusChangeListener instanceof BaseVMFocusChangeListener) {
       ((BaseVMFocusChangeListener) focusChangeListener).detach(view);
     }
+
+    AccessibilityDelegateCompat axDelegate = ViewCompat.getAccessibilityDelegate(view);
+
+    if (axDelegate instanceof ReactAccessibilityDelegate) {
+      ((ReactAccessibilityDelegate) axDelegate).cleanUp();
+    }
+
+    if (view instanceof ViewGroup) {
+      ((ViewGroup) view).setOnHierarchyChangeListener(null);
+    }
   }
 
   // Currently, layout listener is only attached when transform or transformOrigin is set.

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

@@ -16,6 +16,7 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
+import android.view.accessibility.AccessibilityManager;
 import android.widget.EditText;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
@@ -72,6 +73,10 @@ public class ReactAccessibilityDelegate extends ExploreByTouchHelper {
   private Handler mHandler;
   private final HashMap<Integer, String> mAccessibilityActionsMap;
 
+  @Nullable
+  private AccessibilityManager.AccessibilityStateChangeListener accessibilityStateChangeListener =
+      null;
+
   @Nullable View mAccessibilityLabelledBy;
 
   static {
@@ -261,6 +266,22 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
     ReadableArray axOrderIds = (ReadableArray) mView.getTag(R.id.accessibility_order);
     if (axOrderIds != null && axOrderIds.size() != 0) {
 
+      AccessibilityManager am =
+          (AccessibilityManager) host.getContext().getSystemService(Context.ACCESSIBILITY_SERVICE);
+
+      if (accessibilityStateChangeListener == null && am != null) {
+        AccessibilityManager.AccessibilityStateChangeListener newAccessibilityStateChangeListener =
+            enabled -> {
+              if (!enabled) {
+                ReactAxOrderHelper.restoreSubtreeFocusability(host);
+                host.setTag(R.id.accessibility_order_dirty, true);
+              }
+            };
+
+        am.addAccessibilityStateChangeListener(newAccessibilityStateChangeListener);
+        accessibilityStateChangeListener = newAccessibilityStateChangeListener;
+      }
+
       Boolean isAxOrderDirty = (Boolean) mView.getTag(R.id.accessibility_order_dirty);
       if (isAxOrderDirty != null && isAxOrderDirty) {
         List<String> axOrderIdsList = new ArrayList<>();
@@ -1098,4 +1119,17 @@ public static AccessibilityRole fromValue(@Nullable String value) {
       }
     }
   }
+
+  // In case a view with accessibilityOrder is unmounted we need a way to clean up the listener on
+  // this delegate
+  public void cleanUp() {
+    if (accessibilityStateChangeListener != null) {
+      AccessibilityManager am =
+          (AccessibilityManager) mView.getContext().getSystemService(Context.ACCESSIBILITY_SERVICE);
+      if (am != null) {
+        am.removeAccessibilityStateChangeListener(accessibilityStateChangeListener);
+      }
+      accessibilityStateChangeListener = null;
+    }
+  }
 }

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

@@ -10,7 +10,6 @@ package com.facebook.react.uimanager
 import android.graphics.Rect
 import android.view.View
 import android.view.ViewGroup
-import android.widget.TextView
 import com.facebook.react.R
 import com.facebook.react.bridge.ReadableArray
 
@@ -76,10 +75,6 @@ private object ReactAxOrderHelper {
         }
       }
 
-      if (!isIncluded && !isContained && parent != view && view !is TextView) {
-        view.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
-      }
-
       // Don't traverse the children of a nested accessibility order
       if (view is ViewGroup) {
         val axChildren: ArrayList<View> = getAxChildren(view)
@@ -100,6 +95,13 @@ private object ReactAxOrderHelper {
           }
         }
       }
+
+      if (!isIncluded && !isContained && parent != view) {
+        if (view.getTag(R.id.original_focusability) == null) {
+          view.setTag(R.id.original_focusability, view.isFocusable)
+        }
+        view.isFocusable = false
+      }
     }
 
     traverseAndBuildAxOrder(
@@ -159,4 +161,21 @@ private object ReactAxOrderHelper {
     }
     return axChildren
   }
+
+  @JvmStatic
+  public fun restoreSubtreeFocusability(view: View) {
+    val originalFocusability = view.getTag(R.id.original_focusability)
+    if (originalFocusability is Boolean) {
+      view.isFocusable = originalFocusability
+    }
+
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        val child = view.getChildAt(i)
+        if (child != null) {
+          restoreSubtreeFocusability(child)
+        }
+      }
+    }
+  }
 }

packages/react-native/ReactAndroid/src/main/res/views/uimanager/values/ids.xml

@@ -15,6 +15,9 @@
   <!-- tag is used to store the current state of the accessibility order tree-->
   <item type="id" name="accessibility_order_dirty"/>
 
+  <!-- tag is used to store the original focusability value of a view within the accessibility order tree if it was changed-->
+  <item type="id" name="original_focusability"/>
+
   <!-- tag is used to store the nativeID tag -->
   <item type="id" name="view_tag_instance_handle"/>