--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ARIA-UAIG/1.0/tests/test-files/test92.html Mon Oct 21 17:59:56 2013 -0400
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+ <title>div element with role="listbox" and aria-multiselectable="true" having three child div elements with role="option" and aria-selected="false", and script that enables focus with click on options and shift-click for range selection</title>
+ <script type="text/javascript"><!--
+ var selectedElement = null;
+ var multiselection = false;
+ function select(el) {
+ el.setAttribute("aria-selected", "true");
+ selectedElement = el;
+ var reporter = document.getElementById("report");
+ reporter.appendChild(reporter.ownerDocument.createTextNode("Element " + el.id + " has been selected. "));
+ }
+ function multiSelect(el) {
+ if (selectedElement != null && !multiselection && selectedElement.parentNode == el.parentNode) {
+ if (selectedElement.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) {
+ nextElement = selectedElement.nextSibling;
+ do {
+ if (nextElement.nodeType == Node.ELEMENT_NODE && nextElement.getAttribute("role") == "option") select(nextElement);
+ nextElement = nextElement.nextSibling;
+ } while (nextElement != el)
+ select(nextElement);
+ multiselection = true;
+ } else if (selectedElement.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) {
+ nextElement = selectedElement.previousSibling;
+ do {
+ if (nextElement.nodeType == Node.ELEMENT_NODE && nextElement.getAttribute("role") == "option") select(nextElement);
+ nextElement = nextElement.previousSibling;
+ } while (nextElement != el)
+ select(nextElement);
+ multiselection = true;
+ } else {}
+ }
+ else toggleSelection(el);
+ }
+ function unselect(el) {
+ el.setAttribute("aria-selected", "false");
+ selectedElement = null;
+ var reporter = document.getElementById("report");
+ reporter.appendChild(reporter.ownerDocument.createTextNode("Element " + el.id + " has been unselected. "));
+ }
+ function toggleSelection(el) {
+ if (el.getAttribute("aria-selected") == "true") unselect(el);
+ else select(el);
+ }
+ function clickHandler(evt) {
+ if (evt.shiftKey) {
+ multiSelect(evt.target);
+ } else {
+ toggleSelection(evt.target);
+ }
+ }
+ function attachListener(evt) {
+ document.getElementById("test").addEventListener("click", clickHandler, true);
+ }
+ window.addEventListener("load", attachListener, false);
+ --></script>
+ <style type="text/css">
+ *[aria-selected=true] {
+ background-color: #eee;
+ }
+ *[aria-selected=false] {
+ background-color: inherit;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Click on the first option, then shift-click on the third option</p>
+ <div id="test" role="listbox" aria-multiselectabe="true">
+ <div role="option" aria-selected="false" id="option1" tabindex="0">Option 1</div>
+ <div role="option" aria-selected="false" id="option2" tabindex="0">Option 2</div>
+ <div role="option" aria-selected="false" id="option3" tabindex="0">Option 3</div>
+ </div>
+ <p id="report"></p>
+ </body>
+</html>