feat: add accessibility tests to templates

.vscode/launch.json

@@ -197,7 +197,7 @@
       "name": "test renderers",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/test-renderers",
-      "args": ["rtr-story"],
+      "args": ["react-run-dom"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
@@ -211,7 +211,7 @@
       "name": "jest cc-cli",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/cc-cli",
-      "args": ["Header"],
+      "args": ["VariantButton_rtl"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/jest-extract/package.json

@@ -48,7 +48,7 @@
     "@jest/test-result": "^26.0.10",
     "@types/jest": "^26.0.10",
     "@types/react-dom": "^16.9.8",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "typescript": "^4.0.5"
   },

misc/jest-axe-matcher/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

misc/jest-axe-matcher/.eslintignore

@@ -0,0 +1,2 @@
+dist
+test/fixtures/

misc/jest-axe-matcher/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

misc/jest-axe-matcher/README.md

@@ -0,0 +1,17 @@
+# Table of contents
+
+# Overview
+
+jest accessibility matching utilities with deque axe.
+
+# Installation
+
+This package is usually installed as part of the @component-controls package, but you can also install it standalone:
+
+```bash
+$ npm install @component-controls/jest-axe-matcher --save-dev
+```
+
+# API
+
+<react-docgen-typescript path="./src" />

misc/jest-axe-matcher/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@component-controls/jest-axe-matcher",
+  "version": "3.7.0",
+  "description": "jest accessibility matching utilities with deque axe",
+  "keywords": [
+    "jest",
+    "axe testing",
+    "deque"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-md",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "misc/jest-axe-matcher"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "axe-core": "^4.1.1",
+    "jest": "^26.4.2",
+    "jest-matcher-utils": "^26.6.2",
+    "ts-jest": "^26.5.5"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.10",
+    "typescript": "^4.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ],
+  "jest": {
+    "roots": [
+      "./test"
+    ]
+  },
+  "gitHead": "e30d62f101e104711a16261fce04785d58cac1eb"
+}

misc/jest-axe-matcher/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: ['./src/index.ts'],
+});

misc/jest-axe-matcher/src/index.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import * as extensions from './matchers';
+import { ResultFilers } from './utils';
+
+export { extensions };
+
+expect.extend(extensions);
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveNoAxeViolations(filters?: ResultFilers): R;
+      toHaveNoAxeIncomplete(filters?: ResultFilers): R;
+      toHaveNoAxeInapplicable(filters?: ResultFilers): R;
+      toHaveNoAxePasses(filters?: ResultFilers): R;
+    }
+  }
+}

misc/jest-axe-matcher/src/matchers.ts

@@ -0,0 +1,4 @@
+export { toHaveNoAxeViolations } from './toHaveNoAxeViolations';
+export { toHaveNoAxeIncomplete } from './toHaveNoAxeIncomplete';
+export { toHaveNoAxeInapplicable } from './toHaveNoAxeInapplicable';
+export { toHaveNoAxePasses } from './toHaveNoAxePasses';

misc/jest-axe-matcher/src/toHaveNoAxeInapplicable.ts

@@ -0,0 +1,8 @@
+import { AxeResults } from 'axe-core';
+import { matchAxeResuls, ResultFilers } from './utils';
+
+export const toHaveNoAxeInapplicable = (
+  received: AxeResults,
+  filters?: ResultFilers,
+): jest.CustomMatcherResult =>
+  matchAxeResuls(received.inapplicable, 'inapplicable', filters);

misc/jest-axe-matcher/src/toHaveNoAxeIncomplete.ts

@@ -0,0 +1,8 @@
+import { AxeResults } from 'axe-core';
+import { matchAxeResuls, ResultFilers } from './utils';
+
+export const toHaveNoAxeIncomplete = (
+  received: AxeResults,
+  filters?: ResultFilers,
+): jest.CustomMatcherResult =>
+  matchAxeResuls(received.incomplete, 'incomplete', filters);

misc/jest-axe-matcher/src/toHaveNoAxePasses.ts

@@ -0,0 +1,8 @@
+import { AxeResults } from 'axe-core';
+import { matchAxeResuls, ResultFilers } from './utils';
+
+export const toHaveNoAxePasses = (
+  received: AxeResults,
+  filters?: ResultFilers,
+): jest.CustomMatcherResult =>
+  matchAxeResuls(received.passes, 'passed', filters);

misc/jest-axe-matcher/src/toHaveNoAxeViolations.ts

@@ -0,0 +1,8 @@
+import { AxeResults } from 'axe-core';
+import { matchAxeResuls, ResultFilers } from './utils';
+
+export const toHaveNoAxeViolations = (
+  received: AxeResults,
+  filters?: ResultFilers,
+): jest.CustomMatcherResult =>
+  matchAxeResuls(received.violations, 'violated', filters);

misc/jest-axe-matcher/src/utils.ts

@@ -0,0 +1,79 @@
+import { Result } from 'axe-core';
+import {
+  printReceived,
+  matcherHint,
+  DIM_COLOR,
+  BOLD_WEIGHT,
+  INVERTED_COLOR,
+} from 'jest-matcher-utils';
+
+export type ResultFiler = { rule: string; exclude?: boolean } | string;
+
+export type ResultFilers = {
+  id?: ResultFiler[];
+  impact?: ResultFiler[];
+};
+
+const filterResults = (results: Result[], filters?: ResultFilers): Result[] => {
+  let filtered = results;
+  if (filters) {
+    Object.keys(filters).forEach(key => {
+      const id = key as keyof ResultFilers;
+      const filter = filters[id] || [];
+      const normalized = filter.map(f =>
+        typeof f === 'string' ? { rule: f, exclude: false } : f,
+      );
+      filtered = filtered.filter(f =>
+        normalized.find(n => (n.exclude ? n.rule !== f[id] : n.rule === f[id])),
+      );
+    });
+  }
+  return filtered;
+};
+export const matchAxeResuls = (
+  results: Result[],
+  category: string,
+  filters?: ResultFilers,
+): jest.CustomMatcherResult => {
+  const filered = filterResults(results, filters);
+  const pass = !filered?.length;
+
+  const message: () => string = () => {
+    return [
+      matcherHint(
+        `${!pass ? '' : '.not'}.toHaveNoAxeViolations`,
+        'axeresults',
+        '',
+      ),
+      '',
+      ...filered.map(result => {
+        const v = result.nodes.length > 1 ? 'are' : 'is';
+        return (
+          `${
+            result.impact ? `${INVERTED_COLOR(result.impact)} ` : ''
+          }${printReceived(result.description)}" (${result.id}) ${
+            pass ? `${v} not` : v
+          } ${category}:` +
+          `${result.nodes
+            .map(
+              node =>
+                `\n${BOLD_WEIGHT(node.target.join(', '))}` +
+                `\n${INVERTED_COLOR(node.html)}` +
+                `${
+                  node.failureSummary
+                    ? `\n${DIM_COLOR(node.failureSummary)}`
+                    : ''
+                }`,
+            )
+            .join('\n')}` +
+          `\nmore info at: ${result.helpUrl}` +
+          '\n\n'
+        );
+      }),
+    ].join('\n');
+  };
+  return {
+    message,
+    pass,
+  };
+};

misc/jest-axe-matcher/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "types": ["node", "jest"],
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**", "test/**"]
+}

plugins/cc-cli/package.json

@@ -42,6 +42,7 @@
     "cc-cli": "./bin/index.js"
   },
   "dependencies": {
+    "@component-controls/jest-axe-matcher": "^3.7.0",
     "@component-controls/instrument": "^3.7.0",
     "@component-controls/store": "^3.7.0",
     "@component-controls/test-renderers": "^3.7.0",
@@ -59,15 +60,16 @@
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.10",
     "@types/react-dom": "^16.9.8",
-    "@types/react-test-renderer": "^16.9.3",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/testing-library__jest-dom": "^5.9.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
     "babel-jest": "^26.6.3",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.5.0",
     "jest": "^26.4.2",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
+    "jsdom": "^16.5.3",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "ts-jest": "^26.4.4",
     "typescript": "^4.0.5"
   },

plugins/cc-cli/src/accessibily.ts

@@ -0,0 +1,24 @@
+import path from 'path';
+import fs from 'fs';
+import { TeplateFormats } from './types';
+
+export const accessibilityTemplate = (
+  format: TeplateFormats,
+): {
+  allyimports: string;
+  allytest: string;
+} => {
+  const importPath = path.resolve(
+    __dirname,
+    `../templates/accessibility/import/import.${format}.js`,
+  );
+  const testPath = path.resolve(
+    __dirname,
+    `../templates/accessibility/test/test.${format}.js`,
+  );
+
+  return {
+    allyimports: fs.readFileSync(importPath, 'utf8'),
+    allytest: fs.readFileSync(testPath, 'utf8'),
+  };
+};

plugins/cc-cli/src/document-template.ts

@@ -6,6 +6,7 @@ import { parseStories } from '@component-controls/instrument';
 import { Document } from '@component-controls/core';
 import { loadStore } from '@component-controls/store';
 import { createTemplate } from './template';
+import { accessibilityTemplate } from './accessibily';
 import { StoryTemplateOptions, renderers, TemplateFunction } from './types';
 
 dot.templateSettings.strip = false;
@@ -90,6 +91,7 @@ export const createDocumentTemplate: TemplateFunction<StoryTemplateOptions> = as
     documentLoop: dot.template(fs.readFileSync(documentLoopPath, 'utf8'))({
       type:
         format === 'ts' ? ': ReturnType<typeof renderDocument> = []' : ' = []',
+      ...accessibilityTemplate(format),
     }),
     doc: bundle ? `const doc = store.docs['${doc.title}'];` : '',
     storyImports: fs.readFileSync(

plugins/cc-cli/src/store-template.ts

@@ -3,6 +3,7 @@ import path from 'path';
 import dot from 'dot';
 import { TemplateOptions, renderers, TemplateFunction } from './types';
 import { createTemplate } from './template';
+import { accessibilityTemplate } from './accessibily';
 
 dot.templateSettings.strip = false;
 (dot as any).log = false;
@@ -38,6 +39,7 @@ export const createStoreTemplate: TemplateFunction = async (
   );
   const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({
     bundle: !!bundle,
+    ...accessibilityTemplate(format),
   });
   const vars = {
     render,