From b59b3dffbb89a4af951f4b6c5f8ba966da18bafa Mon Sep 17 00:00:00 2001 From: Matt King Date: Thu, 16 Mar 2017 15:40:23 -0700 Subject: [PATCH] Complete Draft of Dialog Pattern For issue #42, made the following changes to dialog_modal section of aria-practices.html: 1. Minor editorial revisions to the introduction for clarity. 2. Made reference to nonmodal dialogs a link to the nonmodal pattern. 3. Added notes providing guidance on initial focus placement. 4. Included a link to alert dialog pattern for circumstances where the dialog is confirming a destructive action. 5. Expanded guidance for focus placement after the dialog closes. 6. Added link to review issue 325 and removed link to development issue #42. --- aria-practices.html | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index e3d7fba6e7..d27d5ccb6e 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -488,14 +488,19 @@

Combo Box

Dialog (Modal)

- Work on this section is in progress. Provide feedback in - issue 42. + NOTE: This section has been significantly revised to address initial focus placement and other outstanding editorial issues. + Please provide feedback on this design pattern in + issue 325.

A dialog is a window overlayed on either the primary window or another dialog window. - Like non-modal dialogs, modal dialogs have their own tab sequence, i.e., Tab and Shift + Tab do not move focus outside the dialog. - However, the window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. - So, unlike non-modal dialogs, a modal dialog does not provide means for moving keyboard focus outside the dialog window without closing the dialog. + The window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. + If the background window is not inert, then interaction with elements in the background window cause the modal window to close. +

+

+ Like non-modal dialogs, modal dialogs contain their tab sequence. + That is, Tab and Shift + Tab do not move focus outside the dialog. + However, unlike most non-modal dialogs, modal dialogs do not provide means for moving keyboard focus outside the dialog window without closing the dialog.

The alertdialog role is a special-case dialog role @@ -520,12 +525,28 @@

Keyboard Interaction

  • Escape: Closes the dialog.
      • -
    1. - When a dialog opens, focus is typically set on the first focusable element. +
    2. When a dialog opens, focus placement depends on the nature and size of the content. +
        +
      • In all circumstances, focus moves to an element contained in the dialog.
        • +
      • Unless a condition where doing otherwise is advisable, focus is initially set on the first focusable element.
        • +
      • + If the content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view, + it is advisable to add tabindex=0 to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element. +
        • +
      • + If the dialog is asking the user to confirm a destructive action, it may be advisable to set focus on the least destructive action, especially if undoing the action is difficult or impossible. + The Alert Dialog Pattern is often employed in such circumstances. +
        • +
      • + If the dialog is limited to interactions that either provide additional information or continue processing, + it might set focus to the element deemed to be most frequently desired, such as a OK or Continue button. +
        • +
    3. - When a dialog closes, focus returns to the element that had focus before the dialog was invoked. + When a dialog closes, focus typically returns to the element that had focus before the dialog was invoked. This is often the control that opened the dialog. + In circumstances where that element no longer exists, focus is set on an element that supports a logical work flow.