Keep focusable={false} Android views out of keyboard navigation

An accessible view keeps isFocusable for accessibility services, so
setFocusable(false) left it in Tab and arrow-key navigation: every
Pressable is accessible, and tabIndex={-1} or focusable={false} on one
changed nothing about where a hardware keyboard moved focus.

ReactViewGroup now records the prop and skips the view in addFocusables
and requestFocus, the two ways keyboard navigation reaches it, while its
descendants, accessibility services and requestFocusFromJS still do.

Author: YevheniiKotyrlo

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

@@ -160,6 +160,12 @@ public open class ReactViewGroup public constructor(context: Context?) :
       null
   private var focusOnAttach = false
 
+  /**
+   * Set from the `focusable` prop. [isFocusable] also carries `accessible`, so a view excluded here
+   * stays focusable for accessibility services while keyboard navigation passes over it.
+   */
+  internal var excludedFromKeyboardFocus = false
+
   internal var nativeBackgroundMap: ReadableMap? = null
   internal var nativeForegroundMap: ReadableMap? = null
 
@@ -201,6 +207,7 @@ public open class ReactViewGroup public constructor(context: Context?) :
     childrenRemovedWhileTransitioning = null
     nativeBackgroundMap = null
     nativeForegroundMap = null
+    excludedFromKeyboardFocus = false
   }
 
   internal open fun recycleView() {
@@ -508,6 +515,23 @@ public open class ReactViewGroup public constructor(context: Context?) :
     updateClippingToRect(clippingRect, excludedViews)
   }
 
+  override fun addFocusables(views: ArrayList<View>, direction: Int, focusableMode: Int) {
+    val firstAddedIndex = views.size
+    super.addFocusables(views, direction, focusableMode)
+    // A focused view stays a candidate so that focus search can move on from it.
+    if (excludedFromKeyboardFocus && !isFocused) {
+      views.subList(firstAddedIndex, views.size).remove(this)
+    }
+  }
+
+  override fun requestFocus(direction: Int, previouslyFocusedRect: Rect?): Boolean {
+    if (!excludedFromKeyboardFocus) {
+      return super.requestFocus(direction, previouslyFocusedRect)
+    }
+    return descendantFocusability != FOCUS_BLOCK_DESCENDANTS &&
+        onRequestFocusInDescendants(direction, previouslyFocusedRect)
+  }
+
   internal fun requestFocusFromJS() {
     if (isAttachedToWindow) {
       super.requestFocus(FOCUS_DOWN, null)

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

@@ -421,6 +421,7 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
 
   @ReactProp(name = "focusable")
   public open fun setFocusable(view: ReactViewGroup, focusable: Boolean) {
+    view.excludedFromKeyboardFocus = !focusable
     if (focusable) {
       view.setOnClickListener {
         val eventDispatcher = UIManagerHelper.getEventDispatcher(view.context as ReactContext)
@@ -436,7 +437,7 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
       view.setOnClickListener(null)
       view.isClickable = false
       // Don't set view.setFocusable(false) because we might still want it to be focusable for
-      // accessibility reasons
+      // accessibility reasons. excludedFromKeyboardFocus keeps it out of keyboard navigation.
     }
   }
 

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

@@ -9,6 +9,7 @@ package com.facebook.react.views.view
 
 import android.app.Activity
 import android.content.Context
+import android.view.FocusFinder
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
@@ -260,6 +261,118 @@ class ReactViewGroupTest {
     assertThat(outer.hasOverlappingRendering()).isTrue()
   }
 
+  @Test
+  fun `focusable false - keeps an accessible view out of keyboard focus search`() {
+    val root = ReactViewGroup(context)
+    val leading = focusableView(top = 0)
+    val excluded = accessibleView(top = 10, focusable = false)
+    val trailing = focusableView(top = 20)
+    root.addView(leading)
+    root.addView(excluded)
+    root.addView(trailing)
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(leading, trailing)
+    // Accessibility services still treat the view as one focusable element.
+    assertThat(excluded.isFocusable).isTrue()
+  }
+
+  @Test
+  fun `focusable false - keeps the descendants of an excluded view in keyboard focus search`() {
+    val root = ReactViewGroup(context)
+    val excluded = accessibleView(top = 0, focusable = false)
+    val descendant = focusableView(top = 0)
+    excluded.addView(descendant)
+    root.addView(excluded)
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(descendant)
+  }
+
+  @Test
+  fun `focusable false - default focus passes over an excluded view`() {
+    val root = ReactViewGroup(context)
+    val excluded = accessibleView(top = 0, focusable = false)
+    val trailing = focusableView(top = 10)
+    root.addView(excluded)
+    root.addView(trailing)
+
+    assertThat(root.requestFocus(View.FOCUS_DOWN)).isTrue()
+
+    assertThat(excluded.isFocused).isFalse()
+    assertThat(trailing.isFocused).isTrue()
+  }
+
+  @Test
+  fun `focusable false - focus requested from JS still reaches an excluded view`() {
+    val root = ReactViewGroup(context)
+    val excluded = accessibleView(top = 0, focusable = false)
+    root.addView(excluded)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+
+    excluded.requestFocusFromJS()
+
+    assertThat(excluded.isFocused).isTrue()
+  }
+
+  @Test
+  fun `focusable false - keyboard focus moves on from an excluded view that holds focus`() {
+    val root = ReactViewGroup(context)
+    val leading = focusableView(top = 0)
+    val excluded = accessibleView(top = 10, focusable = false)
+    val trailing = focusableView(top = 20)
+    root.addView(leading)
+    root.addView(excluded)
+    root.addView(trailing)
+    Robolectric.buildActivity(Activity::class.java).setup().get().setContentView(root)
+    excluded.requestFocusFromJS()
+
+    assertThat(FocusFinder.getInstance().findNextFocus(root, excluded, View.FOCUS_FORWARD))
+        .isSameAs(trailing)
+    assertThat(FocusFinder.getInstance().findNextFocus(root, excluded, View.FOCUS_BACKWARD))
+        .isSameAs(leading)
+  }
+
+  @Test
+  fun `focusable true - returns a view to keyboard focus search`() {
+    val root = ReactViewGroup(context)
+    val view = accessibleView(top = 0, focusable = false)
+    root.addView(view)
+
+    ReactViewManager().setFocusable(view, true)
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(view)
+  }
+
+  @Test
+  fun `focusable false - recycling a view returns it to keyboard focus search`() {
+    val root = ReactViewGroup(context)
+    val view = accessibleView(top = 0, focusable = false)
+
+    view.recycleView()
+    root.addView(view)
+
+    assertThat(collectKeyboardFocusables(root)).containsExactly(view)
+  }
+
+  private fun focusableView(top: Int): View =
+      View(context).apply {
+        isFocusable = true
+        layout(0, top, 100, top + 10)
+      }
+
+  private fun accessibleView(top: Int, focusable: Boolean): ReactViewGroup =
+      ReactViewGroup(context).apply {
+        layout(0, top, 100, top + 10)
+        val manager = ReactViewManager()
+        manager.setAccessible(this, true)
+        manager.setFocusable(this, focusable)
+      }
+
+  private fun collectKeyboardFocusables(root: ViewGroup): List<View> {
+    val focusables = ArrayList<View>()
+    root.addFocusables(focusables, View.FOCUS_FORWARD, View.FOCUSABLES_ALL)
+    return focusables
+  }
+
   // Mirrors the ViewManager mount/unmount hooks: attach/detach the child, then refresh the cache.
   private fun mount(parent: ReactViewGroup, child: View) {
     parent.addView(child)