feat: Use CloseWatcher API for modals etc

[lukewarlow]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It could be useful for ionic to make use of the new close watcher api [1][2] to listen for close signals to close components such as alert dialogs.

[1] https://html.spec.whatwg.org/multipage/interaction.html#the-closewatcher-interface
[2] https://developer.chrome.com/blog/new-in-chrome-120#close-watcher

Describe the Use Case

This API allows listening for escape key presses, along with more platform specific close signals such as Android's back button/ gesture. This would provide a more native feel (matching both the native platform and the web).

It would also improve accesibility as it supports Talkback back gestures too.

Describe Preferred Solution

The close watcher API being used when supported feels like the best solution.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks, I think this would be good for us to support. I have an experimental version if you want to give it a try:

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Stencil/Vanilla JavaScript

npm install @ionic/[email protected]

The feature is added behind an experimentalCloseWatcher flag in the IonicConfig, so you will need to set experimentalCloseWatcher: true before you can use it. Once enabled, you will be able to use this API to dismiss overlays, menus, and navigate in a non-Cordova/non-Capacitor environment on supported browsers (Chrome 120+ as of writing).

[liamdebeasi]

Thanks for the issue. This has been resolved via #28705, and the feature will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.