feat: add accessibility pipeline to repo

.circleci/config.yml

@@ -8,9 +8,25 @@ jobs:
       - checkout
       - node/install-packages:
           cache-path: ~/project/node_modules
-          override-ci-command: yarn
+          override-ci-command: yarn install --frozen-lockfile
       - run: yarn test
+  accessibility:
+    docker: 
+      - image: cimg/base:2021.03-20.04
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 19.03.13
+      - run:
+          command: docker info
+      - run:
+          name: Accessibility tests
+          command: |
+            set -x
+            cat ./docker-compose.yml
+            docker-compose -f ./docker-compose.yml up --exit-code-from accessibility
 workflows:
-  test_my_app:
+  tests:
     jobs:
-      - test
+      - test
+      - accessibility

.dockerignore

@@ -0,0 +1,12 @@
+.git
+.gitignore
+.circleci
+.husky
+node_modules/
+storybook-static/
+
+# Ignore unnecessary files inside allowed directories
+# This should go after the allowed directories
+**/*.log
+**/.DS_Store
+**/Thumbs.db

.storybook/main.ts

@@ -1,7 +1,7 @@
 module.exports = {
     stories: ['../packages/**/*.stories.@(tsx|js)'],
     addons: [
-        '@storybook/addon-a11y',
+      '@storybook/addon-a11y',
         {
         name: '@storybook/addon-docs',
         options: { configureJSX: true },

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:14.16.0-alpine3.12
+
+WORKDIR /opt/app/
+
+COPY package.json ./
+COPY yarn.lock ./
+
+# Install app dependencies
+RUN yarn install --frozen-lockfile
+COPY . .
+
+EXPOSE 6006
+
+# Run storybook
+CMD ["yarn", "storybook"]

README.md

@@ -12,7 +12,7 @@ Design system from (Wireframe kit)[https://www.figma.com/file/JbRWyHH5uS5psDinzy
 
 This repo is using `yarn`.
 
-Clone this repo, run `yarn` then run `yarn storybook`. It will open in `http://localhost:9001`. You can change this port in `package.json`.
+Clone this repo, run `yarn` then run `yarn storybook`. It will open in `http://localhost:6006`. You can change this port in `package.json`.
 
 ## Demo
 

docker-compose.yml

@@ -0,0 +1,30 @@
+version: "3"
+
+services:
+  web:
+    volumes:
+      - app-content:/opt/app/
+    build: .
+    logging:
+      driver: none
+    networks:
+      defaults:
+    ports:
+      - "6006:6006"
+    tty: false
+  accessibility:
+    image: "buildkite/puppeteer:7.1.0"
+    networks:
+      defaults:
+    working_dir: /opt/app/
+    volumes:
+      - app-content:/opt/app/
+    depends_on:
+      - web
+    command: /bin/sh -c "npx wait-on http://web:6006 && yarn test:a11y"
+volumes:
+  app-content:
+
+networks:
+  defaults:
+    driver: bridge

package.json

@@ -9,10 +9,12 @@
     "@commitlint/cli": "12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@storybook/addon-a11y": "^6.1.21",
     "@storybook/addon-docs": "^6.1.21",
+    "@storybook/addon-storyshots": "^6.1.21",
+    "@storybook/addon-storyshots-puppeteer": "^6.1.21",
     "@storybook/addons": "^6.1.21",
     "@storybook/react": "^6.1.21",
-    "@storybook/addon-a11y": "^6.1.21",
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.32",
@@ -26,6 +28,7 @@
     "husky": "5.1.3",
     "jest": "^26.6.3",
     "lerna": "^4.0.0",
+    "puppeteer": "^8.0.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "ts-jest": "^26.5.3",
     "typescript": "^4.2.3",
@@ -42,10 +45,11 @@
     "bootstrap": "lerna bootstrap",
     "build": "lerna exec --parallel 'BABEL_ENV=build babel --root-mode upward packages --out-dir dist --source-maps --extensions .js,.jsx --delete-dir-on-start --no-comments'",
     "prestorybook": "lerna bootstrap",
-    "storybook": "start-storybook -p 9001",
+    "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "build:icons": "npx @svgr/cli --template npm-scripts/icon-template.js --ext tsx --icon --replace-attr-values \"#3C64B1=currentColor\" -d ./packages/icons/src ./icons",
-    "test": "jest",
+    "test": "jest --testPathIgnorePatterns storyshot",
+    "test:a11y": "jest storyshot",
     "prepare": "husky install"
   }
 }

packages/__tests__/storyshot.spec.tsx

@@ -0,0 +1,7 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import { axeTest } from '@storybook/addon-storyshots-puppeteer';
+
+initStoryshots({
+  suite: 'A11y checks',
+  test: axeTest({ storybookUrl: 'http://web:6006' }),
+});

packages/component/src/HeroBanner/index.tsx

@@ -16,7 +16,7 @@ interface HeroBanner extends React.AnchorHTMLAttributes<HTMLElement> {
 
 const HeroBanner: React.FC<HeroBanner> = props => {
   const { children, title, subtitle, btn1Text, btn2Text, ...rest } = props;
-  const themeData: Theme = useTheme();
+  const themeData = useTheme() as Theme;
 
   const subTextStyles = {
     color: themeData.colors.light.greyDark

packages/element/src/Image/index.tsx

@@ -16,7 +16,7 @@ const Image: React.SFC<Image> = props => {
     maxWidth: '100%'
   };
 
-  return <img css={styles} {...rest} src={src} />;
+  return <img css={styles} alt={props.alt || ""} {...rest} src={src} />;
 };
 
 export default Image;

packages/theme/src/Theme.tsx

@@ -7,7 +7,7 @@ const themes = {
   colors: {
     light: {
       black: '#373F41',
-      greyDark: '#737B7D',
+      greyDark: '#757575',
       grey: '#C3CBCD',
       divider: '#E2E5E6',
       greyLightest: '#F4F5F4',