diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index c1f1987f4a5..d598a499f25 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -20,7 +20,11 @@ import TouchableOpacity from './Touchable/TouchableOpacity'; import View from './View/View'; import invariant from 'invariant'; -import type {AccessibilityState} from './View/ViewAccessibility'; +import type { + AccessibilityState, + AccessibilityActionEvent, + AccessibilityActionInfo, +} from './View/ViewAccessibility'; import type {PressEvent} from '../Types/CoreEventTypes'; type ButtonProps = $ReadOnly<{| @@ -137,6 +141,9 @@ type ButtonProps = $ReadOnly<{| /** * Accessibility props. */ + accessible?: ?boolean, + accessibilityActions?: ?$ReadOnlyArray, + onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, accessibilityState?: ?AccessibilityState, |}>; @@ -266,6 +273,9 @@ class Button extends React.Component { nextFocusRight, nextFocusUp, testID, + accessible, + accessibilityActions, + onAccessibilityAction, } = this.props; const buttonStyles = [styles.button]; const textStyles = [styles.text]; @@ -303,6 +313,9 @@ class Button extends React.Component { return ( , + + /** + * When `accessible` is true, the system will try to invoke this function + * when the user performs an accessibility custom action. + * + */ + onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, |}>; /** diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index 3f19114690a..fdf6a420ca5 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -19,6 +19,11 @@ import StyleSheet from '../../StyleSheet/StyleSheet'; import invariant from 'invariant'; import processColor from '../../StyleSheet/processColor'; +import type { + AccessibilityActionEvent, + AccessibilityActionInfo, +} from '../View/ViewAccessibility'; + import type {SyntheticEvent} from '../../Types/CoreEventTypes'; import type {ColorValue, TextStyleProp} from '../../StyleSheet/StyleSheet'; @@ -31,6 +36,9 @@ type PickerItemSelectSyntheticEvent = SyntheticEvent< type PickerItemValue = number | string; type Props = $ReadOnly<{| + accessible?: ?boolean, + accessibilityActions?: ?$ReadOnlyArray, + onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, accessibilityLabel?: ?Stringish, children?: React.Node, style?: ?TextStyleProp, @@ -111,6 +119,9 @@ function PickerAndroid(props: Props): React.Node { ); const rootProps = { + accessible: props.accessible, + accessibilityActions: props.accessibilityActions, + onAccessibilityAction: props.onAccessibilityAction, accessibilityLabel: props.accessibilityLabel, enabled: props.enabled, items, diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index 469f14522e3..b2a39e58df7 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -20,6 +20,8 @@ import type {TextStyleProp} from '../StyleSheet/StyleSheet'; import type { AccessibilityRole, AccessibilityState, + AccessibilityActionInfo, + AccessibilityActionEvent, } from '../Components/View/ViewAccessibility'; export type PressRetentionOffset = $ReadOnly<{| @@ -39,6 +41,8 @@ export type TextProps = $ReadOnly<{| * See https://reactnative.dev/docs/text.html#accessible */ accessible?: ?boolean, + accessibilityActions?: ?$ReadOnlyArray, + onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, accessibilityHint?: ?Stringish, accessibilityLabel?: ?Stringish, accessibilityRole?: ?AccessibilityRole, diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index d4689a75454..40613c0c80b 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -23,6 +23,7 @@ const { Alert, StyleSheet, Slider, + Picker, Platform, } = require('react-native'); import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; @@ -664,7 +665,7 @@ class AccessibilityActionsExample extends React.Component<{}> { - + { + + +