Added button with accessibility action example and support for Touchables (react#25582)

Summary:
We added a test to make sure button and accessibility actions would not have unwanted behavior. Additionally we added support for accessibility actions for all touchables. However we discovered that RCTTextView and possibly anything else that does not derive from RCTView does not support accessibility actions and need to be children off a component that does support it for it to not crash in ios. This became noticeable when TouchableWithoutFeedback only worked if text is a child of view on ios.

In a local branch we where able to modify RCTTextView to support accessibility actions and text no longer needed to be a child of view for it to work.

## Changelog

[General] [Added] - Button test with accessibility actions
[General] [Added] - Support for accessibility actions to all Touchables. With TouchableWithoutFeedback being a special case where text must be a child of view. (See AccessibilityExample.js for an example)
Pull Request resolved: react#25582

Test Plan:
Test plan is testing in RNTester making sure the examples work

## Open Question
What would you say is the best practice for adding accessibility action support for all the components that do not extended from RCTView?

Reviewed By: cpojer

Differential Revision: D16192919

Pulled By: osdnk

fbshipit-source-id: 7d4e186ba1f30393f2b4d08a0e227b960f83586c

Author: KevinGVargas

Libraries/Components/Touchable/TouchableBounce.js

@@ -182,6 +182,8 @@ const TouchableBounce = ((createReactClass({
         accessibilityRole={this.props.accessibilityRole}
         accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
+        accessibilityActions={this.props.accessibilityActions}
+        onAccessibilityAction={this.props.onAccessibilityAction}
         nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -409,6 +409,8 @@ const TouchableHighlight = ((createReactClass({
         accessibilityRole={this.props.accessibilityRole}
         accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
+        accessibilityActions={this.props.accessibilityActions}
+        onAccessibilityAction={this.props.onAccessibilityAction}
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraUnderlayStyle,

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -315,6 +315,8 @@ const TouchableNativeFeedback = createReactClass({
       accessibilityRole: this.props.accessibilityRole,
       accessibilityStates: this.props.accessibilityStates,
       accessibilityState: this.props.accessibilityState,
+      accessibilityActions: this.props.accessibilityActions,
+      onAccessibilityAction: this.props.onAccessibilityAction,
       children,
       testID: this.props.testID,
       onLayout: this.props.onLayout,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -312,6 +312,8 @@ const TouchableOpacity = ((createReactClass({
         accessibilityRole={this.props.accessibilityRole}
         accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
+        accessibilityActions={this.props.accessibilityActions}
+        onAccessibilityAction={this.props.onAccessibilityAction}
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -33,6 +33,8 @@ import type {
   AccessibilityRole,
   AccessibilityStates,
   AccessibilityState,
+  AccessibilityActionInfo,
+  AccessibilityActionEvent,
 } from '../View/ViewAccessibility';
 
 type TargetEvent = SyntheticEvent<
@@ -53,6 +55,8 @@ const OVERRIDE_PROPS = [
   'accessibilityRole',
   'accessibilityStates',
   'accessibilityState',
+  'accessibilityActions',
+  'onAccessibilityAction',
   'hitSlop',
   'nativeID',
   'onBlur',
@@ -69,6 +73,7 @@ export type Props = $ReadOnly<{|
   accessibilityRole?: ?AccessibilityRole,
   accessibilityStates?: ?AccessibilityStates,
   accessibilityState?: ?AccessibilityState,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
@@ -84,6 +89,7 @@ export type Props = $ReadOnly<{|
   onPress?: ?(event: PressEvent) => mixed,
   onPressIn?: ?(event: PressEvent) => mixed,
   onPressOut?: ?(event: PressEvent) => mixed,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => void,
   pressRetentionOffset?: ?EdgeInsetsProp,
   rejectResponderTermination?: ?boolean,
   testID?: ?string,
@@ -108,6 +114,8 @@ const TouchableWithoutFeedback = ((createReactClass({
     accessibilityRole: PropTypes.oneOf(DeprecatedAccessibilityRoles),
     accessibilityStates: PropTypes.array,
     accessibilityState: PropTypes.object,
+    accessibilityActions: PropTypes.array,
+    onAccessibilityAction: PropTypes.func,
     /**
      * 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

RNTester/js/examples/Accessibility/AccessibilityExample.js

@@ -16,6 +16,7 @@ const {
   Text,
   View,
   TouchableOpacity,
+  TouchableWithoutFeedback,
   Alert,
   UIManager,
   findNodeHandle,
@@ -478,6 +479,35 @@ class AccessibilityActionsExample extends React.Component {
             <Text>Slider</Text>
           </View>
         </RNTesterBlock>
+
+        <RNTesterBlock title="Button with custom accessibility actions">
+          <TouchableWithoutFeedback
+            accessible={true}
+            accessibilityActions={[
+              {name: 'cut', label: 'cut label'},
+              {name: 'copy', label: 'copy label'},
+              {name: 'paste', label: 'paste label'},
+            ]}
+            onAccessibilityAction={event => {
+              switch (event.nativeEvent.actionName) {
+                case 'cut':
+                  Alert.alert('Alert', 'cut action success');
+                  break;
+                case 'copy':
+                  Alert.alert('Alert', 'copy action success');
+                  break;
+                case 'paste':
+                  Alert.alert('Alert', 'paste action success');
+                  break;
+              }
+            }}
+            onPress={() => Alert.alert('Button has been pressed!')}
+            accessibilityRole="button">
+            <View>
+              <Text>Click me</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </RNTesterBlock>
       </View>
     );
   }