Skip to content

Commit da899c0

Browse files
kaciebfacebook-github-bot
authored andcommitted
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
1 parent ab66741 commit da899c0

File tree

6 files changed

+15
-1
lines changed

6 files changed

+15
-1
lines changed

Libraries/Components/View/ViewAccessibility.js

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
1616
export type AccessibilityRole =
1717
| 'none'
1818
| 'button'
19+
| 'togglebutton'
1920
| 'link'
2021
| 'search'
2122
| 'image'

Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
DeprecatedAccessibilityRoles: [
1616
'none',
1717
'button',
18+
'togglebutton',
1819
'link',
1920
'search',
2021
'image',

React/Views/RCTViewManager.m

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ @implementation RCTConvert (UIAccessibilityTraits)
2626
(@{
2727
@"none" : @(UIAccessibilityTraitNone),
2828
@"button" : @(UIAccessibilityTraitButton),
29+
@"togglebutton" : @(UIAccessibilityTraitButton),
2930
@"link" : @(UIAccessibilityTraitLink),
3031
@"header" : @(UIAccessibilityTraitHeader),
3132
@"search" : @(UIAccessibilityTraitSearchField),

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

+7
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ private void scheduleAccessibilityEventSender(View host) {
8282
public enum AccessibilityRole {
8383
NONE,
8484
BUTTON,
85+
TOGGLEBUTTON,
8586
LINK,
8687
SEARCH,
8788
IMAGE,
@@ -112,6 +113,8 @@ public static String getValue(AccessibilityRole role) {
112113
switch (role) {
113114
case BUTTON:
114115
return "android.widget.Button";
116+
case TOGGLEBUTTON:
117+
return "android.widget.ToggleButton";
115118
case SEARCH:
116119
return "android.widget.EditText";
117120
case IMAGE:
@@ -392,6 +395,10 @@ public static void setRole(
392395
} else if (role.equals(AccessibilityRole.BUTTON)) {
393396
nodeInfo.setRoleDescription(context.getString(R.string.button_description));
394397
nodeInfo.setClickable(true);
398+
} else if (role.equals(AccessibilityRole.TOGGLEBUTTON)) {
399+
nodeInfo.setRoleDescription(context.getString(R.string.toggle_button_description));
400+
nodeInfo.setClickable(true);
401+
nodeInfo.setCheckable(true);
395402
} else if (role.equals(AccessibilityRole.SUMMARY)) {
396403
nodeInfo.setRoleDescription(context.getString(R.string.summary_description));
397404
} else if (role.equals(AccessibilityRole.HEADER)) {

ReactAndroid/src/main/res/views/uimanager/values/strings_unlocalized.xml

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
name="button_description"
1717
translatable="false"
1818
>Button</string>
19+
<string
20+
name="toggle_button_description"
21+
translatable="false"
22+
>Toggle Button</string>
1923
<string
2024
name="imagebutton_description"
2125
translatable="false"

ReactCommon/react/renderer/components/view/accessibilityPropsConversions.h

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ inline void fromString(const std::string &string, AccessibilityTraits &result) {
2121
result = AccessibilityTraits::None;
2222
return;
2323
}
24-
if (string == "button") {
24+
if (string == "button" || string == "togglebutton") {
2525
result = AccessibilityTraits::Button;
2626
return;
2727
}

0 commit comments

Comments
 (0)