feat: add `accessibilityLabelledBy` props #32470

grgr-dkrk · 2021-10-25T09:03:06Z

Summary

related: #30846, #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

[Android] [Added] - add accessibilityLabelledBy props

Test Plan

I checked it with RNTester using an Android11.

inputtest.mp4

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.
google-java-format found some issues. See https://github.com/google/google-java-format

analysis-bot · 2021-10-25T09:07:23Z

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.
+   * 


no-trailing-spaces: Trailing spaces not allowed.

analysis-bot · 2021-10-25T09:07:23Z

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.
+   * 


prettier/prettier: Delete ·

analysis-bot · 2021-10-25T09:07:23Z

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;


google-java-format suggested changes:

@@ -39,0 +39 @@ +import java.util.HashMap;

analysis-bot · 2021-10-25T09:07:23Z

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

@@ -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) {


google-java-format suggested changes:

@@ -206,12 +206,11 @@ - ReactFindViewUtil.findView( - host.getRootView(), - new ReactFindViewUtil.OnViewFoundListener() { - @Override - public String getNativeId() { - return (String) accessibilityLabelledBy; - } - - @Override - public void onViewFound(View view) { - info.setLabeledBy(view); - } + ReactFindViewUtil.findView( + host.getRootView(), + new ReactFindViewUtil.OnViewFoundListener() { + @Override + public String getNativeId() { + return (String) accessibilityLabelledBy; + } + + @Override + public void onViewFound(View view) { + info.setLabeledBy(view);

analysis-bot · 2021-10-25T09:07:23Z

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

+                public void onViewFound(View view) {
+                  info.setLabeledBy(view);
+                }
+            }


google-java-format suggested changes:

@@ -219 +218 @@ - ); + });

pull-bot · 2021-10-25T09:13:18Z

PR build artifact for 4b82094 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2021-10-25T09:32:22Z

PR build artifact for 8f710ad is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

analysis-bot · 2021-10-25T09:45:31Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: f58c496
Branch: main

pull-bot · 2021-10-25T14:04:34Z

PR build artifact for ea3e774 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

analysis-bot · 2021-10-25T14:27:19Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,290,131	+621
android	hermes	armeabi-v7a	7,854,272	+630
android	hermes	x86	8,657,196	+631
android	hermes	x86_64	8,616,346	+643
android	jsc	arm64-v8a	9,791,325	+93
android	jsc	armeabi-v7a	8,752,275	+113
android	jsc	x86	9,740,249	+97
android	jsc	x86_64	10,341,114	+116

Base commit: f58c496
Branch: main

facebook-github-bot · 2021-10-25T14:31:22Z

@ShikaSD has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

necolas

Also see the Accessibility APIs proposal: react-native-community/discussions-and-proposals#410

necolas · 2021-10-25T17:03:45Z

Libraries/Components/View/ViewPropTypes.js

+   *
+   * @platform android
+   */
+  accessibilityLabelledBy?: ?string,


Technically this should also support an array of ids so multiple elements can label this one

I couldn't come up with a concrete plan (like when it received multiple IDs) to reproduce the consistent behavior of aria-labelledby on Android, but I changed props to be able to specify an array. Thank you very much.

lunaleaps · 2021-10-25T17:45:22Z

@grgr-dkrk Do you have any plans for implementing this on iOS? Additionally, could we add documentation for this in react-native-website for this new functionality? Thanks!

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

analysis-bot · 2021-10-26T14:57:27Z

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

+            <Text nativeID="formLabel2">First Name</Text>
+            <TextInput
+              accessibilityLabel="input test2"
+              accessibilityLabelledBy={["formLabel2", "formLabel3"]}


prettier/prettier: Replace "formLabel2",·"formLabel3" with 'formLabel2',·'formLabel3'

analysis-bot · 2021-10-26T14:57:27Z

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

+            <Text nativeID="formLabel2">First Name</Text>
+            <TextInput
+              accessibilityLabel="input test2"
+              accessibilityLabelledBy={["formLabel2", "formLabel3"]}


quotes: Strings must use singlequote.

analysis-bot · 2021-10-26T14:57:27Z

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

+            <Text nativeID="formLabel2">First Name</Text>
+            <TextInput
+              accessibilityLabel="input test2"
+              accessibilityLabelledBy={["formLabel2", "formLabel3"]}


quotes: Strings must use singlequote.

pull-bot · 2021-10-26T15:09:29Z

PR build artifact for 1282770 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

grgr-dkrk · 2021-10-26T15:25:28Z

@lunaleaps

Do you have any plans for implementing this on iOS?

I didn't plan to implement it on iOS because there is no API equivalent to this props (like accessibilityLiveRegion). If that's the work needed to add this feature, I'll consider an implementation.

Additionally, could we add documentation for this in react-native-website for this new functionality?

If there is no problem, I will work on it. Thank you very much.

facebook-github-bot · 2022-01-11T13:22:16Z

@ShikaSD has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

react-native-bot · 2022-01-11T14:55:05Z

This pull request was successfully merged by @grgr-dkrk in 36037fa.

^{When will my fix make it into a release? | Upcoming Releases}

…mic (#34371) Summary: `accessibilityLabelledBy` accepts String or Array type. - The JavaScript Array type corresponds to java [ReadableArray][3] ([HybridData][4]) - The JavaScript String type corresponds to the java String Use [DynamicFromObject][5] to parse String to Dynamic. https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L222-L228 All credits to [grgr-dkrk][1] (PR #32470). fixes [https://github.com/facebook/react-native/issues/30846][2] ## Changelog [Android] [Fixed] - accessibilityLabelledBy use DynamicFromObject to parse String to Dynamic Pull Request resolved: #34371 Test Plan: <details><summary>testing accessibilityLabelledBy with TextInput</summary> https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4 </details> <details><summary>testing accessibilityLabelledBy with Switch</summary> ![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png) </details> <details><summary>testing paper renderer after the fix</summary> https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4 </details> [1]: https://github.com/grgr-dkrk [2]: #30846 [3]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java#L1 [4]: https://github.com/facebookincubator/fbjni/blob/main/java/com/facebook/jni/HybridData.java [5]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/DynamicFromObject.java#L74 Reviewed By: lunaleaps Differential Revision: D38706360 Pulled By: huntie fbshipit-source-id: e4771552d3fddfad50f4d4cbbf971fe4a718e134

…mic (facebook#34371) Summary: `accessibilityLabelledBy` accepts String or Array type. - The JavaScript Array type corresponds to java [ReadableArray][3] ([HybridData][4]) - The JavaScript String type corresponds to the java String Use [DynamicFromObject][5] to parse String to Dynamic. https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L222-L228 All credits to [grgr-dkrk][1] (PR facebook#32470). fixes [https://github.com/facebook/react-native/issues/30846][2] ## Changelog [Android] [Fixed] - accessibilityLabelledBy use DynamicFromObject to parse String to Dynamic Pull Request resolved: facebook#34371 Test Plan: <details><summary>testing accessibilityLabelledBy with TextInput</summary> https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4 </details> <details><summary>testing accessibilityLabelledBy with Switch</summary> ![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png) </details> <details><summary>testing paper renderer after the fix</summary> https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4 </details> [1]: https://github.com/grgr-dkrk [2]: facebook#30846 [3]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java#L1 [4]: https://github.com/facebookincubator/fbjni/blob/main/java/com/facebook/jni/HybridData.java [5]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/DynamicFromObject.java#L74 Reviewed By: lunaleaps Differential Revision: D38706360 Pulled By: huntie fbshipit-source-id: e4771552d3fddfad50f4d4cbbf971fe4a718e134

feat: add accessibilityLabelledBy

4b82094

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Oct 25, 2021

react-native-bot added Platform: Android Android applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Oct 25, 2021

analysis-bot suggested changes Oct 25, 2021

View reviewed changes

chore: fix lint error

8f710ad

crypt096 approved these changes Oct 25, 2021

View reviewed changes

chore: change findView from async to sync

ea3e774

necolas reviewed Oct 25, 2021

View reviewed changes

grgr-dkrk added 2 commits October 26, 2021 20:24

chore: remove accessibilityLabelledBy props from Text

771ee40

fix: Changed accessibilityLabelledBy to accept array as well

11dc164

analysis-bot suggested changes Oct 26, 2021

View reviewed changes

fix: example for lint

1282770

grgr-dkrk mentioned this pull request Oct 26, 2021

Android: One element labelling another #30846

Closed

grgr-dkrk requested a review from necolas October 29, 2021 12:26

facebook-github-bot closed this in 36037fa Jan 11, 2022

react-native-bot added the Merged This PR has been merged. label Jan 11, 2022

This was referenced Aug 9, 2022

accessibilityLabelledBy use DynamicFromObject to parse String to Dynamic #34371

Closed

adding accessibilityLabelledBy to documentation facebook/react-native-website#3249

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add `accessibilityLabelledBy` props #32470

feat: add `accessibilityLabelledBy` props #32470

grgr-dkrk commented Oct 25, 2021 •

edited

Loading

analysis-bot left a comment

analysis-bot Oct 25, 2021

analysis-bot Oct 25, 2021

analysis-bot Oct 25, 2021

analysis-bot Oct 25, 2021

analysis-bot Oct 25, 2021

pull-bot commented Oct 25, 2021

pull-bot commented Oct 25, 2021

analysis-bot commented Oct 25, 2021 •

edited

Loading

pull-bot commented Oct 25, 2021

analysis-bot commented Oct 25, 2021 •

edited

Loading

facebook-github-bot commented Oct 25, 2021

necolas left a comment

necolas Oct 25, 2021

grgr-dkrk Oct 26, 2021

lunaleaps commented Oct 25, 2021 •

edited

Loading

analysis-bot left a comment

analysis-bot Oct 26, 2021

analysis-bot Oct 26, 2021

analysis-bot Oct 26, 2021

pull-bot commented Oct 26, 2021

grgr-dkrk commented Oct 26, 2021

facebook-github-bot commented Jan 11, 2022

react-native-bot commented Jan 11, 2022

feat: add accessibilityLabelledBy props #32470

feat: add accessibilityLabelledBy props #32470

Conversation

grgr-dkrk commented Oct 25, 2021 • edited Loading

Summary

Changelog

Test Plan

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pull-bot commented Oct 25, 2021

pull-bot commented Oct 25, 2021

analysis-bot commented Oct 25, 2021 • edited Loading

pull-bot commented Oct 25, 2021

analysis-bot commented Oct 25, 2021 • edited Loading

facebook-github-bot commented Oct 25, 2021

necolas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lunaleaps commented Oct 25, 2021 • edited Loading

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pull-bot commented Oct 26, 2021

grgr-dkrk commented Oct 26, 2021

facebook-github-bot commented Jan 11, 2022

react-native-bot commented Jan 11, 2022

feat: add `accessibilityLabelledBy` props #32470

feat: add `accessibilityLabelledBy` props #32470

grgr-dkrk commented Oct 25, 2021 •

edited

Loading

analysis-bot commented Oct 25, 2021 •

edited

Loading

analysis-bot commented Oct 25, 2021 •

edited

Loading

lunaleaps commented Oct 25, 2021 •

edited

Loading