Deprecate acceptsKeyboardFocus (facebook#963)

* Deprecate `acceptsKeyboardFocus`

* update jest

* Add back deleted prop

* Add a redbox

Libraries/Components/Touchable/TouchableBounce.js

@@ -151,40 +151,29 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        nativeID={this.props.nativeID}
+        testID={this.props.testID}
+        hitSlop={this.props.hitSlop}
+        // [TODO(macOS GH#774)
         acceptsFirstMouse={
           this.props.acceptsFirstMouse !== false && !this.props.disabled
-        } // TODO(macOS GH#774)
+        }
         enableFocusRing={
           (this.props.enableFocusRing === undefined ||
             this.props.enableFocusRing === true) &&
           !this.props.disabled
-        } // TODO(macOS/win GH#774)
-        nativeID={this.props.nativeID}
-        testID={this.props.testID}
-        hitSlop={this.props.hitSlop}
-        // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus
-        // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the
-        // other on the underlying view). Prefer passing acceptsKeyboardFocus if
-        // passed explicitly to preserve original behavior, and trigger view warnings.
-        {...(this.props.acceptsKeyboardFocus !== undefined
-          ? {
-              acceptsKeyboardFocus:
-                this.props.acceptsKeyboardFocus === true &&
-                !this.props.disabled,
-            }
-          : {
-              focusable: this.props.focusable !== false && !this.props.disabled,
-            })}
-        // macOS]
-        tooltip={this.props.tooltip} // TODO(macOS/win GH#774)
-        onMouseEnter={this.props.onMouseEnter} // [TODO(macOS GH#774)
+        }
+        focusable={this.props.focusable !== false && !this.props.disabled}
+        tooltip={this.props.tooltip}
+        onMouseEnter={this.props.onMouseEnter}
         onMouseLeave={this.props.onMouseLeave}
         onDragEnter={this.props.onDragEnter}
         onDragLeave={this.props.onDragLeave}
         onDrop={this.props.onDrop}
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
-        draggedTypes={this.props.draggedTypes} // ]TODO(macOS GH#774)
+        draggedTypes={this.props.draggedTypes}
+        // ]TODO(macOS GH#774)
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
         {this.props.children}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -283,8 +283,8 @@ class TouchableHighlight extends React.Component<Props, State> {
     const {
       onBlur,
       onFocus,
-      onMouseEnter, // [TODO(macOS/win GH#774)
-      onMouseLeave, // ]TODO(macOS/win GH#774)
+      onMouseEnter, // [TODO(macOS GH#774)
+      onMouseLeave, // ]TODO(macOS GH#774)
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
@@ -300,7 +300,7 @@ class TouchableHighlight extends React.Component<Props, State> {
       <View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityHint={this.props.accessibilityHint} // TODO(OSS Candidate ISS#2710739)
+        accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={accessibilityState}
         accessibilityValue={this.props.accessibilityValue}
@@ -310,14 +310,6 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
-        acceptsFirstMouse={
-          this.props.acceptsFirstMouse !== false && !this.props.disabled
-        } // TODO(macOS GH#774)
-        enableFocusRing={
-          (this.props.enableFocusRing === undefined ||
-            this.props.enableFocusRing === true) &&
-          !this.props.disabled
-        } // TODO(macOS/win GH#774)
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraStyles?.underlay,
@@ -330,31 +322,28 @@ class TouchableHighlight extends React.Component<Props, State> {
         nextFocusLeft={this.props.nextFocusLeft}
         nextFocusRight={this.props.nextFocusRight}
         nextFocusUp={this.props.nextFocusUp}
-        // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus
-        // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the
-        // other on the underlying view). Prefer passing acceptsKeyboardFocus if
-        // passed explicitly to preserve original behavior, and trigger view warnings.
-        {...(this.props.acceptsKeyboardFocus !== undefined
-          ? {
-              acceptsKeyboardFocus:
-                this.props.acceptsKeyboardFocus === true &&
-                !this.props.disabled,
-            }
-          : {
-              focusable: this.props.focusable !== false && !this.props.disabled,
-            })}
-        // macOS]
-        tooltip={this.props.tooltip} // TODO(macOS/win GH#774)
-        onMouseEnter={this.props.onMouseEnter} // [TODO(macOS/win GH#774)
+        nativeID={this.props.nativeID}
+        testID={this.props.testID}
+        // [TODO(macOS GH#774)
+        acceptsFirstMouse={
+          this.props.acceptsFirstMouse !== false && !this.props.disabled
+        }
+        enableFocusRing={
+          (this.props.enableFocusRing === undefined ||
+            this.props.enableFocusRing === true) &&
+          !this.props.disabled
+        }
+        focusable={this.props.focusable !== false && !this.props.disabled}
+        tooltip={this.props.tooltip}
+        onMouseEnter={this.props.onMouseEnter}
         onMouseLeave={this.props.onMouseLeave}
         onDragEnter={this.props.onDragEnter}
         onDragLeave={this.props.onDragLeave}
         onDrop={this.props.onDrop}
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
-        draggedTypes={this.props.draggedTypes} // ]TODO(macOS/win GH#774)
-        nativeID={this.props.nativeID}
-        testID={this.props.testID}
+        draggedTypes={this.props.draggedTypes}
+        // ]TODO(macOS/win GH#774)
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
         {React.cloneElement(child, {

Libraries/Components/Touchable/TouchableOpacity.js

@@ -266,14 +266,6 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
-        acceptsFirstMouse={
-          this.props.acceptsFirstMouse !== false && !this.props.disabled
-        } // TODO(macOS GH#774)
-        enableFocusRing={
-          (this.props.enableFocusRing === undefined ||
-            this.props.enableFocusRing === true) &&
-          !this.props.disabled
-        } // TODO(macOS GH#774)
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}
@@ -285,33 +277,26 @@ class TouchableOpacity extends React.Component<Props, State> {
         nextFocusUp={this.props.nextFocusUp}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         hitSlop={this.props.hitSlop}
-        // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus
-        // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the
-        // other on the underlying view). Prefer passing acceptsKeyboardFocus if
-        // passed explicitly to preserve original behavior, and trigger view warnings.
-        {...(this.props.acceptsKeyboardFocus !== undefined
-          ? {
-              acceptsKeyboardFocus:
-                this.props.acceptsKeyboardFocus === true &&
-                !this.props.disabled,
-            }
-          : {
-              focusable: this.props.focusable !== false && !this.props.disabled,
-            })}
-        // macOS]
-        tooltip={this.props.tooltip} // TODO(macOS/win GH#774)
-        onMouseEnter={this.props.onMouseEnter} // [TODO(macOS GH#774)
+        // [TODO(macOS GH#774)
+        acceptsFirstMouse={
+          this.props.acceptsFirstMouse !== false && !this.props.disabled
+        }
+        enableFocusRing={
+          (this.props.enableFocusRing === undefined ||
+            this.props.enableFocusRing === true) &&
+          !this.props.disabled
+        }
+        focusable={this.props.focusable !== false && !this.props.disabled}
+        tooltip={this.props.tooltip}
+        onMouseEnter={this.props.onMouseEnter}
         onMouseLeave={this.props.onMouseLeave}
         onDragEnter={this.props.onDragEnter}
         onDragLeave={this.props.onDragLeave}
         onDrop={this.props.onDrop}
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
-        onKeyDown={this.props.onKeyDown}
-        onKeyUp={this.props.onKeyUp}
-        validKeysDown={this.props.validKeysDown}
-        validKeysUp={this.props.validKeysUp}
-        draggedTypes={this.props.draggedTypes} // ]TODO(macOS GH#774)
+        draggedTypes={this.props.draggedTypes}
+        // ]TODO(macOS/win GH#774)
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
         {this.props.children}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -68,16 +68,17 @@ type Props = $ReadOnly<{|
   onPress?: ?(event: PressEvent) => mixed,
   onPressIn?: ?(event: PressEvent) => mixed,
   onPressOut?: ?(event: PressEvent) => mixed,
-  acceptsFirstMouse?: ?boolean, // [TODO(macOS GH#774)
-  acceptsKeyboardFocus?: ?boolean,
+  // [TODO(macOS GH#774)
+  acceptsFirstMouse?: ?boolean,
   enableFocusRing?: ?boolean,
   tooltip?: ?string,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
   onDragEnter?: (event: MouseEvent) => void,
   onDragLeave?: (event: MouseEvent) => void,
   onDrop?: (event: MouseEvent) => void,
-  draggedTypes?: ?DraggedTypesType, // ]TODO(macOS GH#774)
+  draggedTypes?: ?DraggedTypesType,
+  // ]TODO(macOS GH#774)
   pressRetentionOffset?: ?EdgeInsetsProp,
   rejectResponderTermination?: ?boolean,
   testID?: ?string,
@@ -157,23 +158,12 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
           : this.props.accessibilityState,
       focusable:
         this.props.focusable !== false && this.props.onPress !== undefined,
+      // [TODO(macOS GH#774)
       acceptsFirstMouse:
-        this.props.acceptsFirstMouse !== false && !this.props.disabled, // [TODO(macOS GH#774)
-      // [macOS #656 We need to reconcile between focusable and acceptsKeyboardFocus
-      // (e.g. if one is explicitly disabled, we shouldn't implicitly enable the
-      // other on the underlying view). Prefer passing acceptsKeyboardFocus if
-      // passed explicitly to preserve original behavior, and trigger view warnings.
-      ...(this.props.acceptsKeyboardFocus !== undefined
-        ? {
-            acceptsKeyboardFocus:
-              this.props.acceptsKeyboardFocus === true && !this.props.disabled,
-          }
-        : {
-            focusable: this.props.focusable !== false && !this.props.disabled,
-          }),
-      // macOS]
+        this.props.acceptsFirstMouse !== false && !this.props.disabled,
       enableFocusRing:
-        this.props.enableFocusRing !== false && !this.props.disabled, // ]TODO(macOS GH#774)
+        this.props.enableFocusRing !== false && !this.props.disabled,
+      // ]TODO(macOS GH#774)
     };
     for (const prop of PASSTHROUGH_PROPS) {
       if (this.props[prop] !== undefined) {

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

@@ -5,7 +5,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
   acceptsFirstMouse={true}
   accessible={true}
   enableFocusRing={true}
-  focusable={true}
+  focusable={false}
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -76,7 +76,7 @@ exports[`TouchableWithoutFeedback with disabled state should disable button when
   }
   accessible={true}
   enableFocusRing={true}
-  focusable={true}
+  focusable={false}
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -21,9 +21,6 @@ const UIView = {
   accessibilityState: true,
   accessibilityValue: true,
   accessibilityHint: true,
-  acceptsFirstMouse: true, // TODO(macOS GH#774)
-  acceptsKeyboardFocus: true, // TODO(macOS GH#774)
-  enableFocusRing: true, // TODO(macOS GH#774)
   importantForAccessibility: true,
   nativeID: true,
   testID: true,
@@ -36,7 +33,11 @@ const UIView = {
   onAccessibilityEscape: true,
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
-  onMouseEnter: true, // [TODO(macOS GH#774)
+  style: ReactNativeStyleAttributes,
+  // [TODO(macOS GH#774)
+  acceptsFirstMouse: true,
+  enableFocusRing: true,
+  onMouseEnter: true,
   onMouseLeave: true,
   onDragEnter: true,
   onDragLeave: true,
@@ -45,9 +46,9 @@ const UIView = {
   onKeyUp: true,
   validKeysDown: true,
   validKeysUp: true,
-  draggedTypes: true, // ]TODO(macOS GH#774)
-  nextKeyViewTag: true, // TODO(macOS GH#768)
-  style: ReactNativeStyleAttributes,
+  draggedTypes: true,
+  nextKeyViewTag: true,
+  // ]TODO(macOS GH#774)
 };
 
 const RCTView = {

Libraries/Components/View/ReactNativeViewViewConfigMacOS.js

@@ -36,7 +36,6 @@ const ReactNativeViewViewConfigMacOS = {
   },
   validAttributes: {
     acceptsFirstMouse: true,
-    acceptsKeyboardFocus: true,
     accessibilityTraits: true,
     draggedTypes: true,
     enableFocusRing: true,
@@ -51,7 +50,7 @@ const ReactNativeViewViewConfigMacOS = {
     onKeyUp: true,
     validKeysDown: true,
     validKeysUp: true,
-    nextKeyViewTag: true, // TODO(macOS GH#768)
+    nextKeyViewTag: true,
     onMouseEnter: true,
     onMouseLeave: true,
     tooltip: true,

Libraries/Components/View/View.js

@@ -12,8 +12,8 @@ import type {ViewProps} from './ViewPropTypes';
 
 import ViewNativeComponent from './ViewNativeComponent';
 import TextAncestor from '../../Text/TextAncestor';
-import warnOnce from '../../Utilities/warnOnce'; // [macOS #656]
 import * as React from 'react';
+import invariant from 'invariant'; // TODO(macOS GH#774)
 
 export type Props = ViewProps;
 
@@ -28,15 +28,13 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
-  // [macOS #656 Intercept props to warn about them going away
-  if (props.acceptsKeyboardFocus !== undefined) {
-    warnOnce(
-      'deprecated-acceptsKeyboardFocus',
-      '"acceptsKeyboardFocus" has been deprecated in favor of "focusable" and will be removed in a future version of react-native-macos',
-    );
-  }
-  // macOS]
-
+  // [TODO(macOS GH#774)
+  invariant(
+    // $FlowFixMe Wanting to catch untyped usages
+    props.acceptsKeyboardFocus === undefined,
+    'Support for the "acceptsKeyboardFocus" property has been removed in favor of "focusable"',
+  );
+  // TODO(macOS GH#774)]
   return (
     <TextAncestor.Provider value={false}>
       <ViewNativeComponent {...props} ref={forwardedRef} />

Libraries/Components/View/ViewPropTypes.js

@@ -77,7 +77,7 @@ type DirectEventProps = $ReadOnly<{|
   onPreferredScrollerStyleDidChange?: ?(event: ScrollEvent) => mixed, // TODO(macOS GH#774)
 
   /**
-   * When `acceptsKeyboardFocus` is true, the system will try to invoke this function
+   * When `focusable` is true, the system will try to invoke this function
    * when the user performs accessibility key down gesture.
    */
   onScrollKeyDown?: ?(event: ScrollEvent) => mixed, // TODO(macOS GH#774)
@@ -594,12 +594,6 @@ export type ViewProps = $ReadOnly<{|
    */
   acceptsFirstMouse?: ?boolean, // TODO(macOS GH#774)
 
-  /**
-   * Specifies whether the view participates in the key view loop as user tabs
-   * through different controls.
-   */
-  acceptsKeyboardFocus?: ?boolean, // TODO(macOS GH#774)
-
   /**
    * The react tag of the view that follows the current view in the key view loop.
    */

React/Views/RCTViewManager.m

@@ -385,12 +385,6 @@ - (RCTShadowView *)shadowView
     view.acceptsFirstMouse = json ? [RCTConvert BOOL:json] : defaultView.acceptsFirstMouse;
   }
 }
-RCT_CUSTOM_VIEW_PROPERTY(acceptsKeyboardFocus, BOOL, RCTView)
-{
-  if ([view respondsToSelector:@selector(setFocusable:)]) {
-    view.focusable = json ? [RCTConvert BOOL:json] : defaultView.focusable;
-  }
-}
 RCT_CUSTOM_VIEW_PROPERTY(focusable, BOOL, RCTView)
 {
   if ([view respondsToSelector:@selector(setFocusable:)]) {

packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js

@@ -52,7 +52,7 @@ class KeyEventExample extends React.Component<{}, State> {
         <View>
           {Platform.OS === 'macos' ? (
             <View
-              acceptsKeyboardFocus={true}
+              focusable={true}
               validKeysDown={['g', 'Tab', 'Esc', 'Enter', 'ArrowLeft']}
               onKeyDown={this.onKeyDownEvent}
               validKeysUp={['c', 'd']}