Modal Dialog Example: Fix Background Layer Styling (pull #549)

For issue #523, add a background layer behind each dialog to grey out everything underneath.

Changes also include:
* minor editorial revisions to intro
* replace tabs with spaces
* cleanup whitespace
* rename ID used on dialog container
* wrap dialogs in individual backdrop elements when they're active
* remove unused dialog_layer references
* use more aria selectors
* simpler backdrop styles
* fix indent
* fullscreen on small screens
* Remove unsupported pseudo-element that breaks a selector on some browsers
* keep DOM in place once backdrop has been added

Author: sh0ji

examples/dialog-modal/css/dialog.css

@@ -1,164 +1,159 @@
 html, body {
-	height: 100%;
+  height: 100%;
 }
 
 body {
-	max-width: 100%;
-	padding: 0;
-	margin: 0;
-	overflow: hidden;
+  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;
+  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);
+  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) #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) {
+    padding: 0;
+  }
 }
 
 body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content nav  {
-	padding-left: 1.5em;
+  padding-left: 1.5em;
 }
 
 
 .hidden {
-	display: none
-}
-
-#dialog_layer.showing {
-	position: absolute;
-	width: 100%;
-	height: 100vh;
-	top: 0;
-	left: 0;
-	overflow: scroll;
-	-webkit-overflow-scrolling: touch;
-	background: rgba(0, 0, 0, 0.3);
-}
-
-div.default_dialog {
-	display: block;
-	width: 50%;
-	margin-bottom: 100px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 5px;
-	border: thin #000 solid;
-	background-color: #fff;
-	position: absolute;
-	top: 25%;
-	left: 25%;
+  display: none
+}
+
+[role="dialog"] {
+  width: 50%;
+  margin: 10vh auto;
+  padding: 5px;
+  border: thin #000 solid;
+  background-color: #fff;
 }
 
 @media screen and (max-width: 640px) {
-	div.default_dialog {
-		box-sizing: border-box;
-		top: 0px;
-		left: 0px;
-		margin-bottom: 0px;
-		min-height: 100%;
-		width: 100%;
-	}
+  [role="dialog"] {
+    box-sizing: border-box;
+    top: 0px;
+    left: 0px;
+    margin: 0 auto;
+    min-height: 100%;
+    width: 100%;
+  }
 }
 
-.default_dialog h2:first-of-type {
-	text-align:center;
+[role="dialog"] h2:first-of-type {
+  text-align:center;
 }
 
 .dialog_form {
-	margin: 15px;
+  margin: 15px;
 }
 
 .dialog_form .label_text {
-	box-sizing: border-box;
-	padding-right: 0.5em;
-	display: inline-block;
-	font-size: 16px;
-	font-weight: bold;
-	width: 30%;
-	text-align: right;
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  display: inline-block;
+  font-size: 16px;
+  font-weight: bold;
+  width: 30%;
+  text-align: right;
 }
 
 .dialog_form .label_info {
-	box-sizing: border-box;
-	padding-right: 0.5em;
-	font-size: 12px;
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  font-size: 12px;
   width: 30%;
   text-align: right;
   display: inline-block;
 }
 
 .dialog_form_item {
-	margin: 10px 0;
-	font-size: 0;
+  margin: 10px 0;
+  font-size: 0;
 }
 
 .dialog_form_item .wide_input {
-	box-sizing: border-box;
-	max-width: 70%;
-	width: 27em;
+  box-sizing: border-box;
+  max-width: 70%;
+  width: 27em;
 }
 
 .dialog_form_item .city_input {
-	box-sizing: border-box;
-	max-width: 70%;
-	width: 17em;
+  box-sizing: border-box;
+  max-width: 70%;
+  width: 17em;
 }
 
 .dialog_form_item .state_input {
-	box-sizing: border-box;
-	max-width: 70%;
-	width: 15em;
+  box-sizing: border-box;
+  max-width: 70%;
+  width: 15em;
 }
 
 .dialog_form_item .zip_input {
-	box-sizing: border-box;
-	max-width: 70%;
-	width: 9em;
+  box-sizing: border-box;
+  max-width: 70%;
+  width: 9em;
 }
 
 .dialog_form_actions {
-	text-align: right;
+  text-align: right;
   padding: 0 20px 20px;
 }
 
 .dialog_close_button {
-	float:right;
-	position:absolute;
-	top:10px;
-	left:92%;
-	height:25px;
+  float:right;
+  position:absolute;
+  top:10px;
+  left:92%;
+  height:25px;
 }
 
 .dialog_close_button img {
-	border:0;
+  border:0;
 }
 
 .dialog_desc {
-	padding: 10px 20px;
+  padding: 10px 20px;
+}
+
+/* native <dialog> element uses the ::backdrop pseudo-element */
+/*dialog::backdrop,*/
+.dialog-backdrop.active {
+  position: fixed;
+  overflow-y: scroll;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  background: rgba(0, 0, 0, 0.3);
 }

examples/dialog-modal/dialog.html

@@ -193,7 +193,7 @@ <h3>Notes on <code>aria-modal</code>and <code>aria-hidden</code></h3>
             As a new property, screen reader users may experience varying degrees of support for it.
           </li>
           <li>
-            Applying the <code>aria-modal</code> property to the <code>dialog</code> element 
+            Applying the <code>aria-modal</code> property to the <code>dialog</code> element
             replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
           </li>
           <li>
@@ -232,7 +232,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <a href="../../#dialog_modal">Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
     </nav>
   </div>
-  <div id="dialog_layer">
+  <div class="dialogs">
     <div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
       <h2 id="dialog1_label">Add Delivery Address</h2>
       <div class="dialog_form">
@@ -280,8 +280,7 @@ <h2 id="dialog1_label">Add Delivery Address</h2>
 
     <!--  Second modal to open on top of the first modal  -->
     <div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
-      aria-describedby="dialog2_desc" aria-modal="true" class="hidden"
-    >
+      aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
       <h2 id="dialog2_label">Verification Result</h2>
       <div id="dialog2_desc" class="dialog_desc">
         <p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
@@ -341,8 +340,7 @@ <h2 id="dialog2_label">Verification Result</h2>
 
     <!--  Dialog that replaces dialog 1.  -->
     <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
-      aria-describedby="dialog3_desc" aria-modal="true" class="hidden"
-    >
+      aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
       <h2 id="dialog3_label">Address Added</h2>
       <p id="dialog3_desc" class="dialog_desc">
         The address you provided has been added to your list of delivery addresses. It is ready
@@ -356,8 +354,7 @@ <h2 id="dialog3_label">Address Added</h2>
 
     <div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
       aria-describedby="dialog4_desc" class="hidden"
-      aria-modal="true"
-    >
+      aria-modal="true">
       <h2 id="dialog4_label">End of the Road!</h2>
       <p id="dialog4_desc" class="dialog_desc">
         You activated a fake link or button that goes nowhere!

examples/dialog-modal/js/dialog.js

@@ -131,6 +131,21 @@ aria.Utils = aria.Utils || {};
         'Dialog() requires a DOM element with ARIA role of dialog.');
     }
 
+    // Wrap in an individual backdrop element if one doesn't exist
+    // Native <dialog> elements use the ::backdrop pseudo-element, which
+    // works similarly.
+    var backdropClass = 'dialog-backdrop';
+    if (this.dialogNode.parentNode.classList.contains(backdropClass)) {
+      this.backdropNode = this.dialogNode.parentNode;
+    }
+    else {
+      this.backdropNode = document.createElement('div');
+      this.backdropNode.className = backdropClass;
+      this.dialogNode.parentNode.insertBefore(this.backdropNode, this.dialogNode);
+      this.backdropNode.appendChild(this.dialogNode);
+    }
+    this.backdropNode.classList.add('active');
+
     if (typeof focusAfterClosed === 'string') {
       this.focusAfterClosed = document.getElementById(focusAfterClosed);
     }
@@ -175,9 +190,6 @@ aria.Utils = aria.Utils || {};
     this.clearDialog();
     this.dialogNode.className = 'default_dialog'; // make visible
 
-    var layer = document.getElementById('dialog_layer');
-    layer.className = 'showing';
-
     if (this.focusFirst) {
       this.focusFirst.focus();
     }
@@ -210,16 +222,13 @@ aria.Utils = aria.Utils || {};
     aria.Utils.remove(this.preNode);
     aria.Utils.remove(this.postNode);
     this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
     this.focusAfterClosed.focus();
 
     // If a dialog was open underneath this one, restore its listeners.
     if (aria.OpenDialogList.length > 0) {
       aria.getCurrentDialog().addListeners();
     }
-    else {
-      var layer = document.getElementById('dialog_layer');
-      layer.className = 'hidden';
-    }
   }; // end close
 
   /**
@@ -243,6 +252,8 @@ aria.Utils = aria.Utils || {};
     aria.Utils.remove(this.preNode);
     aria.Utils.remove(this.postNode);
     this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
+
     var focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
     var dialog = new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
   }; // end replace