Skip to content

Commit

Permalink
Add support for Toggle Button accessibilityRole
Browse files Browse the repository at this point in the history
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
  • Loading branch information
kacieb authored and facebook-github-bot committed May 3, 2021
1 parent ab66741 commit da899c0
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 1 deletion.
1 change: 1 addition & 0 deletions Libraries/Components/View/ViewAccessibility.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
export type AccessibilityRole =
| 'none'
| 'button'
| 'togglebutton'
| 'link'
| 'search'
| 'image'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
DeprecatedAccessibilityRoles: [
'none',
'button',
'togglebutton',
'link',
'search',
'image',
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ @implementation RCTConvert (UIAccessibilityTraits)
(@{
@"none" : @(UIAccessibilityTraitNone),
@"button" : @(UIAccessibilityTraitButton),
@"togglebutton" : @(UIAccessibilityTraitButton),
@"link" : @(UIAccessibilityTraitLink),
@"header" : @(UIAccessibilityTraitHeader),
@"search" : @(UIAccessibilityTraitSearchField),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ private void scheduleAccessibilityEventSender(View host) {
public enum AccessibilityRole {
NONE,
BUTTON,
TOGGLEBUTTON,
LINK,
SEARCH,
IMAGE,
Expand Down Expand Up @@ -112,6 +113,8 @@ public static String getValue(AccessibilityRole role) {
switch (role) {
case BUTTON:
return "android.widget.Button";
case TOGGLEBUTTON:
return "android.widget.ToggleButton";
case SEARCH:
return "android.widget.EditText";
case IMAGE:
Expand Down Expand Up @@ -392,6 +395,10 @@ public static void setRole(
} 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)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit da899c0

Please sign in to comment.