Close signals

[domenic]

Introduction

Modals are UI components that are layered on top of all other content and take interaction focus. Some examples are:

• a <dialog> element, especially the showModal() API;
• a sidebar menu;
• a lightbox;
• a custom picker input (e.g. date picker);
• a custom context menu;
• fullscreen mode.

An important common feature of these modals is that they are designed to be easy to close, with a uniform interaction mechanism for doing so. Typically, this is the Esc key on desktop platforms, and the back button on some mobile platforms (notably Android). Game consoles also tend to use a specific button as their "close/back" button. Another case is VoiceOver users on iOS, who have a special dismiss gesture.

We define a close signal as a platform-mediated interaction that's intended to close a modal. This is distinct from page-mediated interactions, such as clicking on an "x" or "Done" button, or clicking on the backdrop outside of the modal.

Currently, web developers have no good way to handle these close signals for their own modals. This is especially problematic on Android devices, where the back button is the traditional close signal. 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.

This explainer proposes a new API to enable web developers, especially component authors, to better handle these close signals. It also contemplates an alternate proposal that does not involve introducing a specific new API for close signals, but instead bundles these semantics with new higher-level APIs for modals, which would hopefully solve other problems like top-layer behavior or focus trapping. (But, the explainer does not itself tackle those problems.)

Read the complete Explainer.

Feedback

I welcome feedback in this thread, but encourage you to file bugs against the Explainer.

[tomayac]

Some platforms have no uniform close signals; to our knowledge, iOS falls in this category.

The only close signal, apart from buttons that are universally required, are swipe down gestures for card-like modals, according to the Apple Human Interface Guidelines.

[jnurthen]

Note - iOS has a close gesture when VO is running

Dismiss an alert or return to the previous screen | Two-finger scrub (move two fingers back and forth three times quickly, making a “z”)

[domenic]

Hey folks, I've updated the proposal recently, with the updates summarized at w3ctag/design-reviews#594 (comment) . Feel free to take another look, and please voice your support if you think this is something worth incubating in the WICG!

[cwilso]

Noting w3ctag/design-reviews#594 (comment), moving this into https://github.com/WICG/close-watcher.