Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support for Toggle Button accessibilityRole

Browse Source 
Summary:
Changelog:
[General][Added] Add support for "togglebutton" accessibilityRole

# Context
The role for ToggleButton, which is needed on Android to implement toggle buttons correctly, is not currently supported.

# What does this diff do?
Adds support for accessibilityRole `"togglebutton"`.

On Android, this maps to class `"Android.widget.ToggleButton"`.

iOS does not have an equivalent trait for togglebutton, so I set it to be the same as setting `accessibilityRole="button"` for iOS.

# Caveats - checked vs selected
It seems to me like this role currently requires that you set `accessibilityState={{checked: true/false}}`. The behavior is strange when setting `selected` state, I think because on Android ToggleButtons are meant to use `checked` to indicate toggled on/off.

This is tricky because typically on iOS if you have a toggle button, you would use `selected` instead of `checked`, so RN users are likely to mess this up.

Possible solutions:
1. document that you should use `checked` state on Android for toggle buttons (and maybe throw a warning if someone passes in `selected`).
2. have RN ignore it if someone passes in accessibilityState `selected`, if this role is used.
3. Have RN convert passed in `selected` state to `checked` on the Android side.

Reviewed By: nadiia

Differential Revision: D27976046

fbshipit-source-id: 4ce202449cf2371f4bf83c4db2d53120369ee7b0
This commit is contained in:
Kacie Bawiec
2021-05-03 11:48:33 -07:00
committed by Facebook GitHub Bot
parent ab66741c8c
commit da899c0cc4
6 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
+7
View File
@@ -82,6 +82,7 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
public enum AccessibilityRole {
NONE,
BUTTON,
TOGGLEBUTTON,
LINK,
SEARCH,
IMAGE,
@@ -112,6 +113,8 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
switch (role) {
case BUTTON:
return "android.widget.Button";
case TOGGLEBUTTON:
return "android.widget.ToggleButton";
case SEARCH:
return "android.widget.EditText";
case IMAGE:
@@ -392,6 +395,10 @@ public class ReactAccessibilityDelegate extends AccessibilityDelegateCompat {
} else if (role.equals(AccessibilityRole.BUTTON)) {
nodeInfo.setRoleDescription(context.getString(R.string.button_description));
nodeInfo.setClickable(true);
} else if (role.equals(AccessibilityRole.TOGGLEBUTTON)) {
nodeInfo.setRoleDescription(context.getString(R.string.toggle_button_description));
nodeInfo.setClickable(true);
nodeInfo.setCheckable(true);
} else if (role.equals(AccessibilityRole.SUMMARY)) {
nodeInfo.setRoleDescription(context.getString(R.string.summary_description));
} else if (role.equals(AccessibilityRole.HEADER)) {