Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active November 17, 2022 19:53
Show Gist options
  • Save jonathantneal/219d36888017dad9da9916c33b989a58 to your computer and use it in GitHub Desktop.
Save jonathantneal/219d36888017dad9da9916c33b989a58 to your computer and use it in GitHub Desktop.
Dialog Terminology

Dialog Terms and Definitions

This is a list of definitions for dialog things on the web.

These definitions intend to reflect concepts already defined in or strongly inferred from existing W3C specifications and proposals. They do not necessarily reflect what exactly an element, attribute, property, or method of the same name does on the web. For example, the definition of ‘dialog’ is conceptual; it does not intend to cover the featureset or limits of a <dialog> element.

Term Description
dialog A prompt from the system to the user, usually containing an action or task to perform.
non-modal dialog A dialog that is non-blocking, allowing access to other content.
modal dialog A dialog that is blocking, interrupting the user flow and preventing access to other content.
popover A non-modal dialog that is characteristicly ephemeral; short lived.
tooltip A popover used to provide a short-lengthed and non-essential label or description for a control.
tooltip label A tooltip used to provide a text label for a control without a visible label.
tooltip description A tooltip used to provide supplementary text for a control without a visible description.
manual dismissal A behavior where a dialog remains open until dismissed by specific user input or an expiring timer.
user dismissal A behavior where a dialog remains open until dismissed by specific user input.
timed dismissal A behavior where a dialog remains open until dismissed by an expiring timer.
light dismissal A behavior where a dialog remains open until dismissed by losing focus, or by the user pressing an Escape key or clicking outside the element.
force closure A behavior where opening a dialog dismisses all other, non-ancestral dialogs.
focus trap A behavior where a container prevents keyboard interaction from leaving itself.
top layer A visual layer displayed over all other content. Popovers and modals are displayed from the top layer.
backdrop A visual layer obscuring content behind it, usually conveying the obscured content as unavailable for interaction.
blocking A characteristic where content is exclusively interactive, and other content is implicitly inert.
inert A characteristic where content cannot be interacted with.
overlay A characteristic where content is displayed over other content.

Acknowledgements

This list was originally created from the HTML specification for <dialog> and the proposal for the popover attribute. It was greatly revised and initiall shared following some expertise of Hidde de Vries, who then generously offered further input used in additional edits.


Note: Everyone is absolutely entitled to their own terminology, of course, so the goal of this document is only to unify some of the ‘baked-in’ concepts we get for free.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment