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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE html>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=483573
-->
<head>
<title>HTML5 audio/video tests</title>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript"
src="../promisified-events.js"></script>
<script type="application/javascript">
async function loadAudioSource() {
/**
* Setting the source dynamically and wait for it to load,
* so we can test the accessibility tree of the control in its ready and
* stable state.
*
* See bug 1484048 comment 25 for discussion on how it switches UI when
* loading a statically declared source.
*/
const bufferA11yShown = waitForEvent(
EVENT_SHOW,
evt => evt.accessible.role == ROLE_TEXT_LEAF &&
evt.accessible.indexInParent == 2 &&
evt.accessible.parent.role == ROLE_STATUSBAR
);
await new Promise(resolve => {
let el = document.getElementById("audio");
el.addEventListener("canplaythrough", resolve, {once: true});
el.src = "../bug461281.ogg";
});
// Wait for this to be reflected in the a11y tree.
await bufferA11yShown;
// Give Fluent time to update the value of the scrubber asynchronously.
let scrubber = document.getElementById("audio")
.openOrClosedShadowRoot.getElementById("scrubber");
await SimpleTest.promiseWaitForCondition(() =>
scrubber.getAttribute("aria-valuetext") == "0:00 / 0:02");
doTest();
}
function doTest() {
// ////////////////////////////////////////////////////////////////////////
// test the accessible tree
var accTree = {
role: ROLE_GROUPING,
children: [
{ // start/stop button
role: ROLE_PUSHBUTTON,
name: "Play",
children: [],
},
{ // buffer bar
role: ROLE_STATUSBAR,
children: [
{
role: ROLE_TEXT_LEAF,
name: "Loading:",
},
{
role: ROLE_TEXT_LEAF,
name: " ",
},
{
role: ROLE_TEXT_LEAF,
// The name is the percentage buffered; e.g. "0%", "100%".
// We can't check it here because it might be different
// depending on browser caching.
},
],
},
{ // slider of progress bar
role: ROLE_SLIDER,
name: "Position",
value: "0:00 / 0:02",
children: [],
},
{ // mute button
role: ROLE_PUSHBUTTON,
name: "Mute",
children: [],
},
{ // slider of volume bar
role: ROLE_SLIDER,
children: [],
name: "Volume",
},
],
};
testAccessibleTree("audio", accTree);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(loadAudioSource);
</script>
</head>
<body>
<a target="_blank"
title="Expose HTML5 video and audio elements' embedded controls through accessibility APIs"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=483573">Mozilla Bug 483573</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<audio id="audio" controls="true"></audio>
<div id="eventDump"></div>
</body>
</html>
|
