mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Kacie Bawiec
da899c0cc4
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
88 lines
1.7 KiB
JavaScript
88 lines
1.7 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
|
|
|
|
// This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
|
|
export type AccessibilityRole =
|
|
| 'none'
|
|
| 'button'
|
|
| 'togglebutton'
|
|
| 'link'
|
|
| 'search'
|
|
| 'image'
|
|
| 'keyboardkey'
|
|
| 'text'
|
|
| 'adjustable'
|
|
| 'imagebutton'
|
|
| 'header'
|
|
| 'summary'
|
|
| 'alert'
|
|
| 'checkbox'
|
|
| 'combobox'
|
|
| 'menu'
|
|
| 'menubar'
|
|
| 'menuitem'
|
|
| 'progressbar'
|
|
| 'radio'
|
|
| 'radiogroup'
|
|
| 'scrollbar'
|
|
| 'spinbutton'
|
|
| 'switch'
|
|
| 'tab'
|
|
| 'tablist'
|
|
| 'timer'
|
|
| 'toolbar';
|
|
|
|
// the info associated with an accessibility action
|
|
export type AccessibilityActionInfo = $ReadOnly<{
|
|
name: string,
|
|
label?: string,
|
|
...
|
|
}>;
|
|
|
|
// The info included in the event sent to onAccessibilityAction
|
|
export type AccessibilityActionEvent = SyntheticEvent<
|
|
$ReadOnly<{actionName: string, ...}>,
|
|
>;
|
|
|
|
export type AccessibilityState = {
|
|
disabled?: boolean,
|
|
selected?: boolean,
|
|
checked?: ?boolean | 'mixed',
|
|
busy?: boolean,
|
|
expanded?: boolean,
|
|
...
|
|
};
|
|
|
|
export type AccessibilityValue = $ReadOnly<{|
|
|
/**
|
|
* The minimum value of this component's range. (should be an integer)
|
|
*/
|
|
min?: number,
|
|
|
|
/**
|
|
* The maximum value of this component's range. (should be an integer)
|
|
*/
|
|
max?: number,
|
|
|
|
/**
|
|
* The current value of this component's range. (should be an integer)
|
|
*/
|
|
now?: number,
|
|
|
|
/**
|
|
* A textual description of this component's value. (will override minimum, current, and maximum if set)
|
|
*/
|
|
text?: string,
|
|
|}>;
|