Close signals #18

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.