[RN][Accessibility] Expose accessibilityTraits and accessibilityComponentType props to Touchable* component

Libraries/Components/Touchable/TouchableHighlight.js

@@ -209,6 +209,8 @@ var TouchableHighlight = React.createClass({
     return (
       <View
         accessible={true}
+        accessibilityComponentType={this.props.accessibilityComponentType}
+        accessibilityTraits={this.props.accessibilityTraits}
         ref={UNDERLAY_REF}
         style={this.state.underlayStyle}
         onLayout={this.props.onLayout}

Libraries/Components/Touchable/TouchableOpacity.js

@@ -153,6 +153,8 @@ var TouchableOpacity = React.createClass({
     return (
       <Animated.View
         accessible={true}
+        accessibilityComponentType={this.props.accessibilityComponentType}
+        accessibilityTraits={this.props.accessibilityTraits}
         style={[this.props.style, {opacity: this.state.anim}]}
         testID={this.props.testID}
         onLayout={this.props.onLayout}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -14,6 +14,7 @@
 var React = require('React');
 var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
+var View = require('View');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var onlyChild = require('onlyChild');
 
@@ -36,11 +37,16 @@ var TouchableWithoutFeedback = React.createClass({
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
+    accessible: React.PropTypes.bool,
+    accessibilityComponentType: React.PropTypes.oneOf(View.AccessibilityComponentType),
+    accessibilityTraits: React.PropTypes.oneOfType([
+      React.PropTypes.oneOf(View.AccessibilityTraits),
+      React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
+    ]),
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).
      */
-    accessible: React.PropTypes.bool,
     onPress: React.PropTypes.func,
     onPressIn: React.PropTypes.func,
     onPressOut: React.PropTypes.func,
@@ -120,6 +126,8 @@ var TouchableWithoutFeedback = React.createClass({
     // Note(avik): remove dynamic typecast once Flow has been upgraded
     return (React: any).cloneElement(onlyChild(this.props.children), {
       accessible: this.props.accessible !== false,
+      accessibilityComponentType: this.props.accessibilityComponentType,
+      accessibilityTraits: this.props.accessibilityTraits,
       testID: this.props.testID,
       onLayout: this.props.onLayout,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,

Libraries/Components/View/View.js

@@ -44,6 +44,13 @@ var AccessibilityTraits = [
   'pageTurn',
 ];
 
+var AccessibilityComponentType = [
+  'none',
+  'button',
+  'radiobutton_checked',
+  'radiobutton_unchecked',
+];
+
 /**
  * The most fundamental component for building UI, `View` is a
  * container that supports layout with flexbox, style, some touch handling, and
@@ -76,6 +83,11 @@ var View = React.createClass({
     validAttributes: ReactNativeViewAttributes.RCTView
   },
 
+  statics: {
+    AccessibilityTraits,
+    AccessibilityComponentType,
+  },
+
   propTypes: {
     /**
      * When true, indicates that the view is an accessibility element. By default,
@@ -95,12 +107,7 @@ var View = React.createClass({
      * native one. Works for Android only.
      * @platform android
      */
-    accessibilityComponentType: PropTypes.oneOf([
-      'none',
-      'button',
-      'radiobutton_checked',
-      'radiobutton_unchecked',
-    ]),
+    accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentType),
 
     /**
      * Indicates to accessibility services whether the user should be notified