Improved script to simulate a "selection follows focus" scenario. Here the change in state of aria-selected depends on whether the associated element is focussed.
--- a/ARIA-UAIG/1.0/tests/test-files/test91.html Mon Oct 28 10:46:58 2013 -0500
+++ b/ARIA-UAIG/1.0/tests/test-files/test91.html Mon Oct 28 15:12:00 2013 -0400
@@ -3,14 +3,33 @@
<head>
<title>div element with role="listbox" and aria-multiselectable="true" having two child div elements with role="option" and tabindex="0" and aria-selected="false" and onload handler for page that sets aria-selected="true" on the second option</title>
<script type="text/javascript">
- function selectItem() {
- var elID = "option2";
- document.getElementById(elID).setAttribute("aria-selected", "true");
- var reporter = document.getElementById("report");
- reporter.innerHTML = "Element " + elID + " has been selected";
+
+ function focusOption2() {
+ document.getElementById('option2').focus();
+ }
+
+ function addFocusListenerToOptions() {
+ var listBoxEl = document.getElementById ('test');
+ for (var i = 0; i < listBoxEl.children.length; i++) {
+ var option = listBoxEl.children[i];
+ option.addEventListener ('focus', selectItem, false);
+ option.addEventListener ('blur', deselectItem, false);
+ }
+ }
+
+ function selectItem( event) {
+ event.target.setAttribute ("aria-selected", "true");
+ var reporter = document.getElementById ("report");
+ reporter.innerHTML = "Element " + event.target.getAttribute ("id") + " has been selected";
}
- window.setTimeout(selectItem, 10000);
- </script>
+
+ function deselectItem (event) {
+ event.target.setAttribute ("aria-selected", "false");
+ }
+
+ window.setTimeout (focusOption2, 10000);
+
+ </script>
<style type="text/css">
*[aria-selected=true] {
background-color: #eee;
@@ -20,7 +39,7 @@
}
</style>
</head>
- <body>
+ <body onload="addFocusListenerToOptions();">
<p>Selection will change after 10 seconds.</p>
<div id="test" role="listbox" aria-multiselectabe="true">
<div role="option" aria-selected="false" id="option1" tabindex="0">Option 1</div>