testaro 60.11.0 → 60.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/UPGRADES.md +68 -0
- package/package.json +1 -1
- package/procs/doTestAct.js +1 -1
- package/procs/screenShot.js +1 -1
- package/procs/testaro.js +116 -6
- package/run.js +1 -1
- package/testaro/adbID.js +1 -3
- package/testaro/altScheme.js +1 -3
- package/testaro/captionLoc.js +1 -3
- package/testaro/datalistRef.js +1 -1
- package/testaro/embAc.js +1 -1
- package/testaro/focAndOp.js +144 -0
- package/testaro/focInd.js +2 -3
- package/testaro/focVis.js +23 -35
- package/testaro/hover-draft0.js +110 -0
- package/testaro/hover-draft1.js +185 -0
- package/testaro/hover-draft2.js +183 -0
- package/testaro/hover-draft3.js +143 -0
- package/testaro/hover-orig.js +109 -0
- package/testaro/hover.js +66 -58
- package/testaro/lineHeight.js +1 -3
- package/testaro/miniText.js +1 -1
- package/tests/testaro.js +24 -24
- package/procs/operable.js +0 -108
- package/testaro/focOp.js +0 -75
- package/testaro/miniText-orig.js +0 -62
- package/testaro/opFoc.js +0 -76
package/UPGRADES.md
CHANGED
|
@@ -3239,3 +3239,71 @@ Given your goal to move on with [testaro](cci:7://file:///Users/pool/Users/pool/
|
|
|
3239
3239
|
- Plan separately for a future **element-matching module** that consumes all tools’ outputs and decides “these instances refer to the same DOM element”.
|
|
3240
3240
|
|
|
3241
3241
|
That way, you get immediate performance and implementation wins in [testaro](cci:7://file:///Users/pool/Users/pool/Documents/Topics/work/testaro:0:0-0:0), without locking yourself into the fragile assumption that “XPath strings must match exactly across all tools.
|
|
3242
|
+
|
|
3243
|
+
## Sampling and performance
|
|
3244
|
+
|
|
3245
|
+
Refactoring Testaro tests to eliminate sampling of elements began in December 2025. Initial results suggest that refactoring decreases elapsed test times despite the fact that all applicable elements are examined rather than only a sample.
|
|
3246
|
+
|
|
3247
|
+
In a run by the Kilotest server on the [home page of the Open Source Collective](https://opencollective.com/opensource), with about 2700 visible elements,the elapsed times of Testaro tests were:
|
|
3248
|
+
|
|
3249
|
+
```json
|
|
3250
|
+
"ruleTestTimes": {
|
|
3251
|
+
"allCaps": 11,
|
|
3252
|
+
"opFoc": 10,
|
|
3253
|
+
"allSlanted": 9,
|
|
3254
|
+
"hovInd": 9,
|
|
3255
|
+
"focOp": 8,
|
|
3256
|
+
"targetSmall": 7,
|
|
3257
|
+
"focAll": 7,
|
|
3258
|
+
"focVis": 6,
|
|
3259
|
+
"distortion": 5,
|
|
3260
|
+
"linkAmb": 5,
|
|
3261
|
+
"titledEl": 5,
|
|
3262
|
+
"zIndex": 5,
|
|
3263
|
+
"targetTiny": 4,
|
|
3264
|
+
"shoot1": 4,
|
|
3265
|
+
"linkTitle": 3,
|
|
3266
|
+
"hover": 3,
|
|
3267
|
+
"shoot0": 2,
|
|
3268
|
+
"adbID": 2,
|
|
3269
|
+
"linkUl": 2,
|
|
3270
|
+
"buttonMenu": 2,
|
|
3271
|
+
"focInd": 2,
|
|
3272
|
+
"tabNav": 2,
|
|
3273
|
+
"dupAtt": 0,
|
|
3274
|
+
"imageLink": 1,
|
|
3275
|
+
"labClash": 1,
|
|
3276
|
+
"allHidden": 0,
|
|
3277
|
+
"altScheme": 0,
|
|
3278
|
+
"autocomplete": 0,
|
|
3279
|
+
"bulk": 0,
|
|
3280
|
+
"captionLoc": 0,
|
|
3281
|
+
"datalistRef": 0,
|
|
3282
|
+
"docType": 0,
|
|
3283
|
+
"embAc": 0,
|
|
3284
|
+
"headEl": 0,
|
|
3285
|
+
"headingAmb": 0,
|
|
3286
|
+
"hr": 0,
|
|
3287
|
+
"legendLoc": 0,
|
|
3288
|
+
"lineHeight": 0,
|
|
3289
|
+
"linkExt": 0,
|
|
3290
|
+
"linkOldAtt": 0,
|
|
3291
|
+
"linkTo": 0,
|
|
3292
|
+
"miniText": 0,
|
|
3293
|
+
"nonTable": 0,
|
|
3294
|
+
"optRoleSel": 0,
|
|
3295
|
+
"phOnly": 0,
|
|
3296
|
+
"pseudoP": 0,
|
|
3297
|
+
"radioSet": 0,
|
|
3298
|
+
"role": 0,
|
|
3299
|
+
"secHeading": 0,
|
|
3300
|
+
"styleDiff": 0,
|
|
3301
|
+
"textSem": 0
|
|
3302
|
+
}
|
|
3303
|
+
```
|
|
3304
|
+
|
|
3305
|
+
All of the tests with elapsed times longer than 2 seconds were not yet refactored. Some of the refactored tests applied `checkVisibility` to all `body` descendant elements.
|
|
3306
|
+
|
|
3307
|
+
Credit for the speed improvement in refactored tests is apparently owed to the encapsulation of the entire test logic in a browser function, versus the repeated element-by-element execution of the same logic in Node.js with Playwright methods.
|
|
3308
|
+
|
|
3309
|
+
Evidence for this hypothesis is provided by the change in elapsed time after refactoring of the `focOp` and `opFoc` tests. These two tests consumed 18 seconds before the refactoring. The refactoring combined them into a single `focAndOp` test with functionality equivalent to both original tests. The refactored test on the same target consumed 2 seconds, even though it reported and itemized 223 violations.
|
package/package.json
CHANGED
package/procs/doTestAct.js
CHANGED
|
@@ -43,7 +43,7 @@ const tmpDir = os.tmpdir();
|
|
|
43
43
|
|
|
44
44
|
// FUNCTIONS
|
|
45
45
|
|
|
46
|
-
// Performs the tests of
|
|
46
|
+
// Performs the tests of an act.
|
|
47
47
|
const doTestAct = async actIndex => {
|
|
48
48
|
const reportPath = `${tmpDir}/report.json`;
|
|
49
49
|
// Get the report from the temporary directory.
|
package/procs/screenShot.js
CHANGED
package/procs/testaro.js
CHANGED
|
@@ -90,7 +90,7 @@ const getRuleResult = exports.getRuleResult = async (
|
|
|
90
90
|
// If itemization is required:
|
|
91
91
|
if (withItems) {
|
|
92
92
|
// Get the bounding box of the element.
|
|
93
|
-
const {tagName,id, location, excerpt} = elData;
|
|
93
|
+
const {tagName, id, location, excerpt} = elData;
|
|
94
94
|
const box = location.type === 'box' ? location.spec : await boxOf(loc);
|
|
95
95
|
// Add a standard instance to the result.
|
|
96
96
|
standardInstances.push({
|
|
@@ -169,7 +169,7 @@ exports.doTest = async (
|
|
|
169
169
|
getBadWhatString
|
|
170
170
|
) => {
|
|
171
171
|
// Return totals and standard instances for the rule.
|
|
172
|
-
return await page.evaluate(args => {
|
|
172
|
+
return await page.evaluate(async args => {
|
|
173
173
|
const [
|
|
174
174
|
withItems,
|
|
175
175
|
ruleID,
|
|
@@ -186,21 +186,30 @@ exports.doTest = async (
|
|
|
186
186
|
// Get a violation function.
|
|
187
187
|
const getBadWhat = eval(`(${getBadWhatString})`);
|
|
188
188
|
// For each candidate:
|
|
189
|
-
|
|
190
|
-
const violationWhat = getBadWhat(
|
|
189
|
+
for (const candidate of candidates) {
|
|
190
|
+
const violationWhat = await getBadWhat(candidate);
|
|
191
191
|
// If it violates the rule:
|
|
192
192
|
if (violationWhat) {
|
|
193
193
|
// Increment the violation count.
|
|
194
194
|
violationCount++;
|
|
195
195
|
// If itemization is required:
|
|
196
196
|
if (withItems) {
|
|
197
|
+
const violationWhatStart = violationWhat.slice(0, 2);
|
|
198
|
+
let ruleSeverity = severity;
|
|
199
|
+
let ruleWhat = violationWhat
|
|
200
|
+
// If this violation has a custom severity:
|
|
201
|
+
if (/[0-3]:/.test(violationWhatStart)) {
|
|
202
|
+
// Get it and remove it from the violation description.
|
|
203
|
+
ruleSeverity = Number(violationWhat[0]);
|
|
204
|
+
ruleWhat = violationWhat.slice(2);
|
|
205
|
+
}
|
|
197
206
|
// Add an instance to the instances.
|
|
198
207
|
instances.push(
|
|
199
|
-
window.getInstance(
|
|
208
|
+
window.getInstance(candidate, ruleID, ruleWhat, 1, ruleSeverity)
|
|
200
209
|
);
|
|
201
210
|
}
|
|
202
211
|
}
|
|
203
|
-
}
|
|
212
|
+
}
|
|
204
213
|
// If there are any violations and itemization is not required:
|
|
205
214
|
if (violationCount && ! withItems) {
|
|
206
215
|
// Add a summary instance to the instances.
|
|
@@ -224,3 +233,104 @@ exports.doTest = async (
|
|
|
224
233
|
]
|
|
225
234
|
);
|
|
226
235
|
};
|
|
236
|
+
// Returns a result from a basic test.
|
|
237
|
+
exports.getBasicResult = async (
|
|
238
|
+
page, withItems, ruleID, ordinalSeverity, summaryTagName, whats, data, violations
|
|
239
|
+
) => {
|
|
240
|
+
// If the test was prevented:
|
|
241
|
+
if (data.prevented) {
|
|
242
|
+
// Return this.
|
|
243
|
+
return {
|
|
244
|
+
data,
|
|
245
|
+
totals: [0, 0, 0, 0],
|
|
246
|
+
standardInstances: []
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
// Otherwise, i.e. if the test was not prevented:
|
|
250
|
+
const totals = [0, 0, 0, 0];
|
|
251
|
+
totals[ordinalSeverity] = violations.length;
|
|
252
|
+
const standardInstances = [];
|
|
253
|
+
// If itemization is required:
|
|
254
|
+
if (withItems) {
|
|
255
|
+
// For each violation:
|
|
256
|
+
for (const violation of violations) {
|
|
257
|
+
const {loc, what} = violation;
|
|
258
|
+
const elData = await getLocatorData(loc);
|
|
259
|
+
// Get the bounding box of the element.
|
|
260
|
+
const {tagName, id, location, excerpt} = elData;
|
|
261
|
+
const box = location.type === 'box' ? location.spec : await boxOf(loc);
|
|
262
|
+
// Add a standard instance to the instances.
|
|
263
|
+
standardInstances.push({
|
|
264
|
+
ruleID,
|
|
265
|
+
what,
|
|
266
|
+
ordinalSeverity,
|
|
267
|
+
tagName,
|
|
268
|
+
id,
|
|
269
|
+
location,
|
|
270
|
+
excerpt,
|
|
271
|
+
boxID: boxToString(box),
|
|
272
|
+
pathID: tagName === 'HTML' ? '/html' : await xPath(loc)
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
// Otherwise, i.e. if itemization is not required:
|
|
277
|
+
else {
|
|
278
|
+
// Add a summary instance to the instances.
|
|
279
|
+
standardInstances.push({
|
|
280
|
+
ruleID,
|
|
281
|
+
what: whats,
|
|
282
|
+
ordinalSeverity,
|
|
283
|
+
summaryTagName,
|
|
284
|
+
id: '',
|
|
285
|
+
location: {},
|
|
286
|
+
excerpt: '',
|
|
287
|
+
boxID: '',
|
|
288
|
+
pathID: ''
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
// Return the result.
|
|
292
|
+
return {
|
|
293
|
+
data,
|
|
294
|
+
totals,
|
|
295
|
+
standardInstances
|
|
296
|
+
};
|
|
297
|
+
};
|
|
298
|
+
// Returns an awaited change in a visible element count.
|
|
299
|
+
exports.getVisibleCountChange = async (
|
|
300
|
+
rootLoc, elementCount0, timeLimit = 400, settleInterval = 75
|
|
301
|
+
) => {
|
|
302
|
+
const startTime = Date.now();
|
|
303
|
+
let timeout;
|
|
304
|
+
let settleChecker;
|
|
305
|
+
let elementCount1 = elementCount0;
|
|
306
|
+
// Set a time limit on the change.
|
|
307
|
+
const timeoutPromise = new Promise(resolve => {
|
|
308
|
+
timeout = setTimeout(() => {
|
|
309
|
+
clearInterval(settleChecker);
|
|
310
|
+
resolve();
|
|
311
|
+
}, timeLimit);
|
|
312
|
+
});
|
|
313
|
+
// Until the time limit expires, periodically:
|
|
314
|
+
const settlePromise = new Promise(resolve => {
|
|
315
|
+
settleChecker = setInterval(async () => {
|
|
316
|
+
const visiblesLoc = await rootLoc.locator('*:visible');
|
|
317
|
+
// Get the count.
|
|
318
|
+
elementCount1 = await visiblesLoc.count();
|
|
319
|
+
// If the count has changed:
|
|
320
|
+
if (elementCount1 !== elementCount0) {
|
|
321
|
+
// Stop.
|
|
322
|
+
clearTimeout(timeout);
|
|
323
|
+
clearInterval(settleChecker);
|
|
324
|
+
resolve();
|
|
325
|
+
}
|
|
326
|
+
}, settleInterval);
|
|
327
|
+
});
|
|
328
|
+
// When a change occurs or the time limit expires:
|
|
329
|
+
await Promise.race([timeoutPromise, settlePromise]);
|
|
330
|
+
const elapsedTime = Math.round(Date.now() - startTime);
|
|
331
|
+
// Return the change.
|
|
332
|
+
return {
|
|
333
|
+
change: elementCount1 - elementCount0,
|
|
334
|
+
elapsedTime
|
|
335
|
+
};
|
|
336
|
+
};
|
package/run.js
CHANGED
|
@@ -98,7 +98,7 @@ const timeLimits = {
|
|
|
98
98
|
alfa: 20,
|
|
99
99
|
ed11y: 30,
|
|
100
100
|
ibm: 30,
|
|
101
|
-
testaro:
|
|
101
|
+
testaro: 200 + Math.round(6 * waits / 1000)
|
|
102
102
|
};
|
|
103
103
|
// Timeout multiplier.
|
|
104
104
|
const timeoutMultiplier = Number.parseFloat(process.env.TIMEOUT_MULTIPLIER) || 1;
|
package/testaro/adbID.js
CHANGED
|
@@ -40,7 +40,6 @@ const {doTest} = require('../procs/testaro');
|
|
|
40
40
|
|
|
41
41
|
// Runs the test and returns the result.
|
|
42
42
|
exports.reporter = async (page, withItems) => {
|
|
43
|
-
// Define a violation function for execution in the browser.
|
|
44
43
|
const getBadWhat = element => {
|
|
45
44
|
// Get the IDs in the aria-describedby attribute of the element.
|
|
46
45
|
const IDs = element.getAttribute('aria-describedby').trim().split(/\s+/).filter(Boolean);
|
|
@@ -74,8 +73,7 @@ exports.reporter = async (page, withItems) => {
|
|
|
74
73
|
}
|
|
75
74
|
};
|
|
76
75
|
const whats = 'Elements have aria-describedby attributes with missing or invalid id values';
|
|
77
|
-
|
|
78
|
-
return doTest(
|
|
76
|
+
return await doTest(
|
|
79
77
|
page, withItems, 'adbID', '[aria-describedby]', whats, 3, null, getBadWhat.toString()
|
|
80
78
|
);
|
|
81
79
|
};
|
package/testaro/altScheme.js
CHANGED
|
@@ -37,7 +37,6 @@ const {doTest} = require('../procs/testaro');
|
|
|
37
37
|
|
|
38
38
|
// Runs the test and returns the result.
|
|
39
39
|
exports.reporter = async (page, withItems) => {
|
|
40
|
-
// Define a violation function for execution in the browser.
|
|
41
40
|
const getBadWhat = element => {
|
|
42
41
|
// Get the value of the alt attribute of the element.
|
|
43
42
|
const alt = (element.getAttribute('alt') || '').trim();
|
|
@@ -56,8 +55,7 @@ exports.reporter = async (page, withItems) => {
|
|
|
56
55
|
}
|
|
57
56
|
};
|
|
58
57
|
const whats = 'img elements have alt attributes with URL or filename values';
|
|
59
|
-
|
|
60
|
-
return doTest(
|
|
58
|
+
return await doTest(
|
|
61
59
|
page, withItems, 'altScheme', 'img[alt]', whats, 1, 'IMG', getBadWhat.toString()
|
|
62
60
|
);
|
|
63
61
|
};
|
package/testaro/captionLoc.js
CHANGED
|
@@ -36,7 +36,6 @@ const {doTest} = require('../procs/testaro');
|
|
|
36
36
|
// FUNCTIONS
|
|
37
37
|
|
|
38
38
|
exports.reporter = async (page, withItems) => {
|
|
39
|
-
// Define a violation function for execution in the browser.
|
|
40
39
|
const getBadWhat = element => {
|
|
41
40
|
const parent = element.parentElement;
|
|
42
41
|
// If the element is not the first child of a table element:
|
|
@@ -46,8 +45,7 @@ exports.reporter = async (page, withItems) => {
|
|
|
46
45
|
}
|
|
47
46
|
};
|
|
48
47
|
const whats = 'caption elements are not the first children of table elements';
|
|
49
|
-
|
|
50
|
-
return doTest(
|
|
48
|
+
return await doTest(
|
|
51
49
|
page, withItems, 'captionLoc', 'caption', whats, 3, 'CAPTION', getBadWhat.toString()
|
|
52
50
|
);
|
|
53
51
|
};
|
package/testaro/datalistRef.js
CHANGED
|
@@ -61,7 +61,7 @@ exports.reporter = async (page, withItems) => {
|
|
|
61
61
|
}
|
|
62
62
|
};
|
|
63
63
|
const whats = 'list attributes of input elements are empty or IDs of no or non-datalist elements';
|
|
64
|
-
return doTest(
|
|
64
|
+
return await doTest(
|
|
65
65
|
page, withItems, 'datalistRef', 'input[list]', whats, 3, 'INPUT', getBadWhat.toString()
|
|
66
66
|
);
|
|
67
67
|
};
|
package/testaro/embAc.js
CHANGED
|
@@ -48,5 +48,5 @@ exports.reporter = async (page, withItems) => {
|
|
|
48
48
|
.map(tag => `a ${tag}, button ${tag}`)
|
|
49
49
|
.join(', ');
|
|
50
50
|
const whats = 'interactive elements are embedded in links or buttons';
|
|
51
|
-
return doTest(page, withItems, 'embAc', selector, whats, 2, null, getBadWhat.toString());
|
|
51
|
+
return await doTest(page, withItems, 'embAc', selector, whats, 2, null, getBadWhat.toString());
|
|
52
52
|
};
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
/*
|
|
2
|
+
© 2021–2024 CVS Health and/or one of its affiliates. All rights reserved.
|
|
3
|
+
© 2025 Jonathan Robert Pool. All rights reserved.
|
|
4
|
+
|
|
5
|
+
MIT License
|
|
6
|
+
|
|
7
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
8
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
9
|
+
in the Software without restriction, including without limitation the rights
|
|
10
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
11
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
12
|
+
furnished to do so, subject to the following conditions:
|
|
13
|
+
|
|
14
|
+
The above copyright notice and this permission notice shall be included in all
|
|
15
|
+
copies or substantial portions of the Software.
|
|
16
|
+
|
|
17
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
18
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
19
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
20
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
21
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
22
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
23
|
+
SOFTWARE.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
focAndOp
|
|
28
|
+
Related to Tenon rule 190.
|
|
29
|
+
|
|
30
|
+
This test reports discrepancies between Tab-focusability and operability. The standard practice
|
|
31
|
+
is to make focusable elements operable and operable elements focusable. If focusable elements are
|
|
32
|
+
not operable, users are likely to be surprised that nothing happens when they try to operate such
|
|
33
|
+
elements. Conversely, if operable elements are not focusable, users who navigate with a
|
|
34
|
+
keyboard are prevented from operating those elements. The test considers an element
|
|
35
|
+
Tab-focusable if its tabIndex property has the value 0. The test considers an element operable if
|
|
36
|
+
it has a non-inherited pointer cursor and is not a 'LABEL' element, has an operable tag name, has
|
|
37
|
+
an interactive explicit role, or has an 'onclick' attribute.
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
// IMPORTS
|
|
41
|
+
|
|
42
|
+
const {doTest} = require('../procs/testaro');
|
|
43
|
+
|
|
44
|
+
// FUNCTIONS
|
|
45
|
+
|
|
46
|
+
// Runs the test and returns the result.
|
|
47
|
+
exports.reporter = async (page, withItems) => {
|
|
48
|
+
const getBadWhat = element => {
|
|
49
|
+
// Get whether the element is visible.
|
|
50
|
+
const isVisible = element.checkVisibility({
|
|
51
|
+
contentVisibilityAuto: true,
|
|
52
|
+
opacityProperty: true,
|
|
53
|
+
visibilityProperty: true
|
|
54
|
+
});
|
|
55
|
+
// If so:
|
|
56
|
+
if (isVisible) {
|
|
57
|
+
// Get whether it is focusable.
|
|
58
|
+
const isFocusable = element.tabIndex === 0;
|
|
59
|
+
// Get the operable tagnames.
|
|
60
|
+
const opTags = new Set(['A', 'BUTTON', 'IFRAME', 'INPUT','OPTION', 'SELECT', 'TEXTAREA']);
|
|
61
|
+
// Get the operable roles.
|
|
62
|
+
const opRoles = new Set([
|
|
63
|
+
'button',
|
|
64
|
+
'checkbox',
|
|
65
|
+
'combobox',
|
|
66
|
+
'composite',
|
|
67
|
+
'grid',
|
|
68
|
+
'gridcell',
|
|
69
|
+
'input',
|
|
70
|
+
'link',
|
|
71
|
+
'listbox',
|
|
72
|
+
'menu',
|
|
73
|
+
'menubar',
|
|
74
|
+
'menuitem',
|
|
75
|
+
'menuitemcheckbox',
|
|
76
|
+
'option',
|
|
77
|
+
'radio',
|
|
78
|
+
'radiogroup',
|
|
79
|
+
'scrollbar',
|
|
80
|
+
'searchbox',
|
|
81
|
+
'select',
|
|
82
|
+
'slider',
|
|
83
|
+
'spinbutton',
|
|
84
|
+
'switch',
|
|
85
|
+
'tab',
|
|
86
|
+
'tablist',
|
|
87
|
+
'textbox',
|
|
88
|
+
'tree',
|
|
89
|
+
'treegrid',
|
|
90
|
+
'treeitem',
|
|
91
|
+
'widget',
|
|
92
|
+
]);
|
|
93
|
+
// Initialize the operabilities of the element.
|
|
94
|
+
const opHow = [];
|
|
95
|
+
let hasPointer = false;
|
|
96
|
+
// If the element is not a label:
|
|
97
|
+
if (element.tagName !== 'LABEL') {
|
|
98
|
+
const styleDec = window.getComputedStyle(element);
|
|
99
|
+
hasPointer = styleDec.cursor === 'pointer';
|
|
100
|
+
// If it has a pointer cursor:
|
|
101
|
+
if (hasPointer) {
|
|
102
|
+
// Neutralize the cursor style of the parent element of the element.
|
|
103
|
+
element.parentElement.style.cursor = 'default';
|
|
104
|
+
// Get whether, after this, the element still has a pointer cursor.
|
|
105
|
+
hasPointer = styleDec.cursor === 'pointer';
|
|
106
|
+
// Add this to the operabilities of the element.
|
|
107
|
+
opHow.push('pointer cursor');
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
// If the element has a click event listener:
|
|
111
|
+
if (element.onclick) {
|
|
112
|
+
// Add this to the operabilities.
|
|
113
|
+
opHow.push('click listener');
|
|
114
|
+
}
|
|
115
|
+
// If the element has an operable explicit role:
|
|
116
|
+
const role = element.getAttribute('role');
|
|
117
|
+
if (opRoles.has(role)) {
|
|
118
|
+
// Add this to the operabilities.
|
|
119
|
+
opHow.push(`role ${role}`);
|
|
120
|
+
}
|
|
121
|
+
// If the element has an operable tagname:
|
|
122
|
+
const tagName = element.tagName;
|
|
123
|
+
if (opTags.has(tagName)) {
|
|
124
|
+
// Add this to the operabilities.
|
|
125
|
+
opHow.push(`tagname ${tagName}`);
|
|
126
|
+
}
|
|
127
|
+
const isOperable = opHow.length > 0;
|
|
128
|
+
// If the element is focusable but not operable:
|
|
129
|
+
if (isFocusable && ! isOperable) {
|
|
130
|
+
// Return a severity and violation description.
|
|
131
|
+
return '2:Element is Tab-focusable but not operable';
|
|
132
|
+
}
|
|
133
|
+
// Otherwise, if it is operable but not focusable:
|
|
134
|
+
else if (isOperable && ! isFocusable) {
|
|
135
|
+
// Return a severity and violation description.
|
|
136
|
+
return `3:Element is operable (${opHow.join(', ')}) but not Tab-focusable`;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const whats = 'Elements are Tab-focusable but not operable or vice versa';
|
|
141
|
+
return await doTest(
|
|
142
|
+
page, withItems, 'focAndOp', 'body *', whats, 2, null, getBadWhat.toString()
|
|
143
|
+
);
|
|
144
|
+
};
|
package/testaro/focInd.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
© 2021–2023 CVS Health and/or one of its affiliates. All rights reserved.
|
|
3
|
+
© 2025 Jonathan Robert Pool. All rights reserved.
|
|
3
4
|
|
|
4
5
|
MIT License
|
|
5
6
|
|
|
@@ -49,7 +50,6 @@ const {doTest} = require('../procs/testaro');
|
|
|
49
50
|
|
|
50
51
|
// Runs the test and returns the result.
|
|
51
52
|
exports.reporter = async (page, withItems) => {
|
|
52
|
-
// Define a violation function for execution in the browser.
|
|
53
53
|
const getBadWhat = element => {
|
|
54
54
|
// Get whether the element is visible.
|
|
55
55
|
const isVisible = element.checkVisibility({
|
|
@@ -107,8 +107,7 @@ exports.reporter = async (page, withItems) => {
|
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
const whats = 'Elements fail to have standard focus indicators';
|
|
110
|
-
|
|
111
|
-
return doTest(
|
|
110
|
+
return await doTest(
|
|
112
111
|
page, withItems, 'focInd', 'body *', whats, 1, null, getBadWhat.toString()
|
|
113
112
|
);
|
|
114
113
|
};
|
package/testaro/focVis.js
CHANGED
|
@@ -29,45 +29,33 @@
|
|
|
29
29
|
This test reports links that are at least partly off the display when focused.
|
|
30
30
|
*/
|
|
31
31
|
|
|
32
|
-
//
|
|
32
|
+
// IMPORTS
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
const {init, getRuleResult} = require('../procs/testaro');
|
|
34
|
+
const {doTest} = require('../procs/testaro');
|
|
36
35
|
|
|
37
|
-
//
|
|
36
|
+
// FUNCTIONS
|
|
38
37
|
|
|
39
|
-
// Runs the test and returns the result.
|
|
40
38
|
exports.reporter = async (page, withItems) => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
//
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
param = 'above and to the left of';
|
|
39
|
+
const getBadWhat = element => {
|
|
40
|
+
const isVisible = element.checkVisibility({
|
|
41
|
+
contentVisibilityAuto: true,
|
|
42
|
+
opacityProperty: true,
|
|
43
|
+
visibilityProperty: true
|
|
44
|
+
});
|
|
45
|
+
// If the element is visible:
|
|
46
|
+
if (isVisible) {
|
|
47
|
+
// Focus it.
|
|
48
|
+
element.focus();
|
|
49
|
+
const box = element.getBoundingClientRect();
|
|
50
|
+
// If it violates the rule:
|
|
51
|
+
if (box.x < 0 || box.y < 0) {
|
|
52
|
+
// Return a violation description.
|
|
53
|
+
return 'Upper left corner of the element is above or to the left of the display';
|
|
57
54
|
}
|
|
58
|
-
else if (isBad[0]) {
|
|
59
|
-
param = 'to the left of';
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
param = 'above';
|
|
63
|
-
}
|
|
64
|
-
all.locs.push([loc, param]);
|
|
65
55
|
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
'
|
|
70
|
-
|
|
71
|
-
];
|
|
72
|
-
return await getRuleResult(withItems, all, 'focVis', whats, 2);
|
|
56
|
+
};
|
|
57
|
+
const whats = 'Visible links are above or to the left of the display';
|
|
58
|
+
return await doTest(
|
|
59
|
+
page, withItems, 'focVis', 'a', whats, 2, 'A', getBadWhat.toString()
|
|
60
|
+
);
|
|
73
61
|
};
|