Keyboard accessibility follow up (#25274)

Summary:
This is a follow up PR to https://github.com/facebook/react-native/issues/24359. There's a good thread in the mentioned PR for more background for why I'm doing this change. Essentially `focusable` makes more sense since it is about whether a view can receive user-initiated focus from a pointer or keyboard.
Pull Request resolved: https://github.com/facebook/react-native/pull/25274

Differential Revision: D15873739

Pulled By: cpojer

fbshipit-source-id: 0f526bb99ecdc68131dfc10200a5d44c2ef75b33

Libraries/Components/Touchable/TouchableBounce.js

@@ -185,8 +185,8 @@ const TouchableBounce = ((createReactClass({
         nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}
-        clickable={
-          this.props.clickable !== false &&
+        focusable={
+          this.props.focusable !== false &&
           this.props.onPress !== undefined &&
           !this.props.disabled
         }

Libraries/Components/Touchable/TouchableHighlight.js

@@ -423,8 +423,8 @@ const TouchableHighlight = ((createReactClass({
         nextFocusLeft={this.props.nextFocusLeft}
         nextFocusRight={this.props.nextFocusRight}
         nextFocusUp={this.props.nextFocusUp}
-        clickable={
-          this.props.clickable !== false && this.props.onPress !== undefined
+        focusable={
+          this.props.focusable !== false && this.props.onPress !== undefined
         }
         onClick={this.touchableHandlePress}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -326,8 +326,8 @@ const TouchableNativeFeedback = createReactClass({
       nextFocusRight: this.props.nextFocusRight,
       nextFocusUp: this.props.nextFocusUp,
       hasTVPreferredFocus: this.props.hasTVPreferredFocus,
-      clickable:
-        this.props.clickable !== false &&
+      focusable:
+        this.props.focusable !== false &&
         this.props.onPress !== undefined &&
         !this.props.disabled,
       onClick: this.touchableHandlePress,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -325,8 +325,8 @@ const TouchableOpacity = ((createReactClass({
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         tvParallaxProperties={this.props.tvParallaxProperties}
         hitSlop={this.props.hitSlop}
-        clickable={
-          this.props.clickable !== false && this.props.onPress !== undefined
+        focusable={
+          this.props.focusable !== false && this.props.onPress !== undefined
         }
         onClick={this.touchableHandlePress}
         onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -262,8 +262,8 @@ const TouchableWithoutFeedback = ((createReactClass({
     return (React: any).cloneElement(child, {
       ...overrides,
       accessible: this.props.accessible !== false,
-      clickable:
-        this.props.clickable !== false && this.props.onPress !== undefined,
+      focusable:
+        this.props.focusable !== false && this.props.onPress !== undefined,
       onClick: this.touchableHandlePress,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
       onResponderTerminationRequest: this

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

@@ -3,7 +3,7 @@
 exports[`TouchableHighlight renders correctly 1`] = `
 <View
   accessible={true}
-  clickable={false}
+  focusable={false}
   isTVSelectable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}

Libraries/Components/View/ViewPropTypes.js

@@ -311,11 +311,11 @@ type AndroidViewProps = $ReadOnly<{|
   nextFocusUp?: ?number,
 
   /**
-   * Whether this `View` should be clickable with a non-touch click, eg. enter key on a hardware keyboard.
+   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
    *
    * @platform android
    */
-  clickable?: boolean,
+  focusable?: boolean,
 
   /**
    * The action to perform when this `View` is clicked on by a non-touch click, eg. enter key on a hardware keyboard.

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

@@ -226,9 +226,9 @@ public class ReactViewManager extends ViewGroupManager<ReactViewGroup> {
     // handled in NativeViewHierarchyOptimizer
   }
 
-  @ReactProp(name = "clickable")
-  public void setClickable(final ReactViewGroup view, boolean clickable) {
-    if (clickable) {
+  @ReactProp(name = "focusable")
+  public void setFocusable(final ReactViewGroup view, boolean focusable) {
+    if (focusable) {
       view.setOnClickListener(
               new View.OnClickListener() {
                 @Override
@@ -245,6 +245,7 @@ public class ReactViewManager extends ViewGroupManager<ReactViewGroup> {
     else {
       view.setOnClickListener(null);
       view.setClickable(false);
+      // Don't set view.setFocusable(false) because we might still want it to be focusable for accessibiliy reasons
     }
   }