Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add use of HTML5 "hidden" for IE compatibility)
(Add a modalShadingOverlay element to shade the whole page)
Line 22: Line 22:
 
     .dialog-hide {
 
     .dialog-hide {
 
       display:none;
 
       display:none;
    }
 
 
    .dialog-show {
 
      display:block;
 
      border: solid thin black;
 
      width:30em;
 
      text-align:center;
 
    }
 
 
    .body-dimmed {
 
background-color:#777;
 
opacity:0.5;
 
 
     }
 
     }
  
Line 41: Line 29:
 
       margin-top:0em;
 
       margin-top:0em;
 
       font-weight:bold;
 
       font-weight:bold;
  }
+
    }
 +
 
 +
    #modalOverlay {
 +
      width:100%;
 +
      height:100%;
 +
      z-index:2; /* places the modal overlay between the main page and the modal dialog*/
 +
      background-color:#000;
 +
      opacity:0.5;
 +
      position:fixed;
 +
      top:0;
 +
      left:0;
 +
      display:none;
 +
      margin:0;
 +
      padding:0;
 +
    }
 +
 
 +
    .dialog-show {
 +
      width:50%;
 +
      margin-left:auto;
 +
      margin-right:auto;
 +
      padding: 5px;
 +
      border: thin #000 solid;
 +
      background-color:#fff;
 +
      z-index:3; /* places the modal dialog on top of everything else */
 +
      position:fixed;
 +
      top:25%;
 +
      left:25%;
 +
      display:none;
 +
    }
 
   </style>
 
   </style>
  
Line 59: Line 75:
 
         focusStack.push(document.activeElement);
 
         focusStack.push(document.activeElement);
 
         document.getElementById("dialog1").focus();
 
         document.getElementById("dialog1").focus();
         document.getElementById("pageContent").className = "body-dimmed";
+
         document.getElementById("modalShadingOverlay").css('display', 'block');
 +
      //  document.getElementById("pageContent").className = "body-dimmed";
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
         document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
       },1); // Was 2 sec timeout for debugging purposes
 
       },1); // Was 2 sec timeout for debugging purposes
Line 66: Line 83:
 
     function closeDialog1() {
 
     function closeDialog1() {
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
 
       document.getElementById("pageContent").setAttribute("aria-hidden", "false");
       document.getElementById("pageContent").className = "";
+
       document.getElementById("modalShadingOverlay").css('display', 'none');
 +
    //  document.getElementById("pageContent").className = "";
  
 
       setTimeout(function(){
 
       setTimeout(function(){
Line 156: Line 174:
 
     <span aria-hidden="true" class="sr-only"> End of modal dialog </span>
 
     <span aria-hidden="true" class="sr-only"> End of modal dialog </span>
 
   </div>
 
   </div>
 +
 +
  <div tabindex="-1" id="modalShadingOverlay"></div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:15, 23 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...