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