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
82
83
84
85
86
87
88
89
90
91
|
<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>
<style>
myelement {
display: block;
}
</style>
<div>
<a id="link1" href="#">Link</a>
<button id="button1">Button</button>
<input id="text1" type="text">
<input id="checkbox1" type="checkbox">
<input id="radio1" type="radio">
<input id="submit1" type="submit">
<select id="combobox1"><option>1<option>2</select>
<myelement id="focusable1" tabindex="0">Focusable</myelement>
<div id="aria-button1" tabindex="0" role="button">ARIA button</div>
<div id="aria-link1" tabindex="0" role="link">ARIA link</div>
</div>
<canvas id="myCanvas" width="300" height="300">
<a id="link2" href="#">Link</a>
<button id="button2">Button</button>
<input id="text2" type="text">
<input id="checkbox2" type="checkbox">
<input id="radio2" type="radio">
<input id="submit2" type="submit">
<select id="combobox2"><option>1<option>2</select>
<myelement id="focusable2" tabindex="0">Focusable</myelement>
<div id="aria-button2" tabindex="0" role="button">ARIA button</div>
<div id="aria-link2" tabindex="0" role="link">ARIA link</div>
</canvas>
<div id="console"></div>
<script>
description("This test makes sure that focusable elements in canvas fallback content are accessible.");
if (window.testRunner && window.accessibilityController) {
window.testRunner.dumpAsText();
function check(id, expectedRole) {
debug(id);
window.element = document.getElementById(id);
element.focus();
shouldBe("document.activeElement == element", "true");
window.axElement = accessibilityController.focusedElement;
shouldBe("axElement.role", "\"" + expectedRole + "\"");
debug("");
}
var comboBoxRole = (testRunner.platformName == "gtk" || testRunner.platformName == "efl") ? "AXRole: AXComboBox" : "AXRole: AXPopUpButton";
// Check rendered controls.
check("link1", "AXRole: AXLink");
check("button1", "AXRole: AXButton");
check("text1", "AXRole: AXTextField");
check("checkbox1", "AXRole: AXCheckBox");
check("radio1", "AXRole: AXRadioButton");
check("submit1", "AXRole: AXButton");
check("combobox1", comboBoxRole);
check("focusable1", "AXRole: AXGroup");
check("aria-button1", "AXRole: AXButton");
check("aria-link1", "AXRole: AXLink");
// Check unrendered controls inside a canvas.
check("link2", "AXRole: AXLink");
check("button2", "AXRole: AXButton");
check("text2", "AXRole: AXTextField");
check("checkbox2", "AXRole: AXCheckBox");
check("radio2", "AXRole: AXRadioButton");
check("submit2", "AXRole: AXButton");
check("combobox2", comboBoxRole);
check("focusable2", "AXRole: AXGroup");
check("aria-button2", "AXRole: AXButton");
check("aria-link2", "AXRole: AXLink");
// Check that the role is updated when the element changes.
document.getElementById('focusable1').setAttribute('role', 'button');
check("focusable1", "AXRole: AXButton");
document.getElementById('focusable2').setAttribute('role', 'button');
check("focusable2", "AXRole: AXButton");
}
</script>
</body>
</html>
|
