react-native icon indicating copy to clipboard operation
react-native copied to clipboard

onLongPress does not fire with phsyical keyboard

Open aweary opened this issue 3 years ago • 7 comments

Description

There is no way to trigger onLongPress or other press events like onPressIn or onPressOut when using a physical keyboard connected to the mobile device. This is a big accessibility issue as it prevents interactions that utilize onLongPress from being keyboard operable in violation of https://www.w3.org/TR/mobile-accessibility-mapping/#keyboard-control-for-touchscreen-devices

Version

0.66.0

Output of npx react-native info

System: OS: macOS 12.1 CPU: (10) x64 Apple M1 Max Memory: 3.20 GB / 64.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.19.0 - ~/.nix-profile/bin/node Yarn: 1.19.2 - ~/.nix-profile/bin/yarn npm: 6.14.16 - ~/.nix-profile/bin/npm Watchman: 4.9.0 - /Users/brandon.dail/.nix-profile/bin/watchman Managers: CocoaPods: 1.11.0 - /Users/brandon.dail/.nix-profile/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 31, 32 Build Tools: 30.0.2 System Images: android-31 | Google Play ARM 64 v8a, android-32 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Users/brandon.dail/.nix-profile/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: https://github.com/discord/react-native/archive/aa6fc55f1f65a92bc4a10ac4f38cc26d35e6ced2.tar.gz => 0.68.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

  • Connect a physical keyboard to an Android or iOS device
  • Navigate to any Pressable or View that might support onLongPress
  • Hold down the Space key on the physical keyboard

Snack, code example, screenshot, or link to a repository

Just render any <Pressable onLongPress={callback}>

aweary avatar Jun 17 '22 21:06 aweary

Hey @aweary thanks for submitting we'll try to reproduce on our end, and report back. Do you have any details/environments of where you're experiencing these issues?

alextait1 avatar Jun 22 '22 16:06 alextait1

@alextait1 as far as I can tell it should be reproducible in any environment that is rendering a Pressable with an onLongPress listener. I am using a Logitech K380 Multi-Device Bluetooth Keyboard with both an iOS and Android device.

aweary avatar Jun 22 '22 17:06 aweary

@aweary , so I did some tests (and have the same keyboard as you even!) and you're correct, right now onLongPress doesn't work with keyboards. The reason for this seems to be that in general Pressability doesn't technically have any support for keyboards baked in. It's relying solely on the OS-level behavior which triggers standard onClick/onTouch events when a user hits enter/spacebar.

On iOS, you can set up a keyboard shortcut for "Touch" (rather than the default spacebar shortcut which triggers "Activate"), and if you hold the key you set down, it does in fact trigger a long-press. Again, this works by the OS simulating an actual touch event that Pressable detects.

On Android there doesn't seem to be a way to create custom keyboard shortcuts, or remap existing ones, and there is unfortunately no shortcut I can find that will trigger a long press.

In theory, this is something that RN could add support for on its own, as both Android and iOS have ways to trigger behavior based on keyboard keypress. If this is something that's blocking you, and you want to put up a PR I'd be happy to review it :)

blavalla avatar Jun 22 '22 22:06 blavalla

Just as a follow up here, while Android has no way to customize keyboard shortcuts in a general sense, specific accessibility services can customize their keyboard shortcuts.

Talkback for example, does allow keyboard shortcut customization, and even has a shortcut for long press (Alt+Shift+Enter by default).

So while I think this system could be improved upon (there really should be some OS-level customization here), it would really require an OS update from Google to make this better.

My fear is that if we tried to polyfill this in RN by listening for keypress events that we'd end up in conflict with services that do properly support keyboard shortcuts, and could cause problems for users relying on them.

blavalla avatar Sep 21 '22 19:09 blavalla

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Apr 19 '23 12:04 github-actions[bot]

Hello thread, I wrote a libarary for solving this issue: https://www.npmjs.com/package/react-native-external-keyboard

This library also includes:

  • handling component focus
  • api for moving keyboard force
  • key press hendling

New and old arch are supported.

ArturKalach avatar Jul 19 '23 20:07 ArturKalach

Hello,

The https://www.npmjs.com/package/react-native-external-keyboard library didn't work. What's the priority of this issue? Is there any timeline as to when the issue will be fixed? Thanks!

vgowda-indeed avatar Apr 25 '24 16:04 vgowda-indeed

Hello @vgowda-indeed,

I am sorry that the react-native-external-keyboard library doesn't help you with your issue.

I would really appreciate it if you could provide some details and create an issue with a description of your problem in react-native-external-keyboard.

Unfortunately, all of my tests reproduced the onLongPress behavior in KeyboardExtendedPressable. I also would like highlight that iOS has commands feature which blocks onLongPress action by default. You can find commands here: Settings -> Accessibility -> Keyboards -> Full Keyboard Access -> Commands

I wouldn't recomend to change activate command becouse it can lead to diffrent issues and problems with element focusing.

Thank you in advance, Artur Kalach

ArturKalach avatar May 20 '24 16:05 ArturKalach