Change Details

**The goal of this task is to add “Dialogs” to [[ https://design.wikimedia.org/style-guide/components/ | Design Style Guide “Components” section ]].** Dialogs are a way to communicate and interact with a user. They are a type of modal or overlay that occurs on top of the site or app for two main reasons: # Critical information to be shared or action that is needed before being able to proceed. # A subset of information that helps perform a task Dialogs can be presented in a wide range of sizes from small boxes with one sentence to full screen takeovers with more complex tasks. For this task we will be focused on updating and improving upon the chrome of current [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop | OOUI dialogs ]] but not specifying layouts or interactions for the wide range of content that can live within a dialog. Related GitHub issue raised by volunteer: https://github.com/wikimedia/WikimediaUI-Style-Guide/issues/376

**The goal of this task is to add “Dialogs” to [[ https://design.wikimedia.org/style-guide/components/ | Design Style Guide “Components” section ]].** Dialogs are a way to communicate and interact with a user. They are a type of modal or overlay that occurs on top of the site or app for two main reasons: # Critical information to be shared or action that is needed before being able to proceed. # A subset of information that helps perform a task Dialogs can be presented in a wide range of sizes from small boxes with one sentence to full screen takeovers with more complex tasks. For this task we will be focused on updating and improving upon the chrome of current [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop | OOUI dialogs ]] but not specifying layouts or interactions for the wide range of content that can live within a dialog. Related GitHub issue raised by volunteer: https://github.com/wikimedia/WikimediaUI-Style-Guide/issues/376 --- [[ https://www.w3.org/TR/wai-aria-1.1/#dialog | WAI-ARIA 1.1 definition of a dialog ]]: > A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. > Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal. See related alertdialog. > […] > Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs. And from [[ https://www.w3.org/TR/wai-aria-practices/#dialog_modal | WAI ARIA practices ]]: > Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

**The goal of this task is to add “Dialogs” to [[ https://design.wikimedia.org/style-guide/components/ | Design Style Guide “Components” section ]].** Dialogs are a way to communicate and interact with a user. They are a type of modal or overlay that occurs on top of the site or app for two main reasons: # Critical information to be shared or action that is needed before being able to proceed. # A subset of information that helps perform a task Dialogs can be presented in a wide range of sizes from small boxes with one sentence to full screen takeovers with more complex tasks. For this task we will be focused on updating and improving upon the chrome of current [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop | OOUI dialogs ]] but not specifying layouts or interactions for the wide range of content that can live within a dialog. Related GitHub issue raised by volunteer: https://github.com/wikimedia/WikimediaUI-Style-Guide/issues/376 --- [[ https://www.w3.org/TR/wai-aria-1.1/#dialog | WAI-ARIA 1.1 definition of a dialog ]]: > A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. > Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal. See related alertdialog. > […] > Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs. And from [[ https://www.w3.org/TR/wai-aria-practices/#dialog_modal | WAI ARIA practices ]]: > Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.