Added Cypress Axe.

Fixes issue #20 using cypress axe. Signed-off-by: Donald Labaj [email protected]
strimzi · Nov 19, 2020 · ceb9382 · ceb9382
1 parent b175a8a
commit ceb9382
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 11 deletions.
diff --git a/client/Bootstrap/index.html b/client/Bootstrap/index.html
@@ -9,5 +9,6 @@
   </head>
   <body>
     <div id="root" class="root" role="main"></div>
+    <p tabindex=“0” aria-hidden=“true”>Some text</p>
   </body>
 </html>
diff --git a/e2e/features/step_definitions/coreUX.stepdef.ts b/e2e/features/step_definitions/coreUX.stepdef.ts
@@ -5,9 +5,10 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 
 Given('I am on the strimzi-ui homepage', () => {
-  cy.visit('localhost:3000/index.html');
+  cy.visit('localhost:8080/index.html');
 });
 
 Then(`the welcome message appears`, () => {
   cy.get('#root').contains(`Welcome to the Strimzi UI`);
+  cy.testA11y("Checking accessibility for home page");
 });
diff --git a/e2e/plugins/index.ts b/e2e/plugins/index.ts
@@ -12,4 +12,4 @@ module.exports = (on: (evt: string, callback: () => void) => void) => {
   const cucumberPreProcessor = cucumber.default;
 
   on('file:preprocessor', cucumberPreProcessor(options));
-};
+  };
diff --git a/e2e/support/index.ts b/e2e/support/index.ts
@@ -2,3 +2,57 @@
  * Copyright Strimzi authors.
  * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
  */
+import 'cypress-axe';
+import { Result } from 'axe-core';
+
+declare global {
+    namespace Cypress {
+      interface Chainable<Subject> {
+        logA11yViolations(violations: Result[], target: string): Chainable<Element>;
+        testA11y(target: string): Chainable<Element>;
+      }
+    }
+  }
+
+Cypress.Commands.add(
+  'logA11yViolations',
+  (violations: Result[], target: string) => {
+    // pluck specific keys to keep the table readable
+    const violationData = violations.map(
+      ({ id, impact, description, nodes }) => ({
+        id,
+        impact,
+        description,
+        nodes: nodes.length,
+      })
+    );
+    cy.log(
+      'Accessibility violation',
+      `${violations.length} accessibility violation${
+        violations.length === 1 ? '' : 's'
+      } ${violations.length === 1 ? 'was' : 'were'} detected ${
+        target ? `for ${target}` : ''
+      }`
+    );
+    cy.log('logTable', violationData);
+  }
+);
+
+Cypress.Commands.add('testA11y', (target: string) => {
+  cy.injectAxe();
+  cy.configureAxe({
+    rules: [
+      { 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
+      { id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
+      { id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
+    ],
+  });
+  cy.checkA11y(
+    undefined,
+    {
+      includedImpacts: ['serious', 'critical'],
+    },
+    (violations) => cy.logA11yViolations(violations, target),
+    true
+  );
+});
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "types": ["cypress", "node"]
+    "types": ["cypress", "cypress-axe", "node"]
   },
   "include": ["./**/*.ts"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,9 +63,8 @@
     "pino-filter": "^1.0.0",
     "pino-http": "^5.3.0",
     "pino-pretty": "^4.3.0",
-    "sass": "^1.29.0",
-    "react-i18next": "^11.7.3",
     "sass": "^1.26.10",
+    "react-i18next": "^11.7.3",
     "subscriptions-transport-ws": "^0.9.18",
     "terser-webpack-plugin": "^3.0.7",
     "typescript": "^4.0.3",
@@ -80,6 +79,7 @@
     "@storybook/react": "^6.0.28",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",
+    "@types/cypress-axe": "^0.8.0",
     "@types/cypress-cucumber-preprocessor": "^4.0.0",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.15",
@@ -90,16 +90,18 @@
     "@types/supertest": "^2.0.10",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
+    "axe-core": "^4.0.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "commitlint": "^11.0.0",
     "css-loader": "^5.0.1",
-    "cypress": "^5.5.0",
+    "cypress": "^5.6.0",
+    "cypress-axe": "0.9.1",
     "cypress-cucumber-preprocessor": "^4.0.0",
     "eslint": "^7.12.1",
-    "eslint-plugin-i18next": "^5.0.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-i18next": "^5.0.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",