Skip to content

Instantly share code, notes, and snippets.

@sacko87
Created May 11, 2014 19:13
Show Gist options
  • Save sacko87/4576fd5a6664dae81d61 to your computer and use it in GitHub Desktop.
Save sacko87/4576fd5a6664dae81d61 to your computer and use it in GitHub Desktop.
Another example of ARIA without the buttons, instead attaching the events to the div.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WAI-ARIA Test</title>
</head>
<body>
<div role="application" aria-controls="p1" class="ctrl" tabindex="0" aria-describedby="i1">
<p id="p1" role="alert" aria-live="assertive">i am text.</p>
<div id="i1">
<p>Press up to do something.</p>
<p>Press down to do something else.</p>
</div>
</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 divs = goog.dom.getElementsByTagNameAndClass("div", "ctrl");
for(i = 0; i < divs.length; i++) { // loop through ...
div = divs[i]; // local var
// add a keydown event to them (to accept commands)
goog.events.listen(div, goog.events.EventType.KEYDOWN, function(e) {
// only allow ...
switch(e.keyCode) {
// ... these keys to progress
case goog.events.KeyCodes.ENTER:
case goog.events.KeyCodes.UP:
case goog.events.KeyCodes.SPACE:
// get the target element <p>
target = goog.dom.getElement(div.getAttribute("aria-controls"), div);
// for it's new stuffs!
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment