diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css index c88cf79435..d32a7a2449 100644 --- a/examples/dialog-modal/css/dialog.css +++ b/examples/dialog-modal/css/dialog.css @@ -1,51 +1,3 @@ -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 } @@ -66,7 +18,7 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na 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-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); } @@ -151,14 +103,34 @@ 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 { diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index ae7fff9578..ceb739689d 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,142 +94,141 @@

          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-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. +
+
-
-

Javascript and CSS Source Code

- -
+
+

Javascript and CSS Source Code

+ +
-
-

HTML Source Code

- -
- +
+

HTML Source Code

+ +
+ -
-
- -
+ + +