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: #27293 Test Plan: Tested in RNTester app. Differential Revision: D18650884 Pulled By: yungsters fbshipit-source-id: 2172ac55a8c8803d7d923511f43b2598593ea1d2
facebook · Nov 23, 2019 · 8c0c860 · 8c0c860
1 parent b7ab922
commit 8c0c860
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -51,6 +51,10 @@ const OVERRIDE_PROPS = [
   'accessibilityActions',
   'onAccessibilityAction',
   'accessibilityValue',
+  'importantForAccessibility',
+  'accessibilityLiveRegion',
+  'accessibilityViewIsModal',
+  'accessibilityElementsHidden',
   'hitSlop',
   'nativeID',
   'onBlur',
@@ -68,13 +72,17 @@ 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,
   delayPressOut?: ?number,
   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
@@ -68,7 +68,7 @@ class AccessibilityAndroidExample extends React.Component {
 
         <RNTesterBlock title="Overlapping views and importantForAccessibility property">
           <View style={styles.container}>
-            <View
+            <TouchableWithoutFeedback
               style={{
                 position: 'absolute',
                 left: 10,
@@ -87,7 +87,7 @@ class AccessibilityAndroidExample extends React.Component {
               <View accessible={true}>
                 <Text style={{fontSize: 25}}>Hello</Text>
               </View>
-            </View>
+            </TouchableWithoutFeedback>
             <View
               style={{
                 position: 'absolute',