Added Cypress Axe.

Fixes issue #20 using cypress axe. Signed-off-by: Donald Labaj <[email protected]>
strimzi · Dec 3, 2020 · 1c55d6a · 1c55d6a
1 parent a4c0f81
commit 1c55d6a
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 8 deletions.
diff --git a/client/Bootstrap/index.html b/client/Bootstrap/index.html
@@ -12,6 +12,7 @@
     />
   </head>
   <body>
-    <div id="root" role="main"></div>
+    <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
@@ -10,6 +10,7 @@ Given('I am on the strimzi-ui homepage', () => {
 
 Then(`the welcome message appears`, () => {
   cy.get('#root').contains(`Welcome to the Strimzi UI`);
+  cy.testA11y("Checking accessibility for home page");
 });
 
 And(`version information about this UI is displayed`, () => {

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
@@ -91,6 +91,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",
     "@testing-library/react-hooks": "^3.4.2",
     "@testing-library/user-event": "^12.2.2",
     "@types/cypress-cucumber-preprocessor": "^4.0.0",
@@ -106,11 +107,13 @@
     "@types/ws": "^7.2.7",
     "@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-config-prettier": "^6.15.0",