forked from elastic/eui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patha11y-testing.js
122 lines (106 loc) · 3.58 KB
/
a11y-testing.js
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
const chalk = require('chalk');
const puppeteer = require('puppeteer');
const { AxePuppeteer } = require('@axe-core/puppeteer');
const docsPages = async (root, page) => {
const pagesToSkip = [
`${root}#/layout/page`, // Has duplicate `<main>` element
`${root}#/layout/page-header`, // Has duplicate `<header>` element
`${root}#/tabular-content/tables`,
`${root}#/tabular-content/in-memory-tables`,
`${root}#/display/aspect-ratio`,
`${root}#/forms/combo-box`,
`${root}#/forms/color-selection`,
`${root}#/forms/date-picker`,
`${root}#/forms/super-date-picker`,
`${root}#/tabular-content/data-grid`,
`${root}#/tabular-content/data-grid-in-memory-settings`,
`${root}#/tabular-content/data-grid-schemas-and-popovers`,
`${root}#/tabular-content/data-grid-focus`,
`${root}#/tabular-content/data-grid-styling-and-control`,
`${root}#/tabular-content/data-grid-control-columns`,
`${root}#/tabular-content/data-grid-footer-row`,
`${root}#/tabular-content/data-grid-virtualization`,
`${root}#/tabular-content/data-grid-row-height-options`,
];
return [
root,
...(await page.$$eval('nav a', (anchors) => anchors.map((a) => a.href))),
].filter((link) => !pagesToSkip.includes(link));
};
const printResult = (result) =>
console.log(`[${result.id}]: ${result.description}
Help: ${chalk.blue(result.helpUrl)}
Elements:
- ${result.nodes.map((node) => node.target).join('\n - ')}`);
(async () => {
let totalViolationsCount = 0;
let root = 'http://localhost:9999/';
let browser;
let page;
try {
browser = await puppeteer.launch({ args: ['--no-sandbox'] });
page = await browser.newPage();
await page.setBypassCSP(true);
} catch (e) {
console.log(chalk.red('Failed to setup puppeteer'));
console.log(e);
process.exit(1);
}
try {
await page.goto(root);
} catch (e) {
root = 'http://localhost:8030/';
try {
await page.goto(root);
} catch (e) {
console.log(
chalk.red(
'No local server found. Expecting localhost:9999 or localhost:8030 to resolve.'
)
);
process.exit(1);
}
}
const links = await docsPages(root, page);
for (const link of links) {
await page.goto(link);
const { violations } = await new AxePuppeteer(page)
.configure({
rules: [
{ id: 'color-contrast', enabled: false },
{
id: 'scrollable-region-focusable',
selector: '[data-skip-axe="scrollable-region-focusable"]',
},
{
// can remove after https://github.com/dequelabs/axe-core/issues/2690 is resolved
id: 'region',
selector: 'iframe, #player,',
},
],
})
.analyze();
if (violations.length > 0) {
totalViolationsCount += violations.length;
const pageName = link.length > 24 ? link.substr(2) : 'the home page';
console.log(chalk.red(`Errors on ${pageName}`));
}
violations.forEach((result) => {
printResult(result);
});
}
await page.close();
await browser.close();
if (totalViolationsCount > 0) {
const errorsCount = chalk.red(
`${totalViolationsCount} accessibility errors`
);
console.log(`${errorsCount}
Install axe for Chrome or Firefox to debug:
Chrome: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/`);
process.exit(1);
} else {
console.log(chalk.green('axe found no accessibility errors!'));
}
})().catch((e) => console.error(e));