Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android: One element labelling another #30846

Closed
amarlette opened this issue Feb 3, 2021 · 3 comments · Fixed by facebook/react-native-website#3249
Closed

Android: One element labelling another #30846

amarlette opened this issue Feb 3, 2021 · 3 comments · Fixed by facebook/react-native-website#3249
Labels
Accessibility Team - Evaluated Accessibility Needs: Docs Website PR To encourage the authors to create a website PR for documentation. Platform: Android Android applications. React Native Engineering - Evaluated

Comments

@amarlette
Copy link

amarlette commented Feb 3, 2021 •
edited by kacieb
Loading

Requires API Proposal

This issue requires a new API. An API proposal should be added and discussed before proceeding with implementation. The API proposal can be added in the comments of this issue or linked as a separate issue.

Description

No concept of "labelFor" or "labeledBy" or any way to pass a reference to another element as the accessibilityLabel property of an element. Used most when building complex forms.

React Native version:

v0.63

Expected Behavior

Android has a labelFor property on View, which allows you to pass a reference to the ID of another view, that this view should act as the label for. When Focusing on the other view, it will announce for <other view's label>.

For example, if you have these two Views

<Text labelFor="123">Wifi</Text>
<Checkbox accessibilityLabel="checkbox" id="123" />

And you focus on the checkbox, it would announce "checkbox for Wifi".

Android Details

Any API to add this feature should manipulate the underlying View's labelFor property. It will need a reference of the ID of the element that is being labelled to properly work.
@kacieb
Copy link
Contributor

kacieb commented Mar 3, 2021

There is an existing testID property, I wonder if that could be used for this. I'm not sure though as I'm not sure the underlying implementation.

@blavalla blavalla mentioned this issue Mar 23, 2021
Closed
@blavalla
Copy link
Contributor

See the comment here on one potential approach for implementation:

#26739 (comment)

@amarlette amarlette added Needs: Docs Website PR To encourage the authors to create a website PR for documentation. and removed Needs: Triage 🔍 labels Apr 29, 2021
@grgr-dkrk grgr-dkrk mentioned this issue Oct 25, 2021
Closed
@grgr-dkrk
Copy link
Contributor

@blavalla @amarlette @kacieb
I apologize for not making a proposal here.
I'm working on this with #32470.

facebook-github-bot pushed a commit that referenced this issue Jan 11, 2022
@grgr-dkrk @facebook-github-bot
feat: add accessibilityLabelledBy props (#32470)
36037fa 
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

<!-- 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: #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 was referenced Aug 9, 2022
Closed
Merged
facebook-github-bot pushed a commit that referenced this issue Aug 16, 2022
@fabOnReact @facebook-github-bot
accessibilityLabelledBy use DynamicFromObject to parse String to Dyna…
9f43581 
…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>
<p>

https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4

</p>
</details>

<details><summary>testing accessibilityLabelledBy with Switch</summary>
<p>

![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png)

</p>
</details>

<details><summary>testing paper renderer after the fix</summary>
<p>

https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4

</p>
</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
roryabraham pushed a commit to Expensify/react-native that referenced this issue Aug 17, 2022
@fabOnReact @roryabraham
accessibilityLabelledBy use DynamicFromObject to parse String to Dyna…
2bf01af 
…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>
<p>

https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4

</p>
</details>

<details><summary>testing accessibilityLabelledBy with Switch</summary>
<p>

![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png)

</p>
</details>

<details><summary>testing paper renderer after the fix</summary>
<p>

https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4

</p>
</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
roryabraham pushed a commit to Expensify/react-native that referenced this issue Aug 17, 2022
@fabOnReact @roryabraham
accessibilityLabelledBy use DynamicFromObject to parse String to Dyna…
02569dd 
…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>
<p>

https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4

</p>
</details>

<details><summary>testing accessibilityLabelledBy with Switch</summary>
<p>

![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png)

</p>
</details>

<details><summary>testing paper renderer after the fix</summary>
<p>

https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4

</p>
</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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility Team - Evaluated Accessibility Needs: Docs Website PR To encourage the authors to create a website PR for documentation. Platform: Android Android applications. React Native Engineering - Evaluated
Projects
None yet
Milestone
No milestone
4 participants
@blavalla @amarlette @kacieb @grgr-dkrk