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
|
<html>
<head>
<title>Accessible description 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 + "'";
};
}
// //////////////////////////////////////////////////////////////////////////
// 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-describedby", "display",
new invokerChecker(EVENT_DESCRIPTION_CHANGE, "tst1")));
gQueue.push(new setAttr("tst1", "title", "title",
new unexpectedInvokerChecker(EVENT_DESCRIPTION_CHANGE, "tst1")));
// A title has lower priority over text content. There should be no name change event.
gQueue.push(new setAttr("tst2", "title", "title",
new unexpectedInvokerChecker(EVENT_NAME_CHANGE, "tst2")));
gQueue.invoke();
await queueFinished;
// Tests beyond this point use await rather than eventQueue.
const describedBy = getNode("describedBy");
const description = getNode("description");
let descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Changing text of aria-describedby target");
description.textContent = "d2";
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Adding node to aria-describedby target");
description.innerHTML = '<p id="descriptionChild">d3</p>';
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
describedBy
);
info("Changing text of aria-describedby target's child");
getNode("descriptionChild").textContent = "d4";
await descChanged;
const lateDescribedBy = getNode("lateDescribedBy");
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
lateDescribedBy
);
info("Setting aria-describedby");
lateDescribedBy.setAttribute("aria-describedby", "lateDescription");
await descChanged;
descChanged = PromEvents.waitForEvent(
EVENT_DESCRIPTION_CHANGE,
lateDescribedBy
);
info("Changing text of late aria-describedby target's child");
getNode("lateDescriptionChild").textContent = "d2";
await descChanged;
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>
<button id="tst1">btn1</button>
<button id="tst2">btn2</button>
<div id="describedBy" aria-describedby="description"></div>
<div id="description">d1</div>
<div id="lateDescribedBy"></div>
<div id="lateDescription"><p id="lateDescriptionChild">d1</p></div>
<div id="eventdump"></div>
</body>
</html>
|
