Keyboard accessibility follow up (facebook#25274)

Summary: This is a follow up PR to facebook#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: facebook#25274 Differential Revision: D15873739 Pulled By: cpojer fbshipit-source-id: 0f526bb99ecdc68131dfc10200a5d44c2ef75b33
M-i-k-e-l · Mar 10, 2020 · f860a94 · f860a94
1 parent fdf1470
commit f860a94
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 16 deletions.
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/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
         }

diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/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}

diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/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,

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/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}

diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/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

diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/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]}

diff --git a/Libraries/Components/View/ViewPropTypes.js b/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.

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
@@ -226,9 +226,9 @@ public void setCollapsable(ReactViewGroup view, boolean collapsable) {
     // 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 void onClick(View v) {
     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
     }
   }