diff --git a/examples/alert/index.html b/examples/alert/alert.html similarity index 100% rename from examples/alert/index.html rename to examples/alert/alert.html diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html new file mode 100644 index 0000000000..f125e997dd --- /dev/null +++ b/examples/dialog-modal/alertdialog.html @@ -0,0 +1,241 @@ + + + + + Alert and Message Dialogs Example | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + + + + + + +
+

Alert Dialog Example

+

+ The below example demonstrates the design pattern for an alert dialog. + The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns. +

+

User interactions for this interactive include:

+ +

Similar examples include:

+ +
+

Example

+ +
+ + + + + +
+ +
+
+ +
+
+

Accessibility Features

+

+ Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. + Referencing that example may also be useful. +

+
    +
  1. The accessible label for the alert dialog is set to its heading ("Confirmation").
    2. +
  2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
    3. +
  3. + Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. + This is the least destructive action, and will prevent the user from accidentally confirming the dialog. +
    4. +
  4. The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
    5. +
  5. + Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. + To communicate this to the user, an alert with role="alert" is triggered. +
    6. +
+
+
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • Moves focus to next focusable element inside the dialog.
    • +
  • When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
    • +
+
Shift + Tab +
    +
  • Moves focus to previous focusable element inside the dialog.
    • +
  • When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
    • +
+
EscapeCloses the dialog.
Command + S(Mac only) Save the contents of the notes textarea when focused.
Control + S(Windows only) Save the contents of the notes textarea when focused.
+
+
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
alertdialogdiv + Identifies the element that serves as the alert dialog container. +
aria-labelledby=IDREFdiv + Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title. +
aria-describedby=IDREFdiv + Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog. +
aria-modal=truediv + Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert). +
alertdiv + Identifies the element that serves as the alert notification. +
+

Notes on aria-modal and aria-hidden

+
    +
  1. + The aria-modal property was introduced in ARIA 1.1. + As a new property, screen reader users may experience varying degrees of support for it. +
    2. +
  2. + Applying the aria-modal property to the dialog element + replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert. +
    3. +
  3. + In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that: +
      +
    1. aria-hidden is set to true on each element containing a portion of the inert layer.
      2. +
    2. The dialog element is not a descendant of any element that has aria-hidden set to true.
      3. +
    +
    4. +
+
+
+

Javascript and CSS Source Code

+ +
+
+

HTML Source Code

+
+ + +
+
+ + + diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css index d5be27a5c6..e27e5e6854 100644 --- a/examples/dialog-modal/css/dialog.css +++ b/examples/dialog-modal/css/dialog.css @@ -1,76 +1,31 @@ -html, body { - height: 100%; -} - -body { - max-width: 100%; - padding: 0; - margin: 0; - overflow: hidden; -} - -body:not(.toc-inline) { - padding: 0; -} - -#base_window_layer { - box-sizing: border-box; - height: 100%; - width: 100%; - /* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/ - overflow: scroll; - -webkit-overflow-scrolling: touch; - padding: 1.6em 0 2em; -} - -#base_window_layer main, #base_window_layer nav { - max-width: 50em; - margin: auto; - padding-right: 1.5em; - padding-left: 50px; - padding-left: calc(26px + 1.5em); -} - -@media screen and (min-width: 78em) { - body:not(.toc-inline) #base_window_layer main, body:not(.toc-inline) #base_window_layer nav { - padding-left: 29em; - } - - body:not(.toc-inline) { - padding: 0; - } -} - -body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content nav { - padding-left: 1.5em; -} - - .hidden { display: none } +[role="alertdialog"], [role="dialog"] { - width: 50%; - margin: 10vh auto; - padding: 5px; - border: thin #000 solid; + box-sizing: border-box; + padding: 15px; + border: 1px solid #000; background-color: #fff; + min-height: 100vh; } -@media screen and (max-width: 640px) { +@media screen and (min-width: 640px) { + [role="alertdialog"], [role="dialog"] { - box-sizing: border-box; - top: 0px; - left: 0px; - margin: 0 auto; - min-height: 100%; - width: 100%; + position: absolute; + top: 2rem; + left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */ + transform: translateX(-50%); /* move backwards 50% of this element's width */ + min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */ + min-height: auto; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22); } } -[role="dialog"] h2:first-of-type { - text-align:center; +.dialog_label { + text-align: center; } .dialog_form { @@ -148,12 +103,60 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na /* native element uses the ::backdrop pseudo-element */ /*dialog::backdrop,*/ -.dialog-backdrop.active { +.dialog-backdrop { + display: none; position: fixed; - overflow-y: scroll; + overflow-y: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; - background: rgba(0, 0, 0, 0.3); +} + +@media screen and (min-width: 640px) { + .dialog-backdrop { + background: rgba(0, 0, 0, 0.3); + } +} + +.dialog-backdrop.active { + display: block; +} + +.no-scroll { + overflow-y: auto !important; +} + +/* this is added to the body when a dialog is open */ +.has-dialog { + overflow: hidden; +} + +/* styling for alert-dialog example */ +.notes { + display: block; + font-size: 1rem; + line-height: 1.3; + min-width: 400px; + max-width: 100%; + width: 33%; +} + +.toast { + background-color: rgba(0, 0, 0, 0.9); + color: #fff; + padding: 1rem; + border: none; + border-radius: 0.25rem; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + position: fixed; + top: 1rem; + right: 1rem; + transform: translateY(-150%); + transition: transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1); +} + +.toast.active { + transform: translateY(0); } diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 209fe0ff28..734e06f5eb 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -19,41 +19,39 @@ -
- -
-

Modal Dialog Example

-

- Following is an example implementation of the - design pattern for modal dialogs. - The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. - The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog. -

-
-

Example

- -
- - -
- -
+ +
+

Modal Dialog Example

+

+ Following is an example implementation of the + design pattern for modal dialogs. + The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. + The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog. +

+
+

Example

+ +
+ +
+ +
-
-

Accessibility Features

-
    -
  1. - To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen. - Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog. -
    2. -
  2. Focus and accessible descriptions are set based on the content of each dialog. +
    +

    Accessibility Features

    +
      +
    1. + To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen. + Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog. +
      2. +
    2. Focus and accessible descriptions are set based on the content of each dialog.
      1. Add Delivery Address dialog (id=dialog1):
          @@ -96,145 +94,144 @@

          Accessibility Features

    -
    +
-

Keyboard Support

- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • Moves focus to next focusable element inside the dialog.
    • -
  • When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
    • -
-
Shift + Tab -
    -
  • Moves focus to previous focusable element inside the dialog.
    • -
  • When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
    • -
-
EscapeCloses the dialog.
-
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • Moves focus to next focusable element inside the dialog.
    • +
  • When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
    • +
+
Shift + Tab +
    +
  • Moves focus to previous focusable element inside the dialog.
    • +
  • When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
    • +
+
EscapeCloses the dialog.
+ -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
dialogdiv - Identifies the element that serves as the dialog container. -
aria-labelledby=IDREFdiv - Gives the dialog an accessible name by referring to the element that provides the dialog title. -
aria-describedby=IDREFdiv -
    -
  • Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
    • -
  • - Used in three of the four dialogs included in the example. - See the above accessibility features section for an explanation. -
    • -
-
aria-modal=truediv - Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). -
-

Notes on aria-modaland aria-hidden

-
    -
  1. - The aria-modal property was introduced in ARIA 1.1. - As a new property, screen reader users may experience varying degrees of support for it. -
    2. -
  2. - Applying the aria-modal property to the dialog element - replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert. -
    3. -
  3. - In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that: -
      -
    1. aria-hidden is set to true on each element containing a portion of the inert layer.
      2. -
    2. The dialog element is not a descendant of any element that has aria-hidden set to true.
      3. -
    -
    4. -
-
+
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
dialogdiv + Identifies the element that serves as the dialog container. +
aria-labelledby=IDREFdiv + Gives the dialog an accessible name by referring to the element that provides the dialog title. +
aria-describedby=IDREFdiv +
    +
  • Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
    • +
  • + Used in three of the four dialogs included in the example. + See the above accessibility features section for an explanation. +
    • +
+
aria-modal=truediv + Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). +
+

Notes on aria-modal and aria-hidden

+
    +
  1. + The aria-modal property was introduced in ARIA 1.1. + As a new property, screen reader users may experience varying degrees of support for it. +
    2. +
  2. + Applying the aria-modal property to the dialog element + replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert. +
    3. +
  3. + In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that: +
      +
    1. aria-hidden is set to true on each element containing a portion of the inert layer.
      2. +
    2. The dialog element is not a descendant of any element that has aria-hidden set to true.
      3. +
    +
    4. +
+
-
-

Javascript and CSS Source Code

- -
+
+

Javascript and CSS Source Code

+ +
-
-

HTML Source Code

- -
- +
+

HTML Source Code

+ +
+ -
-
- -
+ + +