Skip to content
This repository was archived by the owner on Mar 25, 2021. It is now read-only.

Commit f58a9f9

Browse files
dlabajdlabaj
committed
Added Cypress Axe.
Fixes issue #20 using cypress axe. Signed-off-by: Donald Labaj <[email protected]>
1 parent a4c0f81 commit f58a9f9

File tree

7 files changed

+85
-8
lines changed

7 files changed

+85
-8
lines changed

‎client/Bootstrap/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
/>
1313
</head>
1414
<body>
15-
<div id="root" role="main"></div>
15+
<div id="root" class="root" role="main"></div>
16+
<p tabindex=“0” aria-hidden=“true”>Some text</p>
1617
</body>
1718
</html>

‎e2e/features/step_definitions/coreUX.stepdef.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Given('I am on the strimzi-ui homepage', () => {
1010

1111
Then(`the welcome message appears`, () => {
1212
cy.get('#root').contains(`Welcome to the Strimzi UI`);
13+
cy.testA11y("Checking accessibility for home page");
1314
});
1415

1516
And(`version information about this UI is displayed`, () => {

‎e2e/plugins/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ module.exports = (on: (evt: string, callback: () => void) => void) => {
1212
const cucumberPreProcessor = cucumber.default;
1313

1414
on('file:preprocessor', cucumberPreProcessor(options));
15-
};
15+
};

‎e2e/support/index.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,57 @@
22
* Copyright Strimzi authors.
33
* License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
44
*/
5+
import 'cypress-axe';
6+
import { Result } from 'axe-core';
7+
8+
declare global {
9+
namespace Cypress {
10+
interface Chainable<Subject> {
11+
logA11yViolations(violations: Result[], target: string): Chainable<Element>;
12+
testA11y(target: string): Chainable<Element>;
13+
}
14+
}
15+
}
16+
17+
Cypress.Commands.add(
18+
'logA11yViolations',
19+
(violations: Result[], target: string) => {
20+
// pluck specific keys to keep the table readable
21+
const violationData = violations.map(
22+
({ id, impact, description, nodes }) => ({
23+
id,
24+
impact,
25+
description,
26+
nodes: nodes.length,
27+
})
28+
);
29+
cy.log(
30+
'Accessibility violation',
31+
`${violations.length} accessibility violation${
32+
violations.length === 1 ? '' : 's'
33+
} ${violations.length === 1 ? 'was' : 'were'} detected ${
34+
target ? `for ${target}` : ''
35+
}`
36+
);
37+
cy.log('logTable', violationData);
38+
}
39+
);
40+
41+
Cypress.Commands.add('testA11y', (target: string) => {
42+
cy.injectAxe();
43+
cy.configureAxe({
44+
rules: [
45+
{ id: 'color-contrast', enabled: false }, // seem to be somewhat inaccurate and has difficulty always picking up the correct colors, tons of open issues for it on axe-core
46+
{ id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
47+
{ id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
48+
],
49+
});
50+
cy.checkA11y(
51+
undefined,
52+
{
53+
includedImpacts: ['serious', 'critical'],
54+
},
55+
(violations) => cy.logA11yViolations(violations, target),
56+
true
57+
);
58+
});

‎e2e/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"extends": "../tsconfig.base.json",
33
"compilerOptions": {
4-
"types": ["cypress", "node"]
4+
"types": ["cypress", "cypress-axe", "node"]
55
},
66
"include": ["./**/*.ts"]
77
}

‎package-lock.json‎

Lines changed: 22 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"@storybook/react": "^6.0.28",
9292
"@testing-library/jest-dom": "^5.11.5",
9393
"@testing-library/react": "^11.1.1",
94+
"@types/cypress-axe": "^0.8.0",
9495
"@testing-library/react-hooks": "^3.4.2",
9596
"@testing-library/user-event": "^12.2.2",
9697
"@types/cypress-cucumber-preprocessor": "^4.0.0",
@@ -106,11 +107,13 @@
106107
"@types/ws": "^7.2.7",
107108
"@typescript-eslint/eslint-plugin": "^4.6.1",
108109
"@typescript-eslint/parser": "^4.6.1",
110+
"axe-core": "^4.0.2",
109111
"babel-eslint": "^10.1.0",
110112
"babel-jest": "^26.6.3",
111113
"commitlint": "^11.0.0",
112114
"css-loader": "^5.0.1",
113-
"cypress": "^5.5.0",
115+
"cypress": "^5.6.0",
116+
"cypress-axe": "0.9.1",
114117
"cypress-cucumber-preprocessor": "^4.0.0",
115118
"eslint": "^7.12.1",
116119
"eslint-config-prettier": "^6.15.0",

0 commit comments

Comments
 (0)