View source for ARIA Accordion TalkBack SamC

This page is derived from the ARIA Accordion page (https://labs.ssbbartgroup.com/index.php/ARIA_Accordion). It is modified for Android TalkBack testing on Android OS 7.1.1.
<br>Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion<br>
<html lang="en">
  <head>
    <title> Accordion</title>
    <style type="text/css">
      #container {
        width:14em;
      }
      button {
        min-width:100%;
        color:white;
        background: #00437A;
        padding:.3em;
        font-size: 1em;
      }
      button:focus {
         outline-color: white;
			   outline: dotted;
			   outline-width:thin;
      }
      a {
        color: #00437A;
      }
      .panel {
        border: thin solid darkblue;

        padding: .5em;
      }
      #lb1 {
        width:10em;
      }

      ul.lb li {
        text-indent:0px;
        list-style-type:none;
        display:block;
        padding-left:0;
      }

      ul.lb [aria-selected="true"] {
        background-color:blue;
        color:white;
      }

      ul.lb {
        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 change(e) {
        var evt = e ? e : window.event;
        var set = document.getElementsByClassName("accbutton");
        var index=-1;

        // find the index of the current accordion header (button)
        for (var i = 0; i < set.length; i++) {
          if (set[i].id == e.target.id)
    				var index = i;
  			}

        if (e.which == 38 || e.which == 37 || e.which ==33) {  // up, left, pageUP
           index--;
           if (index < 0) {
             index = set.length-1;
           }
          // page up also toggles
          //if (e.which ==33)
          //    toggle((set[index]), true);

           set[index].focus();
        }

        else if (e.which == 40 || e.which ==39 || e.which ==34) { // right, down, pageDN
           index++;
           if (index >= set.length)
             index = 0;
          // page down also toggles
        //  if (e.which ==34)
        //      toggle((set[index]),true);

           set[index].focus();
        }

        // home
				else if (e.which == 36) {
           set[0].focus();
				}

        // end
				else if (e.which == 35) {
           set[set.length-1].focus();
				}

       }

       function toggle(obj,alwaysopen) {
         var alwaysopen = (typeof alwaysopen === "undefined") ? false : alwaysopen;

         if (obj.getAttribute("aria-expanded") == "false" || alwaysopen) {
 	         obj.setAttribute("aria-expanded","true");
 	         realNextSibling(obj).removeAttribute("hidden");
         }
         else if (obj.getAttribute("aria-expanded") == "true" ) {
 	         obj.setAttribute("aria-expanded","false");
 	         realNextSibling(obj).setAttribute("hidden","hidden");
         }
       }
    </script>
  </head>
<body>
  <div>
    <ul>
      <li>
        <a class="accbutton" role="button" id="b1" onkeydown="change(event);" aria-expanded="false" aria-controls="r1" onclick="toggle(this);"><h2>Web Accessibility</h2></a>
        <div class="panel" role="region" id="r1">
          <a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=9">Structure</a><br/>
          <a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=4">Forms</a><br/>
          <a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=10">Color and Contrast</a><br/>
        </div>
      </li>
    </ul>
  </div>
    <div id="container">
      <div>
        <button class="accbutton" id="b2" onkeydown="change(event);" aria-expanded="false" aria-controls="r2" onclick="toggle(this);">Mobile Accessibility</button>
        <div class="panel" role="region" id="r2" hidden="hidden" aria-labelledby="b2">
          <div><a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=222">iOS</a></div>
          <div><a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=286">Android</a></div>
          <div><a href="http://amp.ssbbartgroup.com/">Windows Phone</a></div>
        </div>
      </div>
      <div>
        <button class="accbutton" id="b3" onkeydown="change(event);" aria-expanded="false" aria-controls="r3" onclick="toggle(this);">PDF Accessibility</button>
        <div class="panel" role="region" id="r3" hidden="hidden" aria-labelledby="b3">
          <div><a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=24">Structure</a></div>
          <div><a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=119">Forms</a></div>
          <div><a href="https://amp.ssbbartgroup.com/public/standards/view_violations.php?media_type_id=56">Data Tables</a></div>
        </div>
      </div>
    </div>
</body>
</html>

[[Category:ARIA]]