From 81c74cd35f9e40c8ad4663fc932d0dddeaa4bc19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= <info@mateoguzman.net>
Date: Fri, 13 Dec 2024 12:39:31 -0800
Subject: [PATCH] ScrollView: handling `testID` correctly for horizontal scroll
 view (#48254)

Summary:
Fixes https://github.com/facebook/react-native/issues/46180

This PR fixes the `testID` not being set as a `resource-id` in the `HorizontalScrollView`.

Currently the `resource-id` is being set correctly when we use a vertical scroll view (this is done [here](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L156) for reference) but we still miss setting this when we use a horizontal one as the managers for both components are different.

## Changelog:

[ANDROID][FIXED] - Handling `testID` correctly for horizontal scroll view

Pull Request resolved: https://github.com/facebook/react-native/pull/48254

Test Plan:
Render a simple `ScrollView` component with `horizontal` set as `true` and pass a `testID` property as shown:

```tsx
function Playground() {
  return (
    <ScrollView testID="customScrollViewTestId" horizontal>
      <View
        style={{
          marginVertical: 400,
          backgroundColor: 'white',
          padding: 14,
          margin: 50,
          width: 200,
          height: 200,
        }}
      />
    </ScrollView>
  );
}
```

Open Maestro Studio and search for **customScrollViewTestId** in the search bar.

<details>
<summary>Before the fix: The `testID` is not found. (See screenshot)</summary>

![image](https://github.com/user-attachments/assets/9f1c6438-e105-468e-8bf4-4e2238824f9f)
</details>

<details>
<summary>See the same in Appium. (See screenshot)</summary>

<img width="900" alt="image" src="https://github.com/user-attachments/assets/4f1a7858-4549-45b2-bb5f-d0b3485e5d69" />

</details>

 ---

Apply this fix, and search again in Maestro Studio.

<details>
<summary>After the fix: The `testID` is now recognised and can be found in the search bar. (See screenshot)</summary>

![image](https://github.com/user-attachments/assets/371f6d1f-5a41-461b-b276-7c0e702ee1e2)
</details>

<details>
<summary>See the same in Appium. (See screenshot)</summary>

<img width="891" alt="image" src="https://github.com/user-attachments/assets/ef03310c-c1ab-4ef7-b2c5-60c3b8d84c10" />

</details>

Reviewed By: tdn120, mdvacca

Differential Revision: D67201619

Pulled By: javache

fbshipit-source-id: 016faf724a482e0eca6dedfbf94dd9ea56255757
---
 .../ReactAndroid/api/ReactAndroid.api            |  1 +
 .../views/scroll/ReactHorizontalScrollView.java  | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api
index 817f643b86f..ae5fb0dcbc8 100644
--- a/packages/react-native/ReactAndroid/api/ReactAndroid.api
+++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api
@@ -6700,6 +6700,7 @@ public class com/facebook/react/views/scroll/ReactHorizontalScrollView : android
 	public fun onChildViewRemoved (Landroid/view/View;Landroid/view/View;)V
 	protected fun onDetachedFromWindow ()V
 	public fun onDraw (Landroid/graphics/Canvas;)V
+	public fun onInitializeAccessibilityNodeInfo (Landroid/view/accessibility/AccessibilityNodeInfo;)V
 	public fun onInterceptTouchEvent (Landroid/view/MotionEvent;)Z
 	protected fun onLayout (ZIIII)V
 	public fun onLayoutChange (Landroid/view/View;IIIIIIII)V
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
index 8dc00b6bd1f..5692c86c1c2 100644
--- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
+++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
@@ -26,6 +26,7 @@ import android.view.KeyEvent;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.accessibility.AccessibilityNodeInfo;
 import android.widget.HorizontalScrollView;
 import android.widget.OverScroller;
 import androidx.annotation.Nullable;
@@ -33,6 +34,7 @@ import androidx.core.view.ViewCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.infer.annotation.Nullsafe;
+import com.facebook.react.R;
 import com.facebook.react.animated.NativeAnimatedModule;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.common.ReactConstants;
@@ -143,6 +145,20 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
     setClipChildren(false);
   }
 
+  @Override
+  public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) {
+    super.onInitializeAccessibilityNodeInfo(info);
+
+    // Expose the testID prop as the resource-id name of the view. Black-box E2E/UI testing
+    // frameworks, which interact with the UI through the accessibility framework, do not have
+    // access to view tags. This allows developers/testers to avoid polluting the
+    // content-description with test identifiers.
+    final String testId = (String) this.getTag(R.id.react_test_id);
+    if (testId != null) {
+      info.setViewIdResourceName(testId);
+    }
+  }
+
   public boolean getScrollEnabled() {
     return mScrollEnabled;
   }