Difference between revisions of "ARIA Listbox"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
−
<html>
+
* Uses aria-activedescendant
 +
 
 +
<html lang="en">
 +
  <head>
 +
    <title> ARIA Listbox</title>
 +
    <style type="text/css">
 +
      li {
 +
        text-indent:0px;
 +
        list-style-type:none;
 +
        display:block;
 +
        width:10em;
 +
        padding-left:0;
 +
      }
 +
 
 +
      ul [aria-selected="true"] {
 +
        background-color:blue;
 +
        color:white;
 +
      }
 +
 
 +
      ul {
 +
        border: thin solid black;
 +
        width:10em;
 +
        text-indent:0px;
 +
        padding-left:0px;
 +
      }
 +
 
 +
    </style>
 +
    <script type="text/javascript">
 +
      function realNextSibling(obj) {
 +
        if (obj.nextSibling) {
 +
          if (obj.nextSibling.nodeType == 3) {
 +
            return obj.nextSibling.nextSibling
 +
          }
 +
        }
 +
        return obj.nextSibling;
 +
      }
 +
 
 +
      function realPreviousSibling(obj) {
 +
        if (obj.previousSibling) {
 +
          if (obj.previousSibling.nodeType == 3) {
 +
            return obj.previousSibling.previousSibling
 +
          }
 +
        }
 +
        return obj.previousSibling;
 +
      }
 +
 
 +
      function resetSelection() {
 +
        var list = document.getElementById("l1");
 +
        for (var i=0; i < list.children.length; i++) {
 +
          list.children[i].setAttribute('aria-selected','false');
 +
        }
 +
      }
 +
 
 +
      // set the current option element to the activedescendant
 +
      function select(obj) {
 +
        resetSelection();
 +
        obj.setAttribute('aria-selected','true');
 +
        document.getElementById("lb1").value = obj.textContent;
 +
        document.getElementById("lb1").setAttribute("aria-activedescendant",newActive);
 +
        }
 +
 
 +
      function change(e) {
 +
        var evt = e ? e : window.event;
 +
        var newActive = null;
 +
 
 +
        var active = document.getElementById("lb1").getAttribute("aria-activedescendant");
 +
        if (e.which == 38) {  // up
 +
          if (realPreviousSibling(document.getElementById(active))) {
 +
            newActive = realPreviousSibling(document.getElementById(active)).id;
 +
            }
 +
        }
 +
 
 +
        else if (e.which == 40) { // down
 +
          if (realNextSibling(document.getElementById(active))) {
 +
            newActive = realNextSibling(document.getElementById(active)).id;
 +
          }
 +
        }
 +
 
 +
        if (e.which == 38 || e.which == 40) {
 +
          if (newActive) {
 +
            document.getElementById("lb1").setAttribute("aria-activedescendant",newActive);
 +
            resetSelection();
 +
            document.getElementById(newActive).setAttribute('aria-selected','true');
 +
          }
 +
          evt.preventDefault();
 +
        }
 +
      }
 +
    </script>
 +
  </head>
 
<body>
 
<body>
−
  <div tabindex="0" aria-activedescendant="l1" role="listbox">
+
    <div>
−
  <div role="option">Mac</div>
+
      <label id="lbl1">Platform:</label>
−
  <div role="option">Windows</div>
+
      <div role="listbox" onfocus="" id="lb1" onkeyup="change(event); return true;" aria-owns="l1" aria-activedescendant="li1" aria-labelledby="lbl1" aria-expanded="true" onblur="" tabindex="0" >
−
  <div role="option">Linux</div>
+
      <ul role="listbox" id="l1" aria-labelledby="lbl1" tabindex="-1">
−
  </div>
+
        <li onclick="select(this);" aria-selected="true" id="li1" role="option" tabindex="-1" aria-hidden="false">iOS</li>
 +
        <li onclick="select(this);" aria-selected="false" id="li2" role="option" tabindex="-1" aria-hidden="false">Android</li>
 +
        <li onclick="select(this);" aria-selected="false" id="li3" role="option" tabindex="-1" aria-hidden="false">Windows Phone</li>
 +
      </ul>
 +
      </div>
 +
    </div>
 +
    <div>
 +
      <button> Nothing </button>
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 14:56, 20 October 2014

  • Uses aria-activedescendant

ARIA Listbox

  • iOS
  • Android
  • Windows Phone

Retrieved from "https://labs.levelaccess.com/index.php?title=ARIA_Listbox&oldid=1320"