cthulhu/test/html/aria-checkbox.html

148 lines
4.6 KiB
HTML
Raw Normal View History

<html>
<head>
<title>ARIA Checkbox</title>
<script type="text/javascript" >
/*
* @method public getTarget() - helper function to extract the element which fired the event from the event object.
* @param event - event object
* @return - the appropriate target based on the varibles supported in the event object.
*/
function getTarget(event) {
var target = null;
if (event.target) {
target = event.target;
}
else if (event.srcElement) {
target = event.srcElement;
}
return target;
}
/******************* End of wrapper functions **********************/
var CHECK = "checked.gif";
var UNCHECK = "unchecked.gif";
var MIXED = "mixed.gif";
var ELEMENT_NODE = 1; // IE does not understand Node.ELEMENT_NODE nor nodeObj.ELEMENT_NODE
// Mouse and keyboard event handlers for controls
function checkBoxEvent(event)
{
var bEventContinue = true; // Browser can still use event
try {
if ((event.type == "click" && event.button == 0) ||
(event.type == "keydown" && event.keyCode == 32)) {
// Toggle checkbox
var checkbox = getTarget(event);
var checkImg = null;
// event could be coming from img
if (checkbox.nodeType == ELEMENT_NODE && checkbox.tagName.toUpperCase() == "IMG") {
checkImg = checkbox;
checkbox = checkbox.parentNode;
}
else { //event coming from span
for (var i=0; i < checkbox.childNodes.length; i++) {
checkImg = checkbox.childNodes[i];
if (checkImg.nodeType == ELEMENT_NODE && checkImg.tagName.toUpperCase() == "IMG") {
break;
}
}
}
if (checkbox.getAttribute("aria-checked") == "true") {
checkbox.removeAttribute("aria-checked");
checkImg.src = UNCHECK;
}
else {
checkbox.setAttribute("aria-checked", "true");
checkImg.src = CHECK;
}
bEventContinue = false; // Do not continue propagating event
}
} catch (error) {
bEventContinue = true;
}
return bEventContinue;
}
function tristateCheckBoxEvent(event)
{
var bEventContinue = true; // Browser can still use event
try {
if ((event.type == "click" && event.button == 0) ||
(event.type == "keydown" && event.keyCode == 32)) {
// Toggle checkbox
var checkbox = getTarget(event);
var checkImg = null;
// event could be coming from img
if (checkbox.nodeType == ELEMENT_NODE && checkbox.tagName.toUpperCase() == "IMG") {
checkImg = checkbox;
checkbox = checkbox.parentNode;
}
else { //event coming from span
for (var i=0; i < checkbox.childNodes.length; i++) {
checkImg = checkbox.childNodes[i];
if (checkImg.nodeType == ELEMENT_NODE && checkImg.tagName.toUpperCase() == "IMG") {
break;
}
}
}
if (checkbox.getAttribute("aria-checked") == "true") {
checkbox.removeAttribute("aria-checked");
checkImg.src = UNCHECK;
}
else if (checkbox.getAttribute("aria-checked") == "mixed") {
checkbox.setAttribute("aria-checked", "true");
checkImg.src = CHECK;
}
else {
checkbox.setAttribute("aria-checked", "mixed");
checkImg.src = MIXED;
}
bEventContinue = false; // Do not continue propagating event
}
} catch (error) {
bEventContinue = true;
}
return bEventContinue;
};
//]]>
</script>
</head>
<body>
<p>Here's a checkbox that you can click on.</p>
<div>
<span role="checkbox" aria-checked="true" tabindex="0"
onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" >
<img src="checked.gif" role="presentation" alt="" />
Include decorative fruit basket
</span>
</div>
<div>
<span role="checkbox" aria-checked="true" aria-invalid="true" tabindex="0"
onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" >
<img src="checked.gif" role="presentation" alt="" />
Invalid checkbox
</span>
</div>
<div>
<span role="checkbox" aria-checked="true" aria-required="true" tabindex="0"
onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" >
<img src="checked.gif" role="presentation" alt="" />
Required checkbox
</span>
</div>
<div>
<span role="checkbox" aria-checked="true" aria-required="true" tabindex="0"
onkeydown="return tristateCheckBoxEvent(event);" onclick="return tristateCheckBoxEvent(event);" >
<img src="checked.gif" role="presentation" alt="" />
Tri-state checkbox
</span>
</div>
<p>
<a href="/web/20110104115538/http://www.google.com/">Random Google link</a>
</p>
</body>
</html>