chore: add a11y checks to test pipeline

frontend/.eslintrc

@@ -1,6 +1,7 @@
 {
   "root": true,
   "plugins": ["import", "simple-import-sort", "prettier"],
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "overrides": [
     {
       "files": ["*.test.ts"],

frontend/.storybook/main.js

@@ -1,8 +1,11 @@
+/* eslint-env node */
+const { propNames } = require('@chakra-ui/styled-system')
 // Required to sync aliases between storybook and overriden configs
 const config = require('../config-overrides')
 const path = require('path')
 
 const toPath = (_path) => path.join(process.cwd(), _path)
+const excludedPropNames = propNames.concat(['as', 'apply', 'sx', '__css'])
 
 module.exports = {
   // Welcome story set first so it will show up first.
@@ -19,24 +22,25 @@ module.exports = {
     '@storybook/preset-create-react-app',
   ],
   typescript: {
+    check: false,
+    checkOptions: {},
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
-      // Allows typed string unions to be generated properly.
       shouldExtractLiteralValuesFromEnum: true,
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
+      shouldRemoveUndefinedFromOptional: true,
+      allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+      propFilter: (prop) => {
+        if (!prop.parent) {
+          return !prop.declarations.some((d) =>
+            d.fileName.includes('node_modules'),
+          )
+        }
+
+        const isStyledSystemProp = excludedPropNames.includes(prop.name)
+        const isHTMLElementProp = prop.parent.fileName.includes('node_modules')
+        return !(isStyledSystemProp || isHTMLElementProp)
       },
-      // Prevents extraneous props from showing up in controls.
-      // See https://github.com/chakra-ui/chakra-ui/issues/2009#issuecomment-765538309.
-      propFilter: (prop) =>
-        prop.parent !== undefined &&
-        (!prop.parent.fileName.includes('node_modules') ||
-          (prop.parent.fileName.includes('node_modules') &&
-            prop.parent.fileName.includes('node_modules/@chakra-ui/') &&
-            !prop.parent.fileName.includes(
-              'node_modules/@chakra-ui/styled-system',
-            ))),
     },
   },
   // webpackFinal setup retrieved from ChakraUI's own Storybook setup

frontend/__tests__/storyshots/axe-tests.runner.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is not suffixed by ".test.ts" to not being run with all other test
+ * files.
+ * `npm run test:a11y` generates the static build & uses storyshots-puppeteer.
+ * `npm run test:a11y-dev` uses "localhost:6006" as the storybookUrl and
+ * requires storybook to be running.
+ */
+import initStoryshots from '@storybook/addon-storyshots'
+import { axeTest } from '@storybook/addon-storyshots-puppeteer'
+
+import { getStorybookUrl } from './config/setup-storyshots'
+
+const storybookUrl = getStorybookUrl()
+if (storybookUrl) {
+  initStoryshots({
+    suite: 'A11y checks',
+    test: axeTest({ storybookUrl }),
+  })
+}

frontend/__tests__/storyshots/config/setup-storyshots.ts

@@ -0,0 +1,23 @@
+import { logger } from '@storybook/node-logger'
+import fs from 'fs'
+import path from 'path'
+
+export const getStorybookUrl = (): string | null => {
+  if (process.env.USE_DEV_SERVER) {
+    return 'http://localhost:6006'
+  }
+
+  const pathToStorybookStatic = path.join(
+    __dirname,
+    '../../../',
+    'storybook-static',
+  )
+
+  if (!fs.existsSync(pathToStorybookStatic)) {
+    logger.error(
+      'You are running puppeteer tests without having the static build of storybook. Please run "npm run test:puppeteer" before running tests.',
+    )
+    return null
+  }
+  return `file://${pathToStorybookStatic}`
+}

frontend/__tests__/storyshots/jest.config.js

@@ -0,0 +1,27 @@
+/* eslint-env node */
+
+module.exports = {
+  rootDir: '.',
+  testMatch: ['**/*.runner.ts'],
+  preset: 'ts-jest',
+  transform: {
+    '^.+\\.stories\\.tsx$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.(js|jsx|ts|tsx)$': 'react-scripts/config/jest/babelTransform.js',
+    '^.+\\.css$': 'react-scripts/config/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
+      'react-scripts/config/jest/fileTransform.js',
+  },
+  moduleNameMapper: {
+    '~/(.*)': '<rootDir>/../../src/$1',
+    '~assets/(.*)': '<rootDir>/../../src/assets/$1',
+    '~contexts/(.*)': '<rootDir>/../../src/contexts/$1',
+    '~constants/(.*)': '<rootDir>/../../src/constants/$1',
+    '~components/(.*)': '<rootDir>/../../src/components/$1',
+    '~hooks/(.*)': '<rootDir>/../../src/hooks/$1',
+    '~utils/(.*)': '<rootDir>/../../src/utils/$1',
+    '~pages/(.*)': '<rootDir>/../../src/pages/$1',
+    '~services/(.*)': '<rootDir>/../../src/services/$1',
+    '~theme/(.*)': '<rootDir>/../../src/theme/$1',
+    '~typings/(.*)': '<rootDir>/../../src/typings/$1',
+  },
+}