Pressable/Touchable: Make disabled controls non-focusable and enabled…

… controls focusable (facebook#844) * Update yarn.lock * Update Podfile.lock * Delete test code that has been moved to FocusRingExample.js * Don't focus disabled Pressables * Don't focus disabled Touchables ... also, don't make non-focusable just because onPress is undefined. * Update Podfile.lock * Update TouchableHighlight-test.js.snap
acoates-ms · Oct 4, 2021 · c1e4375 · c1e4375
1 parent 0fb16c6
commit c1e4375
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 91 deletions.
diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
@@ -194,9 +194,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     acceptsFirstMouse: acceptsFirstMouse !== false && !disabled, // [TODO(macOS GH#774)
-    enableFocusRing: enableFocusRing !== false && !disabled, // ]TODO(macOS GH#774)
+    enableFocusRing: enableFocusRing !== false && !disabled,
     accessible: accessible !== false,
-    focusable: focusable !== false,
+    focusable: focusable !== false && !disabled, // ]TODO(macOS GH#774)
     hitSlop,
   };
 

diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
@@ -175,10 +175,7 @@ class TouchableBounce extends React.Component<Props, State> {
                 !this.props.disabled,
             }
           : {
-              focusable:
-                this.props.focusable !== false &&
-                this.props.onPress !== undefined &&
-                !this.props.disabled,
+              focusable: this.props.focusable !== false && !this.props.disabled,
             })}
         // macOS]
         tooltip={this.props.tooltip} // TODO(macOS/win GH#774)

diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -332,9 +332,7 @@ class TouchableHighlight extends React.Component<Props, State> {
                 !this.props.disabled,
             }
           : {
-              focusable:
-                this.props.focusable !== false &&
-                this.props.onPress !== undefined,
+              focusable: this.props.focusable !== false && !this.props.disabled,
             })}
         // macOS]
         tooltip={this.props.tooltip} // TODO(macOS/win GH#774)

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -286,9 +286,7 @@ class TouchableOpacity extends React.Component<Props, State> {
                 !this.props.disabled,
             }
           : {
-              focusable:
-                this.props.focusable !== false &&
-                this.props.onPress !== undefined,
+              focusable: this.props.focusable !== false && !this.props.disabled,
             })}
         // macOS]
         tooltip={this.props.tooltip} // TODO(macOS/win GH#774)

diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -166,9 +166,7 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
               this.props.acceptsKeyboardFocus === true && !this.props.disabled,
           }
         : {
-            focusable:
-              this.props.focusable !== false &&
-              this.props.onPress !== undefined,
+            focusable: this.props.focusable !== false && !this.props.disabled,
           }),
       // macOS]
       enableFocusRing:

diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
@@ -5,7 +5,7 @@ exports[`TouchableHighlight renders correctly 1`] = `
   acceptsFirstMouse={true}
   accessible={true}
   enableFocusRing={true}
-  focusable={false}
+  focusable={true}
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}

diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock
@@ -510,45 +510,45 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   DoubleConversion: 0ea4559a49682230337df966e735d6cc7760108e
-  FBLazyVector: 666596dc7c29ee7b2d1a48f535acb7cbb061ea90
-  FBReactNativeSpec: 0e9685ad5e72311405176c684617ef5d0dc8292e
+  FBLazyVector: fe4371120043d3d22ac0aa017b225bb36e917c30
+  FBReactNativeSpec: 80f67740dce38fdda0ac91dd7443fd46aa1434b0
   Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
   FlipperKit: ab353d41aea8aae2ea6daaf813e67496642f3d7d
-  glog: b0ffa5c7cbb8a2c455ee70cc920fe61694d43248
+  glog: 0dc7efada961c0793012970b60faebbd58b0decb
   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
   RCT-Folly: 2f2111690f1e23490285c059ca53be22fe6d6bee
-  RCTRequired: bc021672176516f9077a9b2f1300d5a04e98dd8e
-  RCTTypeSafety: dd88e89b2d08df093f650af090bab371a8b7d369
-  React: fd0bed4a49748a1114bfae48c93bc55a178b8634
-  React-callinvoker: 49976d8b74c72ee82defb81422a331465441692a
-  React-Core: 138d769f39849681f6a6bc7e5a4db3c621df2c16
-  React-CoreModules: c1ab907464352b4ad65753945eced45e2286c17a
-  React-cxxreact: e7a5eda119759b32a0b085ee983938dd3c2ee83a
-  React-jsi: 6e01f87cc6fd6ba9a75d1a57d959a8290f6adfea
-  React-jsiexecutor: f5dc0df6ed8af85b00a8e985ec54c8967a082b5f
-  React-jsinspector: bdf106e1464bc469ba629a26c488520e6a112b1b
-  React-perflogger: 1add839c33e8241e6d20c468e4a4ffae59a13f64
-  React-RCTActionSheet: e14f85abb409305569e02ccecc7ad49ba571578b
-  React-RCTAnimation: 070e13c3df0cd154bdc32b52e59e5666fa6e9289
-  React-RCTBlob: 3e1bdc2139ea89309ec093b0c19429d30f560409
-  React-RCTImage: ad73b0817497213958d0bf36e4f2c27a8e668f3a
-  React-RCTLinking: 04988e0fe0f9ba3654374863442ec914ec3eb10b
-  React-RCTNetwork: 3054f8640873825d5e007d0a86e43a781b14f80e
-  React-RCTPushNotification: f8a39937fa6d734377cf64695293f7ae316d7051
-  React-RCTSettings: 6c95ad626d0535501c6a6a34bec2ba7d4de29790
-  React-RCTTest: 4341221f53c6524dcb02b035a406ec7cf3b7d964
-  React-RCTText: bcce263b99aa6721f2e3b2d62c863748d15debb3
-  React-RCTVibration: 751b81dfa647c0a3639047ac3e6adf2fd8fef86a
-  React-runtimeexecutor: c2c32ed679eb9763095d13960adce6b21a885046
+  RCTRequired: b1fc36079e6eb2cb0ed0e0e61b2505cea4056a33
+  RCTTypeSafety: 81d18084731e8fcb2422298ebd9c11bf4adba743
+  React: 8d1c51c27a0fb488f4527b1014c69e2c71385dac
+  React-callinvoker: 7f5744e873cfa2062944055642226fd097785685
+  React-Core: af4ab87cf81aa7ad34c2218b2ac9d5d185e3e017
+  React-CoreModules: 794933c8ca37bbc6fb5732f43106e9bf65bf2d11
+  React-cxxreact: 57388cd42c3d2fc7d561a3c647a13ec587637f1c
+  React-jsi: 964decb09bf811622082bdc1e70f8511a3f06dea
+  React-jsiexecutor: 6ed2f1fb58747ed62a7448ffdefedb921e89dd79
+  React-jsinspector: 7f2265bade8db8427ab7274e2a1dfd3c89aa62ca
+  React-perflogger: 6cecdfabafb55e9b77fc68548b28124e75035d54
+  React-RCTActionSheet: b089109efdfee3d9fd8985feec7d0e415091147e
+  React-RCTAnimation: 03ecbf1eaa8753768c279f3ab1e9438322eee5c8
+  React-RCTBlob: 2bb93523503f90aa0a9a53ff1974a821a1f49224
+  React-RCTImage: 6062212a210d9172939429ffa5a63ae3c52c8dd9
+  React-RCTLinking: 8db83c1ab09d5f33c90f48ea77e9397636da3262
+  React-RCTNetwork: ea6843510ba8f2d3b004a719255890073b64be20
+  React-RCTPushNotification: 835a5694aa7ac4af474e78aa191e1ced077d8e9b
+  React-RCTSettings: 43b55670a9721832b0fdb6b58267d4085dad4d36
+  React-RCTTest: d6f5942762c8f7e33cc29628e29fc12378ea69eb
+  React-RCTText: 8a689bff7aa29924f831a6af23d0f8601bdfb973
+  React-RCTVibration: 12b840af92e048d41184bdf2dd32c16ed74bbe39
+  React-runtimeexecutor: 16fb928d903232715a0b0223c0db0e505550a01b
   React-TurboModuleCxx-RNW: 12172bdbaaf052406ec571465243fad4b2eb2702
-  React-TurboModuleCxx-WinRTPort: c2d49fa6eda38319bbc454b8b1525d3b007218dc
-  ReactCommon: bf7db57736b24e57497d1fdd384809345a0a5653
-  Yoga: d203d48354fa48e0100655ac7be4444477df794f
+  React-TurboModuleCxx-WinRTPort: afde91ef8e9b8a741722765c63c169446e40ebcd
+  ReactCommon: 6b64e24b8ced930449c8259f3bc63b313cd2683a
+  Yoga: b4e0b9b32020947886f0552dcdb28e88085ae2c9
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: cb260f8f7765c910b68f8267cbd74709f6ae6e54

diff --git a/packages/rn-tester/js/examples/KeyViewLoopExample/KeyViewLoopExample.js b/packages/rn-tester/js/examples/KeyViewLoopExample/KeyViewLoopExample.js
@@ -111,30 +111,6 @@ class FocusTrapExample extends React.Component<{}> {
   }
 }
 
-class FocusRingExample extends React.Component<{}> {
-  render() {
-    return (
-      <View>
-        <View style={styles.keyView} focusable={true} enableFocusRing={true}>
-          <Text>Enabled</Text>
-        </View>
-        <View style={styles.keyView} focusable={true} enableFocusRing={false}>
-          <Text>Disabled</Text>
-        </View>
-        <View style={styles.keyView} focusable={true}>
-          <Text>Default</Text>
-        </View>
-        <View style={styles.keyView} focusable={false}>
-          <Text>Not focusable</Text>
-        </View>
-        <View style={styles.keyView} focusable={true} enableFocusRing={true}>
-          <Text>Enabled</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
 var styles = StyleSheet.create({
   textInput: {
     ...Platform.select({
@@ -174,10 +150,4 @@ exports.examples = [
       return <FocusTrapExample />;
     },
   },
-  {
-    title: 'Focus Ring Example',
-    render: function(): React.Element<any> {
-      return <FocusRingExample />;
-    },
-  },
 ];
diff --git a/yarn.lock b/yarn.lock
@@ -4432,7 +4432,7 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.1.0:
+har-validator@~5.1.3:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
   integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
@@ -7516,7 +7516,7 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.24, psl@^1.1.28:
+psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
   integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
@@ -7546,11 +7546,6 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -8898,7 +8893,7 @@ toposort@^2.0.2:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
   integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
 
-tough-cookie@^2.3.3:
+tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -8915,14 +8910,6 @@ tough-cookie@^3.0.1:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tough-cookie@~2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
-  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
-  dependencies:
-    psl "^1.1.24"
-    punycode "^1.4.1"
-
 tr46@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"