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
74
75
76
77
78
79
80
81
content / test / data / accessibility / aria / aria-posinset.html [blame]
<!--
@MAC-ALLOW:AXRoleDescription
@MAC-ALLOW:AXARIASetSize
@MAC-ALLOW:AXARIAPosInSet
@WIN-ALLOW:setsize*
@WIN-ALLOW:posinset*
@BLINK-ALLOW:setSize*
@BLINK-ALLOW:posInSet*
@AURALINUX-ALLOW:setsize*
@AURALINUX-ALLOW:posinset*
@AURALINUX-DENY:checkable
@WAIT-FOR:Done
-->
<html>
<body onload="loaded()">
<div role="article"> This is an ARIA article 1. </div>
<div role="article"> This is an ARIA article 2. </div>
<div role="listbox" onclick="console.log('hi')">
<div tabIndex="0" aria-setsize="2" aria-posinset="1" role="option">Item 1</div>
<div tabIndex="0" aria-setsize="2" aria-posinset="2" role="option">Item 2</div>
</div>
<div role="listbox" onclick="console.log('hi')">
<div tabIndex="0" role="option">Item 1</div>
<div tabIndex="0" role="option">Item 2</div>
</div>
<form>
<input type="radio" name="number" value="1" aria-setsize="4" aria-posinset="3">1<br>
<input type="radio" name="number" value="2" aria-setsize="4" aria-posinset="4">2
</form>
<input type="radio" name="fruits" value="Apple">Apple<br>
<input type="radio" name="fruits" value="Banana">Banana
<fieldset>
<legend>Cake</legend>
<label><input type="radio" name="cake" value="Chiffon cakes" checked>Chiffon cakes</label><br>
<label><input type="radio" name="cake" value="Chocolate cakes">Chocolate cakes</label>
</fieldset>
</form>
<form>
<p id = "pTag">
<label id="parent"><input type="radio" id="elem" name="color" value="red" checked>red</label><br>
<label><input type="radio" name="color" value="blue">blue</label>
</p>
</form>
<div role="treegrid">
<!--aria-posinset and aria-setsize supported on treegrid row-->
<!--Per specs, treegrid rows needs to be focusable-->
<div role="row" aria-posinset="2" aria-setsize="100" tabindex="-1">
<div role="gridcell">content</div>
</div>
</div>
<div role="grid">
<!--aria-posinset and aria-setsize NOT supported on grid row-->
<div role="row" aria-posinset="2" aria-setsize="100">
<div role="gridcell">content</div>
</div>
</div>
<div role="table">
<!--aria-posinset and aria-setsize NOT supported on table row-->
<div role="row" aria-posinset="2" aria-setsize="100">
<div role="gridcell">content</div>
</div>
</div>
</body>
<script>
function loaded(){
var parent = document.getElementById("parent");
var child = document.getElementById("elem");
parent.removeChild(child);
var pTag = document.getElementById("pTag");
child = document.createElement("input");
child.type = "radio";
child.name = "color";
pTag.insertBefore(child, parent);
child.type = "button";
child.value = "changedFromRadio";
document.body.appendChild(document.createTextNode('Done'));
}
</script>
</html>