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

Commit 4f2e196

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

File tree

7 files changed

+107
-8
lines changed

7 files changed

+107
-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: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,62 @@
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+
// eslint-disable-next-line
10+
namespace Cypress {
11+
// eslint-disable-next-line
12+
interface Chainable<Subject> {
13+
logA11yViolations(
14+
violations: Result[],
15+
target: string
16+
): Chainable<Element>;
17+
testA11y(target: string): Chainable<Element>;
18+
}
19+
}
20+
}
21+
22+
Cypress.Commands.add(
23+
'logA11yViolations',
24+
(violations: Result[], target: string) => {
25+
// pluck specific keys to keep the table readable
26+
const violationData = violations.map(
27+
({ id, impact, description, nodes }) => ({
28+
id,
29+
impact,
30+
description,
31+
nodes: nodes.length,
32+
})
33+
);
34+
cy.log(
35+
'Accessibility violation',
36+
`${violations.length} accessibility violation${
37+
violations.length === 1 ? '' : 's'
38+
} ${violations.length === 1 ? 'was' : 'were'} detected ${
39+
target ? `for ${target}` : ''
40+
}`
41+
);
42+
cy.log('logTable', violationData);
43+
}
44+
);
45+
46+
Cypress.Commands.add('testA11y', (target: string) => {
47+
cy.injectAxe();
48+
cy.configureAxe({
49+
rules: [
50+
{ 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
51+
{ id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
52+
{ id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
53+
],
54+
});
55+
cy.checkA11y(
56+
undefined,
57+
{
58+
includedImpacts: ['serious', 'critical'],
59+
},
60+
(violations) => cy.logA11yViolations(violations, target),
61+
true
62+
);
63+
});

‎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: 39 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)