Open philwolstenholme opened 10 months ago
For completeness: the linked to https://close-watcher-demo.glitch.me/ demo comes with a polyfill.
I think this would be a good update, especially if it gets support for screen readers as you alluded to. Currently we rely on visually hidden dismiss buttons to allow screen reader users to close some of our overlays, but navigating to those in a large list can be problematic. Having built in gesture support to trigger those overlay closes would solve that for us. I'll bring this up to the team to field opinions.
Talked to the team and we are definitely interested in this, but we'd like to get some research done on how the device back buttons on devices work with native elements so we know which ESC key handlers to replace with CloseWatcher (for example overlays seems like a good place but we wouldn't want to replace the ESC key for something like our TableColumnResizer). Let us know if you'd like to help out with this research!
The native html dialog (when modal) and popovers both have the close watcher behaviour. So basically any elements that use escape to "close" (selects, modals, tooltips etc) are prime candidates for a close watcher.
Looking through react aria that would seem to be:
Pickers - Select, Combobox Overlays - Modal, Popover, Tooltip
Changing the above components should address the use cases for the derivatives such as Date picker which should also have this.
Provide a general summary of the feature here
Chrome 120 introduced the concept of a
CloseWatcher
that can replace aEsc
key listener. ACloseWatcher
fires when theEsc
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:
Is this something that React Aria would be interested in using instead of an
Esc
key listener (in supported browsers) inuseOverlay
? We could fall back to the key listener in browser that don't supportnew 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
๐งข 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)