Pressable with button role does not fire onPress on space key press

[zoontek]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

Hi! 👋

We noticed something strange lately: when using keyboard navigation with Pressable using role="button", using the space bar to press only trigger the visual focus (pressed is true in style), but doesn't fire onPress. When using the enter key, both are working.

Expected behavior

onPress should be fire, in a similar way as pressing the enter key

Steps to reproduce

• Focus on a Pressable with a button role using keyboard navigation
• Use the space key to press: visually it's pressed, but onPress is not fired

Test case

https://codesandbox.io/p/sandbox/holy-darkness-pfk6m8?file=%2Fsrc%2Fmain.tsx%3A17%2C29

Additional comments

I think it might happen since it's now using the HTML button element underneath.

[necolas]

This seems to be how Pressable has worked for a while. I tested 0.17 and 0.18 and it behaved the same. https://codesandbox.io/s/dazzling-greider-y38h47?file=/package.json

I couldn't change package versions in your non-standard test case.

[zoontek]

For the test case, that's the new VM in codesandbox, to switch package versions you can update them in package.json and run yarn in the terminal, it truly works like locally.

Back to the issue, I made two separate playground so it's easier to identify it:

With RNW 0.17

Playground: https://codesandbox.io/s/admiring-elion-lgy9zw?file=/src/App.js

with accessibilityRole="button" (role wasn't supported at this time)

• On space: pressed style applied ✅ + onPress fired ✅
• On enter: pressed style applied ✅ + onPress fired ✅

without accessibilityRole="button"

• On space: pressed style not applied ❌ + onPress not fired ❌
• On enter: pressed style applied ✅ + onPress fired ✅

With RNW 0.19

Playground: https://codesandbox.io/s/optimistic-hypatia-3mdyyq?file=/src/App.js

with role="button"

• On space: pressed style applied ✅ + onPress not fired ❌ <- this is the broken case
• On enter: pressed style applied ✅ + onPress fired ✅

without role="button"

• On space: pressed style not applied ❌ + onPress not fired ❌
• On enter: pressed style applied ✅ + onPress fired ✅

EDIT: I tried with RNW 0.18, which behave like RNW 0.17: https://codesandbox.io/s/strange-maria-lz83d2?file=/src/App.js

[necolas]

I think this will fix the issue: #2563
Let me know

[zoontek]

@necolas I confirm, it fixes it. Both space and enter fire onPress + apply pressed style now

Screen.Recording.2023-07-20.at.10.39.36.mov