573-haswarn.html (2978B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>In a <div> element with role="combobox" and aria-autocomplete="both", change values of the combobox by adjusting the up and down arrow keys with focus on the textfield in the combobox.</title> 6 <style> 7 .hasFocus { border: 2px solid red; } 8 </style> 9 <script> 10 var UP = 38; 11 var DOWN = 40; 12 comboInfo = {}; 13 14 function toArray (/* NodeList */ nodeList) { 15 var result = []; 16 for (var i=0; i < nodeList.length; i++) { 17 result[i] = nodeList[i]; 18 } 19 return result; 20 } 21 22 function initComboInfo() { 23 comboInfo.comboBox = document.getElementById ('test'); 24 comboInfo.textEntry = document.getElementById ('testEntry'); 25 var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant')); 26 comboInfo.options = toArray (active.parentElement.children); 27 return active; 28 } 29 30 function handleArrow (/* Event */ event) { 31 /* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */ 32 var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant')); 33 var currentIndex = comboInfo.options.indexOf (active); 34 var nextIndex = currentIndex; 35 if (event.which == DOWN) { 36 nextIndex = (currentIndex + 1) % comboInfo.options.length; 37 } 38 else if (event.which == UP) { 39 nextIndex = currentIndex - 1; 40 if (nextIndex < 0) 41 nextIndex = comboInfo.options.length - 1; 42 } 43 44 if (nextIndex != currentIndex) { 45 active.removeAttribute ('class'); 46 active = comboInfo.options[nextIndex]; 47 comboInfo.comboBox.setAttribute ('aria-activedescendant', active.getAttribute ('id')); 48 active.setAttribute ('class', 'hasFocus'); 49 event.target.value = active.innerHTML; 50 } 51 } 52 53 function doOnload() { 54 var active = initComboInfo(); 55 comboInfo.textEntry.value = active.innerHTML; 56 comboInfo.textEntry.focus(); 57 active.setAttribute ('class', 'hasFocus'); 58 } 59 60 </script> 61 </head> 62 <body onload='doOnload()'> 63 <div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="both" aria-activedescendant="o2"> 64 <input id="testEntry" type="text" role="textbox" aria-owns="owned_listbox" onkeydown='handleArrow (event)'> 65 <ul role="listbox" id="owned_listbox" style="list-style-type: none;"> 66 <li role="option" id="o1">Zebra</li> 67 <li role="option" id="o2">Zoom</li> 68 <li role="option" id="o3">Zeta</li> 69 <li role="option" id="o4">Zaphod</li> 70 </ul> 71 </div> 72 </body> 73 </html>