From 44717152cadb18c7aff74e9465fdb70efdb1bf81 Mon Sep 17 00:00:00 2001 From: Dennis Urtubia Date: Wed, 26 May 2021 16:47:53 -0700 Subject: [PATCH] Adds accessiblity actions on core components (#31532) Summary: Android: Adding custom actions (https://github.com/facebook/react-native/issues/30854). Adds accessiblity actions on core components (Button, TextInput, Text, and Picker). ## Changelog [General] [Added] - Adds accessiblity actions on core components Pull Request resolved: https://github.com/facebook/react-native/pull/31532 Test Plan: - `npm test` - Rendering of components on `RNTesterApp` using talkback: - Check if accessibility actions were available; ![image](https://user-images.githubusercontent.com/33161939/118381843-a668c180-b5c5-11eb-9ce4-016a49157dc5.png) - Trigger `activate` action for all components; ![image](https://user-images.githubusercontent.com/33161939/118381736-7bca3900-b5c4-11eb-82fb-32e824e1b38c.png) ## Notes - For `TextInput` an unexpected error is raised: ![image](https://user-images.githubusercontent.com/33161939/118381603-d1054b00-b5c2-11eb-93f2-1d5730ee2d24.png) Reviewed By: kacieb Differential Revision: D28654294 Pulled By: lunaleaps fbshipit-source-id: 80dd3f3c7aa27bbaf16ef12997e8f55952a02eb2 --- Libraries/Components/Button.js | 15 ++++- Libraries/Components/Picker/Picker.js | 26 +++++++ .../Picker/PickerAndroid.android.js | 11 +++ Libraries/Text/TextProps.js | 4 ++ .../Accessibility/AccessibilityExample.js | 67 ++++++++++++++++++- 5 files changed, 121 insertions(+), 2 deletions(-) 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<{}> { - + { + + +