React Aria: Replace Esc key listeners with a CloseWatcher in supported browsers

Provide a general summary of the feature here

Chrome 120 introduced the concept of a CloseWatcher that can replace a Esc key listener. A CloseWatcher fires when the Esc key is pressed but has the bonus of being triggered by 'back' gestures or buttons on Android, 'back' physical buttons on gamepads, and potentially in the future other 'close' gestures like iOS VoiceOver's two-finger scrub "z" gesture.

Multiple CloseWatchers can be created and will stack, and a user gesture will trigger the watcher at the top of the stack (removing it from the stack).

From the WICG explainer:

Currently, web developers have no good way to handle these close requests. This is especially problematic on Android devices, where the back button is the traditional close request. Imagine a user filling in a twenty-field form, with the last item being a custom date picker modal. The user might click the back button hoping to close the date picker, like they would in a native app. But instead, the back button navigates the web page's history tree, likely closing the whole form and losing the filled information. But the problem of how to handle close requests extends across all operating systems; implementing a good experience for users of different browsers, platforms, and accessibility technologies requires a lot of user agent sniffing today.

Is this something that React Aria would be interested in using instead of an Esc key listener (in supported browsers) in useOverlay? We could fall back to the key listener in browser that don't support new CloseWatcher(). I'd be happy to try raising a PR.

🤔 Expected Behavior?

We will get the benefits of the CloseWatcher and mobile users will be less likely to suffer data loss or irritation if they use a back gesture that is uncaught and they end up on a different page as a result.

😯 Current Behavior

Currently we only dismiss overlays when the Esc key is pressed.

💁 Possible Solution

See general summary – I would be happy to try adding this via a PR

💻 Examples

• https://close-watcher-demo.glitch.me
• https://twitter.com/bramus/status/1730325130033697278
• https://github.com/WICG/close-watcher
• https://html.spec.whatwg.org/multipage/interaction.html#close-requests-and-close-watchers

🧢 Your Company/Team

External to Adobe (my team is working on a rebuild of http://shop.coop.co.uk for Co-op in the UK)