mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
committed by
Facebook GitHub Bot
parent
ab66741c8c
commit
da899c0cc4
@@ -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',
|
||||
|
||||
@@ -26,6 +26,7 @@ RCT_MULTI_ENUM_CONVERTER(
|
||||
(@{
|
||||
@"none" : @(UIAccessibilityTraitNone),
|
||||
@"button" : @(UIAccessibilityTraitButton),
|
||||
@"togglebutton" : @(UIAccessibilityTraitButton),
|
||||
@"link" : @(UIAccessibilityTraitLink),
|
||||
@"header" : @(UIAccessibilityTraitHeader),
|
||||
@"search" : @(UIAccessibilityTraitSearchField),
|
||||
|
||||
+7
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user