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
This commit is contained in:
grgr-dkrk
2022-01-11 06:51:39 -08:00
committed by Facebook GitHub Bot
parent b4b9c54978
commit 36037fa81b
9 changed files with 67 additions and 0 deletions
@@ -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) {