feat(a11y): Physical Keyboard Navigation

android/app/src/main/java/chat/rocket/reactnative/MainActivity.kt

@@ -1,24 +1,26 @@
 package chat.rocket.reactnative
-
+
+import android.os.Bundle
+import android.content.Intent
+import android.view.KeyEvent
+import android.view.View
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-import android.os.Bundle
 import com.zoontek.rnbootsplash.RNBootSplash
-import android.content.Intent
-import android.content.res.Configuration
 import chat.rocket.reactnative.notification.NotificationIntentHandler
-
+import chat.rocket.reactnative.a11y.KeyboardA11yModule
+import chat.rocket.reactnative.scroll.FocusUtils
+
 class MainActivity : ReactActivity() {
- 
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
   override fun getMainComponentName(): String = "RocketChatRN"
- 
+
   /**
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
@@ -29,20 +31,57 @@ class MainActivity : ReactActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     RNBootSplash.init(this, R.style.BootTheme)
     super.onCreate(null)
-    
+
     // Handle notification intents
     intent?.let { NotificationIntentHandler.handleIntent(this, it) }
   }
-  
+
   public override fun onNewIntent(intent: Intent) {
     super.onNewIntent(intent)
     setIntent(intent)
-    
+
     // Handle notification intents when activity is already running
     NotificationIntentHandler.handleIntent(this, intent)
   }
 
+  override fun dispatchKeyEvent(event: KeyEvent): Boolean {
+    if (KeyboardA11yModule.isEnabled()) {
+      val current: View? = currentFocus
+      if (current != null && FocusUtils.hasInvertedParent(current)) {
+        if (event.action == KeyEvent.ACTION_DOWN) {
+          val keyCode = event.keyCode
+          val isShiftPressed = event.isShiftPressed
+          val mapped = when (keyCode) {
+            // Invert DPAD vertical arrows for inverted lists
+            KeyEvent.KEYCODE_DPAD_DOWN -> KeyEvent.KEYCODE_DPAD_UP
+            KeyEvent.KEYCODE_DPAD_UP -> KeyEvent.KEYCODE_DPAD_DOWN
+            // Map Tab / Shift+Tab to vertical navigation as well
+            KeyEvent.KEYCODE_TAB ->
+              if (isShiftPressed) KeyEvent.KEYCODE_DPAD_UP else KeyEvent.KEYCODE_DPAD_DOWN
+            else -> keyCode
+          }
+          if (mapped != keyCode) {
+            val invertedEvent = KeyEvent(
+              event.downTime,
+              event.eventTime,
+              event.action,
+              mapped,
+              event.repeatCount,
+              event.metaState,
+              event.deviceId,
+              event.scanCode,
+              event.flags,
+              event.source
+            )
+            return super.dispatchKeyEvent(invertedEvent)
+          }
+        }
+      }
+    }
+    return super.dispatchKeyEvent(event)
+  }
+
   override fun invokeDefaultOnBackPressed() {
     moveTaskToBack(true)
   }
-}
+}

android/app/src/main/java/chat/rocket/reactnative/a11y/KeyboardA11yModule.java

@@ -0,0 +1,50 @@
+package chat.rocket.reactnative.a11y;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.module.annotations.ReactModule;
+
+@ReactModule(name = KeyboardA11ySpec.NAME)
+public class KeyboardA11yModule extends KeyboardA11ySpec {
+
+  private static volatile boolean sEnabled = false;
+  @Nullable
+  private static volatile String sScope = null;
+
+  public KeyboardA11yModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  public static boolean isEnabled() {
+    return sEnabled;
+  }
+
+  @Nullable
+  public static String getScope() {
+    return sScope;
+  }
+
+  @Override
+  public void enable(String scope) {
+    sEnabled = true;
+    sScope = scope;
+  }
+
+  @Override
+  public void disable() {
+    sEnabled = false;
+    sScope = null;
+  }
+
+  @Override
+  public void getState(Promise promise) {
+    WritableMap state = com.facebook.react.bridge.Arguments.createMap();
+    state.putBoolean("enabled", sEnabled);
+    state.putString("scope", sScope);
+    promise.resolve(state);
+  }
+}
+

android/app/src/main/java/chat/rocket/reactnative/a11y/KeyboardA11ySpec.java

@@ -0,0 +1,31 @@
+package chat.rocket.reactnative.a11y;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.turbomodule.core.interfaces.TurboModule;
+
+public abstract class KeyboardA11ySpec extends ReactContextBaseJavaModule implements TurboModule {
+
+  public static final String NAME = "KeyboardA11y";
+
+  public KeyboardA11ySpec(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @ReactMethod
+  public abstract void enable(String scope);
+
+  @ReactMethod
+  public abstract void disable();
+
+  @ReactMethod
+  public abstract void getState(Promise promise);
+}
+

android/app/src/main/java/chat/rocket/reactnative/scroll/FocusUtils.java

@@ -0,0 +1,30 @@
+package chat.rocket.reactnative.scroll;
+
+import android.view.View;
+import android.view.ViewParent;
+import chat.rocket.reactnative.R;
+
+/**
+ * Utilities for focus-related queries inside custom scroll views.
+ */
+public final class FocusUtils {
+
+  private FocusUtils() {}
+
+  public static boolean hasInvertedParent(View view) {
+    if (view == null) {
+      return false;
+    }
+    ViewParent parent = view.getParent();
+    while (parent instanceof View) {
+      View parentView = (View) parent;
+      Object tag = parentView.getTag(R.id.tag_inverted_list);
+      if (tag instanceof Boolean && (Boolean) tag) {
+        return true;
+      }
+      parent = parentView.getParent();
+    }
+    return false;
+  }
+}
+

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java

@@ -1,23 +1,79 @@
 package chat.rocket.reactnative.scroll;
 
+import android.graphics.Rect;
 import android.view.View;
 import com.facebook.react.views.view.ReactViewGroup;
 import java.util.ArrayList;
 import java.util.Collections;
+import chat.rocket.reactnative.R;
 
 /**
  * Content view for inverted FlatLists. Reports its children to accessibility in reversed order so
  * TalkBack traversal matches the visual order (newest-first) when used inside InvertedScrollView.
  */
 public class InvertedScrollContentView extends ReactViewGroup {
 
+  private boolean mIsInvertedContent = false;
+
   public InvertedScrollContentView(android.content.Context context) {
     super(context);
   }
 
+  public void setIsInvertedContent(boolean isInverted) {
+    mIsInvertedContent = isInverted;
+    if (isInverted) {
+      setTag(R.id.tag_inverted_list, true);
+    } else {
+      setTag(R.id.tag_inverted_list, null);
+    }
+  }
+
   @Override
   public void addChildrenForAccessibility(ArrayList<View> outChildren) {
     super.addChildrenForAccessibility(outChildren);
-    Collections.reverse(outChildren);
+    if (mIsInvertedContent) {
+      Collections.reverse(outChildren);
+    }
+  }
+
+  @Override
+  protected boolean onRequestFocusInDescendants(int direction, Rect previouslyFocusedRect) {
+    if (mIsInvertedContent) {
+      for (int i = getChildCount() - 1; i >= 0; i--) {
+        View child = getChildAt(i);
+        if (child.getVisibility() == VISIBLE) {
+          if (child.requestFocus(direction, previouslyFocusedRect)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    return super.onRequestFocusInDescendants(direction, previouslyFocusedRect);
+  }
+
+  @Override
+  public void addFocusables(ArrayList<View> views, int direction, int focusableMode) {
+    super.addFocusables(views, direction, focusableMode);
+    if (mIsInvertedContent) {
+      // Find indices of focusables that are children of this view
+      ArrayList<Integer> childIndices = new ArrayList<>();
+      for (int i = 0; i < views.size(); i++) {
+        View v = views.get(i);
+        if (v.getParent() == this) {
+          childIndices.add(i);
+        }
+      }
+      // Reverse only the sublist of children focusables
+      int n = childIndices.size();
+      for (int i = 0; i < n / 2; i++) {
+        int idx1 = childIndices.get(i);
+        int idx2 = childIndices.get(n - 1 - i);
+        View temp = views.get(idx1);
+        views.set(idx1, views.get(idx2));
+        views.set(idx2, temp);
+      }
+    }
   }
 }
+

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java

@@ -2,6 +2,7 @@
 
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.view.ReactViewManager;
 
 /**
@@ -22,4 +23,9 @@ public String getName() {
   public InvertedScrollContentView createViewInstance(ThemedReactContext context) {
     return new InvertedScrollContentView(context);
   }
+
+  @ReactProp(name = "isInvertedContent")
+  public void setIsInvertedContent(InvertedScrollContentView view, boolean isInverted) {
+    view.setIsInvertedContent(isInverted);
+  }
 }