Add accessibilityValue prop on Touchables (#26752)

Summary: AccessibilityValue support was added for view in PR[#26169. This patch is to extend the support for all touchables. ## Changelog [General] [Added] - Add accessibilityValue prop on Touchables Pull Request resolved: #26752 Test Plan: Modify one accessibility value example to use Touchable in AccessibilityExample.js. Differential Revision: D17878614 Pulled By: mdvacca fbshipit-source-id: ef201225f7dfbb2c6054102ab22fa151499656d5
facebook · Oct 11, 2019 · 3042407 · 3042407
1 parent 0a6f4dd
commit 3042407
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 3 deletions.
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
@@ -183,6 +183,7 @@ const TouchableBounce = ((createReactClass({
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
+        accessibilityValue={this.props.accessibilityValue}
         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
@@ -408,6 +408,7 @@ const TouchableHighlight = ((createReactClass({
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={this.props.accessibilityState}
+        accessibilityValue={this.props.accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         style={StyleSheet.compose(

diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
@@ -316,6 +316,7 @@ const TouchableNativeFeedback = createReactClass({
       accessibilityState: this.props.accessibilityState,
       accessibilityActions: this.props.accessibilityActions,
       onAccessibilityAction: this.props.onAccessibilityAction,
+      accessibilityValue: this.props.accessibilityValue,
       children,
       testID: this.props.testID,
       onLayout: this.props.onLayout,

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -313,6 +313,7 @@ const TouchableOpacity = ((createReactClass({
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
+        accessibilityValue={this.props.accessibilityValue}
         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
@@ -34,6 +34,7 @@ import type {
   AccessibilityState,
   AccessibilityActionInfo,
   AccessibilityActionEvent,
+  AccessibilityValue,
 } from '../View/ViewAccessibility';
 
 type TargetEvent = SyntheticEvent<
@@ -55,6 +56,7 @@ const OVERRIDE_PROPS = [
   'accessibilityState',
   'accessibilityActions',
   'onAccessibilityAction',
+  'accessibilityValue',
   'hitSlop',
   'nativeID',
   'onBlur',
@@ -71,6 +73,7 @@ export type Props = $ReadOnly<{|
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityValue?: ?AccessibilityValue,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
@@ -112,6 +115,7 @@ const TouchableWithoutFeedback = ((createReactClass({
     accessibilityState: PropTypes.object,
     accessibilityActions: PropTypes.array,
     onAccessibilityAction: PropTypes.func,
+    accessibilityValue: PropTypes.object,
     /**
      * 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/AccessibilityExample.js b/RNTester/js/examples/Accessibility/AccessibilityExample.js
@@ -564,7 +564,7 @@ class FakeSliderExample extends React.Component {
           }}>
           <Text>Fake Slider</Text>
         </View>
-        <View
+        <TouchableWithoutFeedback
           accessible={true}
           accessibilityLabel="Equalizer"
           accessibilityRole="adjustable"
@@ -588,8 +588,10 @@ class FakeSliderExample extends React.Component {
             }
           }}
           accessibilityValue={{text: this.state.textualValue}}>
-          <Text>Equalizer</Text>
-        </View>
+          <View>
+            <Text>Equalizer</Text>
+          </View>
+        </TouchableWithoutFeedback>
       </View>
     );
   }