Keep hidden Android view subtrees out of keyboard navigation

A View with importantForAccessibility="no-hide-descendants", which is
what aria-hidden becomes, hid its descendants from TalkBack while Tab,
the arrow keys and a D-pad still landed on them. ReactViewGroup now
leaves those descendants out of the focus search and out of focus that
enters through the view, and keyboard focus sitting on one moves off
when the view hides it. A tap or a focus() call still focuses them,
and the view's own descendantFocusability is untouched. The shadow
tree search a scroll view falls back to when focus leaves it skips
those descendants too, so Tab past a scroll view's last control no
longer picks a hidden one and stops there.

Author: YevheniiKotyrlo

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.kt

@@ -508,6 +508,35 @@ public open class ReactViewGroup public constructor(context: Context?) :
     updateClippingToRect(clippingRect, excludedViews)
   }
 
+  /**
+   * A view that hides its descendants from accessibility services keeps them out of keyboard and
+   * D-pad navigation too, so a hardware keyboard never lands on content a screen reader cannot
+   * reach. A tap or a `focus()` call still reaches them.
+   */
+  private var hidesDescendantsFromNavigation = false
+
+  override fun setImportantForAccessibility(mode: Int) {
+    super.setImportantForAccessibility(mode)
+    hidesDescendantsFromNavigation = mode == IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+    // Keyboard focus leaves content that is now hidden; touch focus stays where the user types.
+    if (hidesDescendantsFromNavigation && !isInTouchMode) {
+      findFocus()?.takeIf { it !== this }?.clearFocus()
+    }
+  }
+
+  override fun addFocusables(views: ArrayList<View>, direction: Int, focusableMode: Int) {
+    val firstAddedIndex = views.size
+    super.addFocusables(views, direction, focusableMode)
+    if (hidesDescendantsFromNavigation) {
+      // A focused descendant stays a candidate so that focus search can move on from it.
+      views.subList(firstAddedIndex, views.size).removeAll { it !== this && !it.isFocused }
+    }
+  }
+
+  override fun onRequestFocusInDescendants(direction: Int, previouslyFocusedRect: Rect?): Boolean =
+      !hidesDescendantsFromNavigation &&
+          super.onRequestFocusInDescendants(direction, previouslyFocusedRect)
+
   internal fun requestFocusFromJS() {
     if (isAttachedToWindow) {
       super.requestFocus(FOCUS_DOWN, null)

packages/react-native/ReactAndroid/src/main/jni/react/fabric/FocusOrderingHelper.cpp

@@ -227,6 +227,14 @@ void FocusOrderingHelper::traverseAndUpdateNextFocusableElement(
     }
   }
 
+  // A view that hides its descendants from accessibility services keeps them
+  // out of keyboard navigation, as ReactViewGroup does for the views it hosts.
+  if (props != nullptr &&
+      props->importantForAccessibility ==
+          ImportantForAccessibility::NoHideDescendants) {
+    return;
+  }
+
   for (auto& child : currNode->getChildren()) {
     if (child->getTraits().check(ShadowNodeTraits::Trait::RootNodeKind)) {
       continue;

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/view/ReactViewGroupTest.kt

@@ -22,6 +22,7 @@ import org.junit.Test
 import org.junit.runner.RunWith
 import org.robolectric.Robolectric
 import org.robolectric.RobolectricTestRunner
+import org.robolectric.util.ReflectionHelpers
 
 @RunWith(RobolectricTestRunner::class)
 class ReactViewGroupTest {
@@ -260,6 +261,131 @@ class ReactViewGroupTest {
     assertThat(outer.hasOverlappingRendering()).isTrue()
   }
 
+  @Test
+  fun `hidden descendants - leave keyboard focus search`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val hiddenControl = focusableView(top = 0)
+    val shown = focusableView(top = 20)
+    hidden.addView(hiddenControl)
+    root.addView(hidden)
+    root.addView(shown)
+
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(shown)
+  }
+
+  @Test
+  fun `hidden descendants - return to keyboard focus search once shown again`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val hiddenControl = focusableView(top = 0)
+    val shown = focusableView(top = 20)
+    hidden.addView(hiddenControl)
+    root.addView(hidden)
+    root.addView(shown)
+    val manager = ReactViewManager()
+    manager.setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    manager.setImportantForAccessibility(hidden, null)
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(hiddenControl, shown)
+  }
+
+  @Test
+  fun `hidden descendants - default focus passes over them`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val hiddenControl = focusableView(top = 0)
+    val shown = focusableView(top = 20)
+    hidden.addView(hiddenControl)
+    root.addView(hidden)
+    root.addView(shown)
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(root.requestFocus(View.FOCUS_DOWN)).isTrue()
+
+    assertThat(hiddenControl.isFocused).isFalse()
+    assertThat(shown.isFocused).isTrue()
+  }
+
+  @Test
+  fun `hidden descendants - a descendant keyboard focus sits on gives it up as they hide`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val hiddenControl = focusableView(top = 0)
+    hidden.addView(hiddenControl)
+    root.addView(hidden)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+    assertThat(hiddenControl.requestFocus()).isTrue()
+
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(hiddenControl.isFocused).isFalse()
+  }
+
+  @Test
+  fun `hidden descendants - still take focus directly, as a tap or a focus() call gives it`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val hiddenControl = focusableView(top = 0)
+    hidden.addView(hiddenControl)
+    root.addView(hidden)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(hiddenControl.requestFocus()).isTrue()
+  }
+
+  @Test
+  fun `hidden descendants - a descendant focused by touch keeps its focus as they hide`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val field = focusableView(top = 0).apply { isFocusableInTouchMode = true }
+    hidden.addView(field)
+    root.addView(hidden)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+    enterTouchMode(root)
+    assertThat(field.requestFocus()).isTrue()
+
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(field.isFocused).isTrue()
+  }
+
+  @Test
+  fun `hidden descendants - keyboard navigation moves on from one that keeps its focus`() {
+    val root = ReactViewGroup(context)
+    val hidden = containerView(top = 0)
+    val field = focusableView(top = 0).apply { isFocusableInTouchMode = true }
+    val otherHiddenControl = focusableView(top = 0)
+    val shown = focusableView(top = 20)
+    hidden.addView(field)
+    hidden.addView(otherHiddenControl)
+    root.addView(hidden)
+    root.addView(shown)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+    enterTouchMode(root)
+    assertThat(field.requestFocus()).isTrue()
+
+    ReactViewManager().setImportantForAccessibility(hidden, "no-hide-descendants")
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(field, shown)
+  }
+
+  @Test
+  fun `hidden descendants - leave the view's own descendant focusability as it was`() {
+    val hidden =
+        containerView(top = 0).apply { descendantFocusability = ViewGroup.FOCUS_AFTER_DESCENDANTS }
+    val manager = ReactViewManager()
+
+    manager.setImportantForAccessibility(hidden, "no-hide-descendants")
+    manager.setImportantForAccessibility(hidden, null)
+
+    assertThat(hidden.descendantFocusability).isEqualTo(ViewGroup.FOCUS_AFTER_DESCENDANTS)
+  }
+
   // Mirrors the ViewManager mount/unmount hooks: attach/detach the child, then refresh the cache.
   private fun mount(parent: ReactViewGroup, child: View) {
     parent.addView(child)
@@ -280,6 +406,27 @@ class ReactViewGroupTest {
   }
 
   private fun elevatedChild(): View = View(context).apply { elevation = 10f }
+
+  private fun containerView(top: Int): ReactViewGroup =
+      ReactViewGroup(context).apply { layout(0, top, 100, top + 10) }
+
+  private fun focusableView(top: Int): View =
+      View(context).apply {
+        isFocusable = true
+        layout(0, top, 100, top + 10)
+      }
+
+  private fun collectKeyboardFocusables(root: ViewGroup): List<View> {
+    val focusables = ArrayList<View>()
+    root.addFocusables(focusables, View.FOCUS_FORWARD, View.FOCUSABLES_ALL)
+    return focusables
+  }
+
+  // A touch puts the window in touch mode; Robolectric's windows start out of it.
+  private fun enterTouchMode(attached: View) {
+    val attachInfo = ReflectionHelpers.getField<Any>(attached, "mAttachInfo")
+    ReflectionHelpers.setField(attachInfo, "mInTouchMode", true)
+  }
 }
 
 class TestView(context: Context, yPos: Int) : View(context) {