feat: add accessibilityLabelledBy

grgr-dkrk · grgr-dkrk · commit 4b82094ef023 · 2021-10-25T17:32:50.000+09:00
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -432,6 +432,13 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
 
+  /**
+   * Specifies the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * 
+   * @platform android
+   */
+  accessibilityLabelledBy?: ?string,
+
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
@@ -29,6 +29,7 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabelledBy,
     allowFontScaling,
     ellipsizeMode,
     onLongPress,
@@ -179,6 +180,7 @@ const Text: React.AbstractComponent<
         numberOfLines={numberOfLines}
         selectionColor={selectionColor}
         style={style}
+        accessibilityLabelledBy={accessibilityLabelledBy}
         ref={forwardedRef}
       />
     </TextAncestor.Provider>
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
@@ -199,4 +199,6 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text.html#supperhighlighting
    */
   suppressHighlighting?: ?boolean,
+
+  accessibilityLabelledBy?: ?string,
 |}>;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -137,6 +137,12 @@ public void setNativeId(@NonNull T view, @Nullable String nativeId) {
     ReactFindViewUtil.notifyViewRendered(view);
   }
 
+  @Override
+  @ReactProp(name = ViewProps.ACCESSIBILITY_LABELLED_BY)
+  public void setAccessibilityLabelledBy(@NonNull T view, String nativeId) {
+    view.setTag(R.id.labelled_by, nativeId);
+  }
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_LABEL)
   public void setAccessibilityLabel(@NonNull T view, @Nullable String accessibilityLabel) {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerAdapter.java
@@ -64,6 +64,9 @@ public void setImportantForAccessibility(
   @Override
   public void setNativeId(@NonNull T view, String nativeId) {}
 
+  @Override
+  public void setAccessibilityLabelledBy(@NonNull T view, String nativeId) {}
+
   @Override
   public void setOpacity(@NonNull T view, float opacity) {}
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
@@ -36,6 +36,7 @@
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import java.util.HashMap;
+import com.facebook.react.uimanager.util.ReactFindViewUtil;
 
 /**
  * Utility class that handles the addition of a "role" for accessibility to either a View or
@@ -200,6 +201,24 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo
       setRole(info, accessibilityRole, host.getContext());
     }
 
+    final Object accessibilityLabelledBy = host.getTag(R.id.labelled_by);
+    if (accessibilityLabelledBy != null) {
+        ReactFindViewUtil.findView(
+            host.getRootView(),
+            new ReactFindViewUtil.OnViewFoundListener() {
+                @Override
+                public String getNativeId() {
+                  return (String) accessibilityLabelledBy;
+                }
+
+                @Override
+                public void onViewFound(View view) {
+                  info.setLabeledBy(view);
+                }
+            }
+        );
+    }
+
     // state is changeable.
     final ReadableMap accessibilityState = (ReadableMap) host.getTag(R.id.accessibility_state);
     if (accessibilityState != null) {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerDelegate.java
@@ -84,6 +84,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case ViewProps.NATIVE_ID:
         mViewManager.setNativeId(view, (String) value);
         break;
+      case ViewProps.ACCESSIBILITY_LABELLED_BY:
+        mViewManager.setAccessibilityLabelledBy(view, (String) value);
+        break;
       case ViewProps.OPACITY:
         mViewManager.setOpacity(view, value == null ? 1.0f : ((Double) value).floatValue());
         break;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerInterface.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/BaseViewManagerInterface.java
@@ -49,6 +49,8 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setNativeId(T view, @Nullable String nativeId);
 
+  void setAccessibilityLabelledBy(T view, @Nullable String nativeId);
+
   void setOpacity(T view, float opacity);
 
   void setRenderToHardwareTexture(T view, boolean useHWTexture);
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/ViewProps.java b/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
diff --git a/ReactAndroid/src/main/res/views/uimanager/values/ids.xml b/ReactAndroid/src/main/res/views/uimanager/values/ids.xml
@@ -27,4 +27,7 @@
   <!--tag is used to store accessibilityValue tag -->
   <item type="id" name="accessibility_value"/>
 
+  <!--tag is used to store accessibilityLabelledBy tag -->
+  <item type="id" name="labelled_by"/>
+
 </resources>
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -192,6 +192,24 @@ class AccessibilityExample extends React.Component<{}> {
             <Text>Accessible view with label, hint, role, and state</Text>
           </View>
         </RNTesterBlock>
+
+        <RNTesterBlock title="TextInput with accessibilityLabelledBy attribute">
+          <View>
+            <Text nativeID="formLabel1">Mail Address</Text>
+            <TextInput
+              accessibilityLabel="input test1"
+              accessibilityLabelledBy="formLabel1"
+              style={styles.default}
+            />
+            <Text nativeID="formLabel2">First Name</Text>
+            <TextInput
+              accessibilityLabel="input test2"
+              accessibilityLabelledBy="formLabel2"
+              style={styles.default}
+              value="Foo"
+            />
+          </View>
+        </RNTesterBlock>
       </View>
     );
   }
