sacko87/aria.html

## aria.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WAI-ARIA Test</title>
  </head>
  <body>
    <div role="application" tabindex="0">
      <p id="i1" role="alert" aria-live="assertive">i am text.</p>
      <ul role="navgation">
        <li id="l1"
            role="button"
            aria-controls="i1"
            aria-pressed="false"
            class="ctrl"
            tabindex="0"
            title="Up">Up</li>
      </ul>
    </div>
    <script type="text/javascript" src="../closure-library/closure/goog/base.js"></script>
    <script type="text/javascript">
      <!--
        goog.require('goog.dom');
        goog.require('goog.events');
        goog.require('goog.events.KeyCodes');
      -->
    </script>
    <script type="text/javascript">
      <!--
        // get all molecule controllers
        var ul = goog.dom.getElementsByTagNameAndClass("li", "ctrl");
        for(i = 0; i < ul.length; i++) { // loop through ...
          li = ul[i]; // local var
          // add a keydown event to them (to accept commands)
          goog.events.listen(li, goog.events.EventType.KEYDOWN, function(e) {
            // only allow ...
            switch(e.keyCode) {
              // ... these keys to progress
              case goog.events.KeyCodes.ENTER:
              case goog.events.KeyCodes.SPACE:
                // get the target element <p>
                target = goog.dom.getElement(li.getAttribute("aria-controls"));

                text = goog.dom.getTextContent(target);
                text = text + ' i am text.';
                // remove its contents
                goog.dom.removeChildren(target);
                // add the new text (this will be the new description
                // it will also be within a new function (when i get to it)
                goog.dom.appendChild(target, goog.dom.createTextNode(text));
              default:
                break;
            }
          });
        }
      -->
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>WAI-ARIA Test</title>
	</head>
	<body>
	<div role="application" tabindex="0">
	<p id="i1" role="alert" aria-live="assertive">i am text.</p>
	<ul role="navgation">
	<li id="l1"
	role="button"
	aria-controls="i1"
	aria-pressed="false"
	class="ctrl"
	tabindex="0"
	title="Up">Up</li>
	</ul>
	</div>
	<script type="text/javascript" src="../closure-library/closure/goog/base.js"></script>
	<script type="text/javascript">
	<!--
	goog.require('goog.dom');
	goog.require('goog.events');
	goog.require('goog.events.KeyCodes');
	-->
	</script>
	<script type="text/javascript">
	<!--
	// get all molecule controllers
	var ul = goog.dom.getElementsByTagNameAndClass("li", "ctrl");
	for(i = 0; i < ul.length; i++) { // loop through ...
	li = ul[i]; // local var
	// add a keydown event to them (to accept commands)
	goog.events.listen(li, goog.events.EventType.KEYDOWN, function(e) {
	// only allow ...
	switch(e.keyCode) {
	// ... these keys to progress
	case goog.events.KeyCodes.ENTER:
	case goog.events.KeyCodes.SPACE:
	// get the target element <p>
	target = goog.dom.getElement(li.getAttribute("aria-controls"));

	text = goog.dom.getTextContent(target);
	text = text + ' i am text.';
	// remove its contents
	goog.dom.removeChildren(target);
	// add the new text (this will be the new description
	// it will also be within a new function (when i get to it)
	goog.dom.appendChild(target, goog.dom.createTextNode(text));
	default:
	break;
	}
	});
	}
	-->
	</script>
	</body>
	</html>