From 8c0c860e38f57e18296f689e47dfb4a54088c260 Mon Sep 17 00:00:00 2001 From: Sharon Gong Date: Sat, 23 Nov 2019 09:33:22 -0800 Subject: [PATCH] Add missing accessibility props to Touchables (#27293) Summary: The following accessibility properties was added for view but not for Touchables - importantForAccessibility, accessibilityLiveRegion, accessibilityViewIsModal and accessibilityElementsHidden. This PR is to extend the support for all touchables. ## Changelog [General] [Added] - Add missing accessibility props on Touchables Pull Request resolved: https://github.com/facebook/react-native/pull/27293 Test Plan: Tested in RNTester app. Differential Revision: D18650884 Pulled By: yungsters fbshipit-source-id: 2172ac55a8c8803d7d923511f43b2598593ea1d2 --- .../Components/Touchable/TouchableBounce.js | 4 ++ .../Touchable/TouchableHighlight.js | 4 ++ .../TouchableNativeFeedback.android.js | 4 ++ .../Components/Touchable/TouchableOpacity.js | 4 ++ .../Touchable/TouchableWithoutFeedback.js | 57 +++++++++++++++++++ .../AccessibilityAndroidExample.android.js | 4 +- 6 files changed, 75 insertions(+), 2 deletions(-) diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 641b7215ef11b7..2f4a35ffe15b49 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -188,6 +188,10 @@ const TouchableBounceImpl = ((createReactClass({ accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} + importantForAccessibility={this.props.importantForAccessibility} + accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityViewIsModal={this.props.accessibilityViewIsModal} + accessibilityElementsHidden={this.props.accessibilityElementsHidden} nativeID={this.props.nativeID} testID={this.props.testID} hitSlop={this.props.hitSlop} diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 2fcdf3f6088fa1..5a92afe392e47e 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -397,6 +397,10 @@ const TouchableHighlightImpl = ((createReactClass({ accessibilityValue={this.props.accessibilityValue} accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} + importantForAccessibility={this.props.importantForAccessibility} + accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityViewIsModal={this.props.accessibilityViewIsModal} + accessibilityElementsHidden={this.props.accessibilityElementsHidden} style={StyleSheet.compose( this.props.style, this.state.extraUnderlayStyle, diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index e86d89393c15f2..ff54f409934865 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -360,6 +360,10 @@ const TouchableNativeFeedbackImpl = createReactClass({ accessibilityActions: this.props.accessibilityActions, onAccessibilityAction: this.props.onAccessibilityAction, accessibilityValue: this.props.accessibilityValue, + importantForAccessibility: this.props.importantForAccessibility, + accessibilityLiveRegion: this.props.accessibilityLiveRegion, + accessibilityViewIsModal: this.props.accessibilityViewIsModal, + accessibilityElementsHidden: this.props.accessibilityElementsHidden, children, testID: this.props.testID, onLayout: this.props.onLayout, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index a5475fcd42abb4..fc070befea47e3 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -310,6 +310,10 @@ const TouchableOpacityImpl = ((createReactClass({ accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} + importantForAccessibility={this.props.importantForAccessibility} + accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityViewIsModal={this.props.accessibilityViewIsModal} + accessibilityElementsHidden={this.props.accessibilityElementsHidden} style={[this.props.style, {opacity: this.state.anim}]} nativeID={this.props.nativeID} testID={this.props.testID} diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index c033711b77f82e..899833fbb96bfd 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -51,6 +51,10 @@ const OVERRIDE_PROPS = [ 'accessibilityActions', 'onAccessibilityAction', 'accessibilityValue', + 'importantForAccessibility', + 'accessibilityLiveRegion', + 'accessibilityViewIsModal', + 'accessibilityElementsHidden', 'hitSlop', 'nativeID', 'onBlur', @@ -68,6 +72,9 @@ export type Props = $ReadOnly<{| accessibilityState?: ?AccessibilityState, accessibilityValue?: ?AccessibilityValue, accessible?: ?boolean, + accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), + accessibilityViewIsModal?: ?boolean, + accessibilityElementsHidden?: ?boolean, children?: ?React.Node, delayLongPress?: ?number, delayPressIn?: ?number, @@ -75,6 +82,7 @@ export type Props = $ReadOnly<{| disabled?: ?boolean, focusable?: ?boolean, hitSlop?: ?EdgeInsetsProp, + importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), nativeID?: ?string, onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(event: BlurEvent) => mixed, @@ -111,6 +119,55 @@ const TouchableWithoutFeedbackImpl = ((createReactClass({ accessibilityActions: PropTypes.array, onAccessibilityAction: PropTypes.func, accessibilityValue: PropTypes.object, + /** + * Indicates to accessibility services whether the user should be notified + * when this view changes. Works for Android API >= 19 only. + * + * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityliveregion + */ + accessibilityLiveRegion: (PropTypes.oneOf([ + 'none', + 'polite', + 'assertive', + ]): React$PropType$Primitive<'none' | 'polite' | 'assertive'>), + /** + * Controls how view is important for accessibility which is if it + * fires accessibility events and if it is reported to accessibility services + * that query the screen. Works for Android only. + * + * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#importantforaccessibility + */ + importantForAccessibility: (PropTypes.oneOf([ + 'auto', + 'yes', + 'no', + 'no-hide-descendants', + ]): React$PropType$Primitive< + 'auto' | 'yes' | 'no' | 'no-hide-descendants', + >), + /** + * A value indicating whether VoiceOver should ignore the elements + * within views that are siblings of the receiver. + * Default is `false`. + * + * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityviewismodal + */ + accessibilityViewIsModal: PropTypes.bool, + /** + * A value indicating whether the accessibility elements contained within + * this accessibility element are hidden. + * + * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityElementsHidden + */ + accessibilityElementsHidden: PropTypes.bool, /** * When `accessible` is true (which is the default) this may be called when * the OS-specific concept of "focus" occurs. Some platforms may not have diff --git a/RNTester/js/examples/Accessibility/AccessibilityAndroidExample.android.js b/RNTester/js/examples/Accessibility/AccessibilityAndroidExample.android.js index d09389478b9311..e35299d58a8803 100644 --- a/RNTester/js/examples/Accessibility/AccessibilityAndroidExample.android.js +++ b/RNTester/js/examples/Accessibility/AccessibilityAndroidExample.android.js @@ -68,7 +68,7 @@ class AccessibilityAndroidExample extends React.Component { - Hello - +