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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
<html>
<head>
<title>Accessible name change event testing</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 src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../states.js"></script>
<script type="application/javascript">
let PromEvents = {};
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/a11y/accessible/tests/mochitest/promisified-events.js",
PromEvents);
// //////////////////////////////////////////////////////////////////////////
// Invokers
function setAttr(aID, aAttr, aValue, aChecker) {
this.eventSeq = [ aChecker ];
this.invoke = function setAttr_invoke() {
getNode(aID).setAttribute(aAttr, aValue);
};
this.getID = function setAttr_getID() {
return "set attr '" + aAttr + "', value '" + aValue + "'";
};
}
/**
* No name change on an accessible, because the accessible is recreated.
*/
function setAttr_recreate(aID, aAttr, aValue) {
this.eventSeq = [
new invokerChecker(EVENT_HIDE, getAccessible(aID)),
new invokerChecker(EVENT_SHOW, aID),
];
this.invoke = function setAttr_recreate_invoke() {
todo(false, "No accessible recreation should happen, just name change event");
getNode(aID).setAttribute(aAttr, aValue);
};
this.getID = function setAttr_recreate_getID() {
return "set attr '" + aAttr + "', value '" + aValue + "'";
};
}
// //////////////////////////////////////////////////////////////////////////
// Do tests
// gA11yEventDumpToConsole = true; // debuggin
var gQueue = null;
async function doTests() {
gQueue = new eventQueue();
// Later tests use await.
let queueFinished = new Promise(resolve => {
gQueue.onFinish = function() {
resolve();
return DO_NOT_FINISH_TEST;
};
});
gQueue.push(new setAttr("tst1", "aria-label", "hi",
new invokerChecker(EVENT_NAME_CHANGE, "tst1")));
gQueue.push(new setAttr("tst1", "alt", "alt",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst1")));
gQueue.push(new setAttr("tst1", "title", "title",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst1")));
gQueue.push(new setAttr("tst1", "aria-labelledby", "display",
new invokerChecker(EVENT_NAME_CHANGE, "tst1")));
gQueue.push(new setAttr("tst2", "aria-labelledby", "display",
new invokerChecker(EVENT_NAME_CHANGE, "tst2")));
gQueue.push(new setAttr("tst2", "alt", "alt",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2")));
gQueue.push(new setAttr("tst2", "title", "title",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2")));
gQueue.push(new setAttr("tst2", "aria-label", "hi",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2")));
// When `alt` attribute is added or removed from a broken img,
// the accessible is recreated.
gQueue.push(new setAttr_recreate("tst3", "alt", "one"));
// When an `alt` attribute is changed, there is a name change event.
gQueue.push(new setAttr("tst3", "alt", "two",
new invokerChecker(EVENT_NAME_CHANGE, "tst3")));
gQueue.push(new setAttr("tst3", "title", "title",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst3")));
gQueue.push(new setAttr("tst4", "title", "title",
new invokerChecker(EVENT_NAME_CHANGE, "tst4")));
gQueue.invoke();
await queueFinished;
// Tests beyond this point use await rather than eventQueue.
const labelledBy = getNode("labelledBy");
const label = getNode("label");
let nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy);
info("Changing text of aria-labelledby target");
label.textContent = "l2";
await nameChanged;
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy);
info("Adding node to aria-labelledby target");
label.innerHTML = '<p id="labelChild">l3</p>';
await nameChanged;
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, labelledBy);
info("Changing text of aria-labelledby target's child");
getNode("labelChild").textContent = "l4";
await nameChanged;
const lateLabelledBy = getNode("lateLabelledBy");
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy);
info("Setting aria-labelledby");
lateLabelledBy.setAttribute("aria-labelledby", "lateLabel");
await nameChanged;
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, lateLabelledBy);
info("Changing text of late aria-labelledby target's child");
getNode("lateLabelChild").textContent = "l2";
await nameChanged;
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, "listitem");
info("Changing textContent of listitem child");
// Changing textContent replaces the text leaf with a new one.
getNode("listitem").textContent = "world";
await nameChanged;
nameChanged = PromEvents.waitForEvent(EVENT_NAME_CHANGE, "button");
info("Changing text of button's text leaf");
// Changing the text node's data changes the text without replacing the
// leaf.
getNode("button").firstChild.data = "after";
await nameChanged;
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTests);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=991969"
title="Event not fired when description changes">
Bug 991969
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<img id="tst1" alt="initial" src="../moz.png">
<img id="tst2" src="../moz.png">
<img id="tst3">
<img id="tst4" src="../moz.png">
<div id="labelledBy" aria-labelledby="label"></div>
<div id="label">l1</div>
<div id="lateLabelledBy"></div>
<div id="lateLabel"><p id="lateLabelChild">l1</p></div>
<ul><li id="listitem">hello</li></ul>
<button id="button">before</button>
<div id="eventdump"></div>
</body>
</html>
|
