Difference between revisions of "ARIA Menu"

From Level Access Web Labs
Jump to navigation Jump to search
 
(27 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<html lang="en-US">
+
This example is not working correctly.
<head>
+
 
<title>ARIA Menu Example</title>
+
<html lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
  <head>
</head>
+
  <title>
 +
    ARIA menus
 +
  </title>
 +
  <style type="text/css">
 +
    #l1, #l2  {
 +
      float:left;
 +
      width:10em;
 +
      background-color:darkblue;
 +
      color:white;
 +
      padding:.2em;
 +
    }
 +
    li {
 +
      list-style-type:none !important;
 +
    }
 +
    #label1 {
 +
    }
 +
    #u1, #u2 {
 +
      display:none;
 +
    }
 +
    .focus {
 +
    outline: dotted;
 +
    }
 +
  </style>
 +
  <script type="text/javascript">
 +
    function showHide(evt) {
 +
      var e = window.event ? window.event : evt;
 +
 
 +
            obj = e.target;
 +
            toggle(obj,1);
 +
    }
 +
 
 +
        function visible(obj) {
 +
            if (window.getComputedStyle(obj,null).display == "none")
 +
                return false;
 +
            else
 +
              return true;
 +
        }
 +
 
 +
        // set force to 1 to force only that one to be displayed
 +
    function toggle(obj, force) {
 +
 
 +
                if (obj.tagName == "SPAN")
 +
                  obj = obj.parentNode;
 +
 
 +
            if (obj.id == "l1" || obj.id == "l2") {
 +
                obj = obj.children[1]
 +
          }
 +
 
 +
          if (obj.tagName == "UL") {
 +
                if (force) {
 +
                        var o = document.getElementsByClassName('menu')
 +
                        for (var i=0; i < o.length; i++) {
 +
 
 +
                          o[i].style.display = "none";
 +
                        }
 +
                  obj.style.display = "block";
 +
            }
 +
                else if (!visible(obj)) {
 +
                  obj.style.display = "block";
 +
                  obj.setAttribute("aria-expanded","true");
 +
                  obj.querySelector("li").focus();
 +
                }
 +
                else
 +
                    obj.style.display = "none";
 +
          }
 +
          else if (obj.tagName == "LI") {
 +
            obj.onclick();
 +
          }
 +
    }
 +
 
 +
    function drawFocus() {
 +
      removeFocus();
 +
 
 +
      var id = document.getElementById('m1').getAttribute('aria-activedescendant');
 +
      var obj = document.getElementById(id);
 +
 
 +
      if (!visible(obj)) {
 +
            toggle(obj,0);
 +
      }
 +
      if (!visible(obj.parentNode)) {
 +
            toggle(obj.parentNode,0);
 +
      }
 +
      if (document.getElementById(id).className)
 +
        document.getElementById(id).className += " focus";
 +
      else
 +
        document.getElementById(id).className = "focus";
 +
    }
 +
 
 +
    function removeFocus() {
 +
            var o = document.getElementsByClassName('focus')
 +
 
 +
            for(var i = 0; i < o.length; i++) {
 +
                o[i].className = o[i].className.replace( /(?:^|\s)focus(?!\S)/g,'');
 +
            }
 +
 
 +
    }
 +
    function keystroke(evt) {
 +
      var e = window.event ? window.event : evt;
 +
            var activeID = document.getElementById('m1').getAttribute('aria-activedescendant');
 +
 
 +
            if (e.which == 13) { // enter
 +
                toggle(document.getElementById(activeID),0);
 +
            }
 +
            else if (e.which == 40) { // down arrow
 +
          document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-next'));
 +
          drawFocus();
 +
            }
 +
            else if (e.which == 38) {  // up arrow
 +
          document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-previous'));
 +
          drawFocus();
 +
            }
 +
            else if (e.which == 39) {            // right arrow
 +
                    if (activeID.indexOf("l1") > -1) {
 +
              toggle(document.getElementById('l2'),1);
 +
            document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 +
          }
 +
          else {
 +
              toggle(document.getElementById('l1'),1);
 +
            document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 +
          }
 +
          drawFocus();
 +
            }
 +
            else if (e.which == 37) {            // left arrow
 +
                    if (activeID.indexOf("l1") > -1) {
 +
              toggle(document.getElementById('l2'),1);
 +
            document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 +
          }
 +
          else {
 +
                toggle(document.getElementById('l1'),1);
 +
            document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 +
          }
 +
          drawFocus();
 +
            }
 +
    }
 +
  </script>
 +
  </head>
 
<body>
 
<body>
<div role="menubar">     
+
 
<!--
+
<h2>Menubar with menu items that contain menus with other menu items</h2>
File menu: File menuitem has an aria-haspopup attribute set to 'true'.
+
<div>
That popup div follows immediately below.
+
<ul tabindex="0" onclick="showHide(event);" onkeyup="keystroke(event);" id="m1" onfocus="drawFocus();" onblur="removeFocus();" role="menubar" aria-activedescendant="l1" >
-->
+
   <li id="l1" role="menuitem" aria-haspopup="true" aria-labelledby="label1" data-next="l1a" data-previous="l1c"><span id="label1" aria-expanded="false" >File &#9660;</span>
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
+
    <ul role="menu" id="u1" class="menu" >
<div role="menu" aria-labelledby="fileMenu">
+
      <li tabindex="-1" id="l1a" data-next="l1b" data-previous="l1" onclick="alert('Saving file');" role="menuitem">Save</li>
<div role="menuitem">Open</div>
+
      <li tabindex="-1" id="l1b" data-next="l1c" data-previous="l1a" onclick="alert('Saving file as ...');" role="menuitem">Save as ...</li>
<div role="menuitem">Save</div>
+
      <li tabindex="-1" id="l1c" data-next="l1" data-previous="l1b" onclick="alert('Printing file');" role="menuitem">Print</li>
<div role="menuitem">Save as ...</div>
+
    </ul>
</div>
+
  </li>
+
  <li id="l2" tabindex="-1" role="menuitem" aria-haspopup="true" aria-labeleldby="label2" data-next="l2a" data-previous="l2c"><span id="label2" aria-expanded="false">Review</span>
<!--
+
    <ul role="menu" id="u2" class="menu" >
View menu:
+
      <li id="l2a" data-next="l2b" data-previous="l2" tabindex="-1" onclick="alert('Checking spelling');" role="menuitem">Spelling</li>
-->
+
      <li id="l2b" data-next="l2c" data-previous="l2a" tabindex="-1" onclick="alert('Opening thesaurus');" role="menuitem">Thesaurus</li>
<div role="menuitem" aria-haspopup="true" id="viewMenu">View</div>
+
      <li id="l2c" data-next="l2" data-previous="l2b" tabindex="-1" onclick="alert('Checking Accessibility');" role="menuitem">Accessibility</li>
<div role="menu" aria-labelledby="viewMenu">
+
    </ul>
<div role="menuitem">Normal</div>
+
  </li>
<div role="menuitem">Outline</div>
+
</ul>
+
 
<!--
 
The View's Zoom menuitem has aria-haspopup='true' as it leads to a submenu.
 
-->
 
<div role="menuitem" aria-haspopup="true" id="zoomSubMenu">Zoom</div>
 
<div role="menu" aria-labelledby="zoomSubMenu">
 
<div role="menuitem">50%</div>
 
<div role="menuitem">75%</div>
 
<div role="menuitem">100%</div>
 
<div role="menuitem">150%</div>
 
<div role="menuitem">200%</div>
 
</div>
 
</div>
 
 
</div>
 
</div>
</body>
+
 
 +
<div style="clear:both; padding-top:4em;">&nbsp;</div>
 
</html>
 
</html>
[[Category:ARIA]]
+
 
 +
[[category:ARIA]]

Latest revision as of 15:09, 7 March 2018

This example is not working correctly.

ARIA menus

Menubar with menu items that contain menus with other menu items