Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
Line 45: Line 45:
  
 
   <script type="text/javascript">
 
   <script type="text/javascript">
    function openDialog1() {
 
      // Note that we don't use aria-hidden on the dialog, since the
 
      //  dialog is _actually_ hidden or not hidden by CSS
 
      document.getElementById("dialog1").className = "dialog-show";
 
  
      setTimeout(function(){
+
    var focusStack = [];
        document.getElementById("dialog1").focus();
 
        document.getElementById("pageContent").className = "body-dimmed";
 
        document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 
      },1); // Was 2 sec timeout for debugging purposes
 
    }
 
  
    function closeDialog1() {
+
    function openDialog1() {
      document.getElementById("pageContent").setAttribute("aria-hidden", "false");
+
      // Note that we don't use aria-hidden on the dialog, since the
      document.getElementById("pageContent").className = "";
+
      //  dialog is _actually_ hidden by CSS
 +
      document.getElementById("dialog1").className = "dialog-show";
  
      setTimeout(function(){
+
      setTimeout(function(){
        document.getElementById("openDialog1").focus();
+
        focusStack.push(document.activeElement);
        document.getElementById("dialog1").className = "dialog-hide";
+
        document.getElementById("dialog1").focus();
      },1); // Was 2 sec timeout for debugging purposes
+
        document.getElementById("pageContent").className = "body-dimmed";
    }
+
        document.getElementById("pageContent").setAttribute("aria-hidden", "true");
 +
      },1); // Was 2 sec timeout for debugging purposes
 +
    }
 +
 
 +
    function closeDialog1() {
 +
      document.getElementById("pageContent").setAttribute("aria-hidden", "false");
 +
      document.getElementById("pageContent").className = "";
 +
 
 +
      setTimeout(function(){
 +
        var toFocus = focusStack.pop();
 +
 
 +
        if ( toFocus ) {
 +
          toFocus.focus();
 +
        } else {
 +
          try {
 +
            document.body.focus();
 +
          }
 +
          catch (e) {
 +
          }
 +
        }
 +
        document.getElementById("dialog1").className = "dialog-hide";
 +
      },1); // Was 2 sec timeout for debugging purposes
 +
    }
 
   </script>
 
   </script>
  
Line 100: Line 114:
 
     <div id="dialog1Desc">
 
     <div id="dialog1Desc">
  
       <p>Trees are great! They convert CO2 into oxygen, so we can breathe!</p>
+
       <p>Trees are great! They convert CO2 into oxygen, without which we wouldn't be able to breathe!</p>
 +
 
 +
    </div>
  
      <h2>Pine tree</h2>
+
    <!-- Note that the following content is not referenced by aria-labelledby or aria-describedby
      <p>Description of pine trees ...</p>
+
        for the dialog, but it must be accessible for screen reader users -->
  
      <h2>Oak tree</h2>
+
    <h2>Pine tree</h2>
      <p>Description of oak trees ...</p>
+
    <p>Description of pine trees ...</p>
  
      <h2>Redwood tree</h2>
+
    <h2>Oak tree</h2>
      <p>Description of redwood trees ...</p>
+
    <p>Description of oak trees ...</p>
  
      <h2>Aspen tree</h2>
+
    <h2>Redwood tree</h2>
      <p>Description of aspen trees ...</p>
+
    <p>Description of redwood trees ...</p>
  
      <hr>
+
    <h2>Aspen tree</h2>
 +
    <p>Description of aspen trees ...</p>
  
      <label for="i1">Was this helpful? <input id="i1" type="checkbox" /></label>
+
    <hr>
  
     </div>
+
     <label for="i1">Was this helpful? <input id="i1" type="checkbox" /></label>
  
 
     <button type="button" id="closeDialog1" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>
 
     <button type="button" id="closeDialog1" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>

Revision as of 20:25, 21 November 2016

Example

Note - not implemented:

  • Constraining keyboard focus within the modal dialog


...

...