usePress is not work in shadowRoot

[vitonsky]

🐛 Bug Report

When usePress apply for components inside shadowRoot - not work press with keyboard.

It's very important because it's basic behavior hook and it easy to fix.

Target: https://github.com/adobe/react-spectrum/blob/d04e70b27e40d0a04312d8c5e40127eceeefcd22/packages/@react-aria/interactions/src/usePress.ts

🤔 Expected Behavior

When i press enter on my button in shadowRoot, event onPress is work

😯 Current Behavior

When i press enter on my button in shadowRoot, event onPress is not work

💁 Possible Solution

Replace some global handlers from document node to component.getRootNode() where component is any DOM node of component. It may be optional parameter for hook, like target in this example:

const btnRef = useRef();

const { isPressed, pressProps } = usePress({
  target: btnRef,
  onPress: console.info
});

return <div ref={btnRef} {...{ isPressed, ...pressProps }}>Content</div>

If use this parameter, then update global events in useEffect for target.current.getRootNode().

Ofcourse events in root node need only for get correct target of key press events. It's additional handler.

🔦 Context

I use your hooks in my UI library react-elegant-ui for Button component and use this component in web extension, which render this button in shadowRoot on the pages (this file).

As result, my buttons is not acessible from keyboard. It's very bad, such as it basic functional, my extension focus on acessibility and this bug easy to fix

💻 Code Sample

I use your hooks in my UI library react-elegant-ui for Button component

Also you can build this example and check this section

🌍 Your Environment

Software	Version(s)
react-aria/interactions	^3.4.0
Browser	firefox 89
Operating System	windows 7

🧢 Your Company/Team

This bug affect on UI library react-elegant-ui and browser addon linguist

🕷 Tracking Issue (optional)

vitonsky/react-elegant-ui#7

[LFDanLu]

#1472 is related, as a whole we don't support ShadowDom and there are a lot of areas that would need work to get it working. Closing this issue in favor of #1472, happy to accept any contributions or discuss steps to get this supported

[gruschis]

@vitonsky As a workaround, onPressEnd works for me.

[vitonsky]

@gruschis thanks for your comment, but probably it's not that i need, because onPressEnd fired by mouse/key up, but it's not cover whole onPress behavior.

It's easy to fix, but developer decide to ignore our problem. For me it's red flag to use this library, think about it before you get hard couple with this dependency