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.
#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

[LFDanLu]

This sounds like a problem with how we do our own hit testing in usePress but eventually we'd like to remove that hit testing entirely from usePress in the future (#1720) which may rectify the issue. For now, perhaps we could use document.elementFromPoint with the press coordinates, that seems to return the button element when provided x,y coords of a click within the pseudo element area. I'd be curious what would be returned if there were overlapping pseudo elements

[tinleym]

@LFDanLu yeah, it looks like it would...
https://codesandbox.io/s/modest-allen-6vxo0?file=/src/App.js

[Georgegriff]

Is this issue still active? it looks like this is still an issue