feat: add accessibilityLabelledBy props (#32470)

Summary:
related: https://github.com/facebook/react-native/issues/30846, https://github.com/facebook/react-native/issues/26739

Added `accessibilityLabelledBy` props to find the nativeID of the associated label, it mainly for` <TextInput> `.

The reason for implementing it as `labelledBy` instead of `labelFor` is as follows.
- It was difficult to find a component with `labelFor` because the　`<Text>` component does not add the `labelFor` received from her Props to the View's tag.
- The use case looks like the HTML `aria-labelledby`, which is intuitive for web developers. It also seems easy to convert to a web platform.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Added] - add `accessibilityLabelledBy` props

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

Test Plan:
I checked it with RNTester using an Android11.

https://user-images.githubusercontent.com/40130327/138666856-891d9f4d-52cf-4181-a81f-13b033037db4.mp4

Reviewed By: lunaleaps, kacieb

Differential Revision: D31897112

Pulled By: ShikaSD

fbshipit-source-id: 66361735679560c01834b3a4483adf264098b3e3

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -137,6 +137,21 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
     ReactFindViewUtil.notifyViewRendered(view);
   }
 
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_LABELLED_BY)
+  public void setAccessibilityLabelledBy(@NonNull T view, @Nullable Dynamic nativeId) {
+    if (nativeId.isNull()) {
+      return;
+    }
+    if (nativeId.getType() == ReadableType.String) {
+      view.setTag(R.id.labelled_by, nativeId.asString());
+    } else if (nativeId.getType() == ReadableType.Array) {
+      // On Android, this takes a single View as labeledBy. If an array is specified, set the first
+      // element in the tag.
+      view.setTag(R.id.labelled_by, nativeId.asArray().getString(0));
+    }
+  }
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_LABEL)
   public void setAccessibilityLabel(@NonNull T view, @Nullable String accessibilityLabel) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java

@@ -10,6 +10,7 @@ package com.facebook.react.uimanager;
 import android.view.View;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 
@@ -64,6 +65,9 @@ public abstract class BaseViewManagerAdapter<T extends View>
   @Override
   public void setNativeId(@NonNull T view, String nativeId) {}
 
+  @Override
+  public void setAccessibilityLabelledBy(@NonNull T view, Dynamic nativeId) {}
+
   @Override
   public void setOpacity(@NonNull T view, float opacity) {}
 

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -35,6 +35,7 @@ import com.facebook.react.bridge.UIManager;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.util.ReactFindViewUtil;
 import java.util.HashMap;
 
 /**
@@ -191,6 +192,8 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
         };
   }
 
+  @Nullable View mAccessibilityLabelledBy;
+
   @Override
   public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
     super.onInitializeAccessibilityNodeInfo(host, info);
@@ -200,6 +203,15 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
       setRole(info, accessibilityRole, host.getContext());
     }
 
+    final Object accessibilityLabelledBy = host.getTag(R.id.labelled_by);
+    if (accessibilityLabelledBy != null) {
+      mAccessibilityLabelledBy =
+          ReactFindViewUtil.findView(host.getRootView(), (String) accessibilityLabelledBy);
+      if (mAccessibilityLabelledBy != null) {
+        info.setLabeledBy(mAccessibilityLabelledBy);
+      }
+    }
+
     // state is changeable.
     final ReadableMap accessibilityState = (ReadableMap) host.getTag(R.id.accessibility_state);
     if (accessibilityState != null) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerDelegate.java

@@ -10,6 +10,7 @@ package com.facebook.react.uimanager;
 import android.view.View;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ColorPropConverter;
+import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.yoga.YogaConstants;
@@ -84,6 +85,9 @@ public abstract class BaseViewManagerDelegate<T extends View, U extends BaseView
       case ViewProps.NATIVE_ID:
         mViewManager.setNativeId(view, (String) value);
         break;
+      case ViewProps.ACCESSIBILITY_LABELLED_BY:
+        mViewManager.setAccessibilityLabelledBy(view, (Dynamic) value);
+        break;
       case ViewProps.OPACITY:
         mViewManager.setOpacity(view, value == null ? 1.0f : ((Double) value).floatValue());
         break;

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerInterface.java

@@ -9,6 +9,7 @@ package com.facebook.react.uimanager;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 
@@ -49,6 +50,8 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setNativeId(T view, @Nullable String nativeId);
 
+  void setAccessibilityLabelledBy(T view, @Nullable Dynamic nativeId);
+
   void setOpacity(T view, float opacity);
 
   void setRenderToHardwareTexture(T view, boolean useHWTexture);

ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/ViewProps.java

@@ -152,6 +152,7 @@ public class ViewProps {
   public static final String ACCESSIBILITY_STATE = "accessibilityState";
   public static final String ACCESSIBILITY_ACTIONS = "accessibilityActions";
   public static final String ACCESSIBILITY_VALUE = "accessibilityValue";
+  public static final String ACCESSIBILITY_LABELLED_BY = "accessibilityLabelledBy";
   public static final String IMPORTANT_FOR_ACCESSIBILITY = "importantForAccessibility";
 
   // DEPRECATED