Issue 923 accessibility testing

.gitignore

@@ -45,6 +45,7 @@
 # Documentation Website
 /documentation-website/.nyc_output
 /documentation-website/coverage
+/documentation-website/cypress/accessibility
 /documentation-website/cypress/screenshots
 /documentation-website/node_modules
 /documentation-website/dist

documentation-website/cypress.config.ts

@@ -4,13 +4,40 @@ import {
 import task from '@cypress/code-coverage/task';
 import useBabelRC from '@cypress/code-coverage/use-babelrc';
 import parallel from 'cypress-split';
+import {
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+} from 'fs';
+import {
+  ACCESSIBILITY_FILES_DIR,
+} from './cypress/fixtures/constants';
 
 export default defineConfig({
   e2e: {
     setupNodeEvents(on, config,) {
       parallel(on, config,);
       task(on, config,);
       on('file:preprocessor', useBabelRC,);
+      // cypress axe logs
+      on('task', {
+        /*log(message,) {
+          console.log(message,);
+          return null;
+        },*/
+        writeFile({
+          fileName,
+          content,
+        },) {
+          if (! existsSync(ACCESSIBILITY_FILES_DIR,)) {
+            mkdirSync(ACCESSIBILITY_FILES_DIR,);
+          }
+          writeFileSync(`${ ACCESSIBILITY_FILES_DIR }/${ fileName }`, content, {
+            flag: 'w',
+          },);
+          return null;
+        },
+      },);
       return config;
     },
     baseUrl: 'http://localhost:8080',

documentation-website/cypress/e2e/accessibility.cy.ts

@@ -0,0 +1,112 @@
+import 'cypress-axe';
+import {
+  page,
+  PAGE_LOAD_WAIT_MS,
+  SINGLE_VALUE_LENGTH,
+  UI_MODE,
+  UI_MODE_CLASSES,
+} from '../fixtures/constants.ts';
+
+const setMode = ({
+  mode,
+  doc,
+},) => {
+  if (
+    mode === 'dark'
+    && doc.querySelector(`html.${ UI_MODE_CLASSES.dark }`,)
+  ) {
+    return;
+  }
+  if (
+    mode === 'light'
+    && doc.querySelector(`html.${ UI_MODE_CLASSES.light }`,)
+  ) {
+    return;
+  }
+  cy.get('.theme-toggle-btn',)
+    .click();
+};
+
+const testPageAccessibility = ({
+  route,
+  mode,
+},) => {
+  // set to false to fail the test if there are any violations
+  const skipFailures = true;
+  cy.wait(PAGE_LOAD_WAIT_MS,);
+  cy.get('.cookie-consent-accept-button',)
+    .click();
+  cy.injectAxe();
+  cy.checkA11y('', {}, (violations,) => {
+    const singleViolation = violations.length === SINGLE_VALUE_LENGTH;
+    cy.task(
+      'log',
+      `${ violations.length } accessibility violation${
+        singleViolation ? '' : 's'
+      } ${ singleViolation ? 'was' : 'were' } detected`,
+    );
+    const violationData = violations.map(
+      ({
+        id,
+        impact,
+        description,
+        nodes,
+        helpUrl,
+      },) => ({
+        id,
+        impact,
+        description,
+        nodes: nodes.map((n,) => n.html,),
+        helpUrl,
+      }),
+    );
+    cy.task('writeFile', {
+      fileName: `${
+        route.replace(/\//gu, '',)
+      }--accessibility--${ mode.toUpperCase() }.json`,
+      content: JSON.stringify(violationData,),
+    },);
+    // uncomment to log the issues to the console
+    // cy.task('log', violationData,);
+  }, skipFailures,);
+};
+
+describe('accessibility', () => {
+  Object.values(page,)
+    .forEach((route,) => {
+      it(`${ route } should be accessible - DARK MODE`, () => {
+        const mode = UI_MODE.dark;
+        cy.visit(route,);
+
+        cy.document()
+          .then((doc,) => {
+            setMode({
+              mode,
+              doc,
+            },);
+
+            testPageAccessibility({
+              route,
+              mode,
+            },);
+          },);
+      },);
+
+      it(`${ route } should be accessible - LIGHT MODE`, () => {
+        const mode = UI_MODE.light;
+        cy.visit(route,);
+
+        cy.document()
+          .then((doc,) => {
+            setMode({
+              mode,
+              doc,
+            },);
+            testPageAccessibility({
+              route,
+              mode,
+            },);
+          },);
+      },);
+    },);
+},);

documentation-website/cypress/fixtures/constants.ts

@@ -26,3 +26,13 @@ export const multiple = {
 };
 export const EMPTY_LENGTH = 0;
 export const PAGE_LOAD_WAIT_MS = 1000;
+export const SINGLE_VALUE_LENGTH = 1;
+export const ACCESSIBILITY_FILES_DIR = 'cypress/accessibility';
+export const UI_MODE = {
+  dark: 'dark',
+  light: 'light',
+};
+export const UI_MODE_CLASSES= {
+  [UI_MODE.dark]: 'dark-mode',
+  [UI_MODE.light]: 'light-mode',
+};

documentation-website/package.json

@@ -58,18 +58,22 @@
     "@idrinth/react-file-based-routes": "^1.2.16",
     "@idrinth/rollup-plugin-react-modular-css": "^1.1.2",
     "@idrinth/typescript-language-from-yaml": "^1.3.0",
+    "@napi-rs/image": "^1.9.2",
     "@types/chai": "^4.3.16",
     "@types/mocha": "^10.0.6",
+    "@types/node": "^20.12.10",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.2.1",
+    "axe-core": "^4.9.0",
     "babel-plugin-istanbul": "^6.1.1",
     "c8": "^9.1.0",
     "chai": "^5.0.3",
     "chrome-launcher": "^1.1.1",
     "cypress": "^13.6.4",
+    "cypress-axe": "^1.5.0",
     "cypress-split": "^1.21.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -83,7 +87,6 @@
     "mocha": "^10.3.0",
     "rollup": "^4.17.2",
     "rollup-plugin-napi-image": "^0.6.1",
-    "@napi-rs/image": "^1.9.2",
     "spellchecker-cli": "^6.2.0",
     "start-server-and-test": "^2.0.3",
     "stylelint": "^16.2.1",