Add support for Toggle Button accessibilityRole

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:50:02 -07:00
committed by Facebook GitHub Bot
parent ab66741c8c
commit da899c0cc4
6 changed files with 15 additions and 1 deletions
@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
export type AccessibilityRole =
| 'none'
| 'button'
| 'togglebutton'
| 'link'
| 'search'
| 'image'
@@ -15,6 +15,7 @@ module.exports = {
DeprecatedAccessibilityRoles: [
'none',
'button',
'togglebutton',
'link',
'search',
'image',
+1
View File
@@ -26,6 +26,7 @@ RCT_MULTI_ENUM_CONVERTER(
(@{
@"none" : @(UIAccessibilityTraitNone),
@"button" : @(UIAccessibilityTraitButton),
@"togglebutton" : @(UIAccessibilityTraitButton),
@"link" : @(UIAccessibilityTraitLink),
@"header" : @(UIAccessibilityTraitHeader),
@"search" : @(UIAccessibilityTraitSearchField),
@@ -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)) {
@@ -16,6 +16,10 @@
name="button_description"
translatable="false"
>Button</string>
<string
name="toggle_button_description"
translatable="false"
>Toggle Button</string>
<string
name="imagebutton_description"
translatable="false"
@@ -21,7 +21,7 @@ inline void fromString(const std::string &string, AccessibilityTraits &result) {
result = AccessibilityTraits::None;
return;
}
if (string == "button") {
if (string == "button" || string == "togglebutton") {
result = AccessibilityTraits::Button;
return;
}