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
186
187
188
189
190
191
192
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/* import-globals-from ../../mochitest/role.js */
loadScripts({ name: "role.js", dir: MOCHITESTS_DIR });
const IMG_ID = "img";
const ALT_TEXT = "some-text";
const ARIA_LABEL = "some-label";
// Verify that granting alt text adds the graphic accessible.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt=""/>`,
async function (browser, accDoc) {
// Test initial state; the img has empty alt text so it should not be in the tree.
const acc = findAccessibleChildByID(accDoc, IMG_ID);
ok(!acc, "Image has no Accessible");
// Add the alt text. The graphic should have been inserted into the tree.
info(`Adding alt text "${ALT_TEXT}" to img id '${IMG_ID}'`);
const shown = waitForEvent(EVENT_SHOW, IMG_ID);
await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT);
await shown;
let tree = {
role: ROLE_GRAPHIC,
name: ALT_TEXT,
children: [],
};
testAccessibleTree(acc, tree);
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that the graphic accessible exists even with a missing alt attribute.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png"/>`,
async function (browser, accDoc) {
// Test initial state; the img has no alt attribute so the name is empty.
const acc = findAccessibleChildByID(accDoc, IMG_ID);
let tree = {
role: ROLE_GRAPHIC,
name: null,
children: [],
};
testAccessibleTree(acc, tree);
// Add the alt text. The graphic should still be present in the tree.
info(`Adding alt attribute with text "${ALT_TEXT}" to id ${IMG_ID}`);
const shown = waitForEvent(EVENT_NAME_CHANGE, IMG_ID);
await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT);
await shown;
tree = {
role: ROLE_GRAPHIC,
name: ALT_TEXT,
children: [],
};
testAccessibleTree(acc, tree);
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that removing alt text removes the graphic accessible.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt="${ALT_TEXT}"/>`,
async function (browser, accDoc) {
// Test initial state; the img has alt text so it should be in the tree.
let acc = findAccessibleChildByID(accDoc, IMG_ID);
let tree = {
role: ROLE_GRAPHIC,
name: ALT_TEXT,
children: [],
};
testAccessibleTree(acc, tree);
// Set the alt text empty. The graphic should have been removed from the tree.
info(`Setting empty alt text for img id ${IMG_ID}`);
const hidden = waitForEvent(EVENT_HIDE, acc);
await invokeContentTask(browser, [IMG_ID, "alt", ""], (id, attr, value) => {
let elm = content.document.getElementById(id);
elm.setAttribute(attr, value);
});
await hidden;
acc = findAccessibleChildByID(accDoc, IMG_ID);
ok(!acc, "Image has no Accessible");
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that the presence of an aria-label creates an accessible, even if
// there is no alt text.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" aria-label="${ARIA_LABEL}" alt=""/>`,
async function (browser, accDoc) {
// Test initial state; the img has empty alt text, but it does have an
// aria-label, so it should be in the tree.
const acc = findAccessibleChildByID(accDoc, IMG_ID);
let tree = {
role: ROLE_GRAPHIC,
name: ARIA_LABEL,
children: [],
};
testAccessibleTree(acc, tree);
// Add the alt text. The graphic should still be in the tree.
info(`Adding alt text "${ALT_TEXT}" to img id '${IMG_ID}'`);
await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT);
tree = {
role: ROLE_GRAPHIC,
name: ARIA_LABEL,
children: [],
};
testAccessibleTree(acc, tree);
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that the presence of a click listener results in the graphic
// accessible's presence in the tree.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt=""/>`,
async function (browser, accDoc) {
// Add a click listener to the img element.
info(`Adding click listener to img id '${IMG_ID}'`);
const shown = waitForEvent(EVENT_SHOW, IMG_ID);
await invokeContentTask(browser, [IMG_ID], id => {
content.document.getElementById(id).addEventListener("click", () => {});
});
await shown;
// Test initial state; the img has empty alt text, but it does have a click
// listener, so it should be in the tree.
let acc = findAccessibleChildByID(accDoc, IMG_ID);
let tree = {
role: ROLE_GRAPHIC,
name: null,
children: [],
};
testAccessibleTree(acc, tree);
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that the presentation role prevents creation of the graphic accessible.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" role="presentation"/>`,
async function (browser, accDoc) {
// Test initial state; the img is presentational and should not be in the tree.
const acc = findAccessibleChildByID(accDoc, IMG_ID);
ok(!acc, "Image has no Accessible");
// Add some alt text. There should still be no accessible for the img in the tree.
info(`Adding alt attribute with text "${ALT_TEXT}" to id ${IMG_ID}`);
await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT);
ok(!acc, "Image has no Accessible");
// Remove the presentation role. The accessible should be created.
info(`Removing presentation role from img id ${IMG_ID}`);
const shown = waitForEvent(EVENT_SHOW, IMG_ID);
await invokeSetAttribute(browser, IMG_ID, "role", "");
await shown;
let tree = {
role: ROLE_GRAPHIC,
name: ALT_TEXT,
children: [],
};
testAccessibleTree(acc, tree);
},
{ chrome: true, iframe: true, remoteIframe: true }
);
// Verify that setting empty alt text on a hidden image does not crash.
// See Bug 1799208 for more info.
addAccessibleTask(
`<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" hidden/>`,
async function (browser, accDoc) {
// Test initial state; should be no accessible since img is hidden.
const acc = findAccessibleChildByID(accDoc, IMG_ID);
ok(!acc, "Image has no Accessible");
// Add empty alt text. We shouldn't crash.
info(`Adding empty alt text "" to img id '${IMG_ID}'`);
await invokeContentTask(browser, [IMG_ID, "alt", ""], (id, attr, value) => {
let elm = content.document.getElementById(id);
elm.setAttribute(attr, value);
});
ok(true, "Setting empty alt text on a hidden image did not crash");
},
{ chrome: true, iframe: true, remoteIframe: true }
);
|
