onPress doesn't trigger on button pseudo-element area

[tinleym]

🐛 Bug Report

onPress doesn't trigger on button pseudo-element area, though onClick does.

I've seen this issue discussed for touch devices, but not for desktop/mouse. https://github.com/adobe/react-spectrum/issues/1061

🤔 Expected Behavior

I'd expect onPress to trigger when button pseudo-element is pressed, like onClick.

😯 Current Behavior

onPress does not trigger when button pseudo-element area is pressed.

🔦 Context

Pseudo-elements can be useful appendages to tappable elements because they allow for a larger tappable area that won't affect the layout of other elements. They can enable you, for example, to enforce that any button or link's minimum clickable dimension be at least 44px (Apple's recommended minimum tap size).

https://ishadeed.com/article/clickable-area/#using-pseudo-elements-to-increase-the-clickable-area

💻 Code Sample

Below, clicking the core of the button triggers onPress and onClick, but clicking in the pseudo-element area (inside the frame but outside the core of the button) only triggers onClick.

https://codesandbox.io/s/intelligent-cdn-t6iu9?file=/src/App.js

🌍 Your Environment

react-aria 3.10.0 Chrome 94.0.4606.81 (Official Build) (x86_64), Firefox 93.0, Safari 14.1.1 MacOS 11.4