RectButton doesn't trigger onPress callback when pressed with keyboard Enter/Space key

[Thanaen]

Description

When you focus a react-native Pressable component with the keyboard, then press Enter or Space, then the onPress callback is called. This is not the case with the RectButton component of react-native-gesture-handler.

Doesn't this reflect an accessibility problem?

Steps to reproduce

1. Clone the repro project
2. Run it on Android
3. Using "Tab", focus the RectButton, then press enter: nothing appears in the logs
4. Also using "Tab", focus the Pressable, then press enter: a log appears.

Snack or a link to a repository

https://github.com/Thanaen/AccessibleRectButton

Gesture Handler version

2.6.0

React Native version

0.70.0 (also happens on 0.68.3)

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 4 (API 31)

Acknowledgements

Yes

[j-piasecki]

Unfortunately this looks to be a design flaw in the Gesture Handler logic as it heavily relies on intercepting MotionEvents and operating on those. Since GH's buttons need to be paired with NativeViewGestureHandler to work properly, they require touch interaction to activate.

I don't think this can be changed in the near future since it would require a lot of changes to the core of Gesture Handler, but if you need this functionality to work here's a bit hacky workaround that can make it work. Keep in mind I haven't tested it that much, so it may not be working correctly all the time.

[Thanaen]

Thank you for your detailed answer.

I'm curious about something: Do you consider that the lack of keyboard support makes your components (and the applications that use them) less accessible? I don't really know if using a keyboard for navigation in a mobile app is common, or if it's a feature that is critical to the accessibility of an app. I'm interested in your opinion!

[j-piasecki]

Lack of keyboard support definitely makes components of Gesture Handler less accessible, but I don't think many people are using keyboard to navigate - especially with how it works in different, even first-party, apps, some of which I found almost unusable with only keyboard.

[Thanaen]

Ok, thanks for your analysis.

I'll leave the issue open, so that you have the opportunity to address the problem when you can and want to. 😄

[RowlandOti]

Unfortunately this looks to be a design flaw in the Gesture Handler logic as it heavily relies on intercepting MotionEvents and operating on those. Since GH's buttons need to be paired with NativeViewGestureHandler to work properly, they require touch interaction to activate.

I don't think this can be changed in the near future since it would require a lot of changes to the core of Gesture Handler, but if you need this functionality to work here's a bit hacky workaround that can make it work. Keep in mind I haven't tested it that much, so it may not be working correctly all the time.

Is this link correct? Btw, I am facing keyboard navigation challenges in an app that's used y many customers who need to have the app accessible. SO this has been quite a pain point, and I have almost given up on being able to support keyboard accessibility. It seems it is not a first-class thing in React Native. There are no examples or even mention of them in the public documentation. For React accessibility seems to end and stop with Talkback and screen readers - there is no keyboard support.

[m-bert]

Hi @Thanaen! We have recently merged this PR which should fix the problem. Could you please check whether it allows you to navigate with keyboard?

[Thanaen]

Hi @m-bert! Sorry for the late reply, it seems the problem has been solved! Well done!