Feat/accessibility workflow

.github/workflows/ci.yaml

@@ -1,6 +1,26 @@
 name: CI
 on: push
 jobs:
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4.1.0
+        with:
+          node-version: 22.11.0
+      - name: Install dependencies
+        run: npm install --include=optional
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --verbose" \
+            "npx wait-on tcp:6006 && yarn test-storybook"
   build:
     runs-on: ubuntu-latest
     steps:

.storybook/loadIcons.ts

@@ -0,0 +1,27 @@
+import { type RegisteredIcons } from '@gen3/frontend';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const gen3Icons: RegisteredIcons = require(
+  `../config/icons/gen3.json`,
+);
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const colorIcons: RegisteredIcons = require(
+  `../config/icons/color.json`,
+);
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const dictionaryIcons: RegisteredIcons = require(
+  `../config/icons/dataDictionary.json`,
+);
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const workspaceIcons: RegisteredIcons = require(
+  `../config/icons/workspace.json`,
+);
+
+
+const icons: RegisteredIcons[] = [
+  gen3Icons,
+  colorIcons,
+  dictionaryIcons,
+  workspaceIcons,
+];
+
+export default icons;

.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y',
+    {
+      name: 'storybook-addon-manual-mocks',
+      options: {
+        mocksFolder: '__mocks__',
+      },
+    },
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config: any) => {
+    //  exclude SVGs from existing image rule and use SVGR instead
+    const imageRule = config.module?.rules?.find((rule: any) => {
+      const test = (rule as { test: RegExp }).test;
+      return test && test.test('.svg');
+    }) as { [key: string]: any };
+
+    if (imageRule) {
+      imageRule.exclude = /\.svg$/; // Exclude SVGs from the existing image rule
+    }
+
+    // Add a new rule for handling SVGs with SVGR
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { Preview } from '@storybook/nextjs';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { http, HttpResponse } from 'msw';
+import { MantineProvider } from '@mantine/core';
+import { Gen3Provider } from '@gen3/frontend';
+import '../src/styles/globals.css';
+import theme from '../src/mantineTheme';
+import icons from './loadIcons';
+import '@fontsource/montserrat';
+import '@fontsource/source-sans-pro';
+import '@fontsource/poppins';
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize({
+  onUnhandledRequest: ({ url, method }) => {
+    const pathname = new URL(url).pathname;
+    if (pathname.startsWith('/my-specific-api-path')) {
+      console.error(`Unhandled ${method} request to ${url}.
+
+        This exception has been only logged in the console, however, it's strongly recommended to resolve this error as you don't want unmocked data in Storybook stories.
+        If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses
+      `);
+    }
+  },
+});
+
+const modalsConfig = {
+  systemUseModal: {
+    enabled: false,
+    content: {
+      text: [],
+    },
+  },
+};
+
+const sessionConfig = {
+  updateSessionTime: 5,
+  inactiveTimeLimit: 20,
+  logoutInactiveUsers: false,
+  monitorWorkspace: false,
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    msw: {
+      handlers: {
+        global: [
+          http.get('/_status', () => {
+            return HttpResponse.json({
+              message: 'Feelin good!',
+              csrf: '4d84419a38ee14170382bdb93b70d6cc7710.0002025-06-29T22:26:01+00:00',
+            });
+          }),
+          http.get('/user/user', () => {
+            return HttpResponse.json(null, { status: 401 });
+          }),
+          http.get('/user/mapping', () => {
+            return HttpResponse.json({});
+          }),
+        ],
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <MantineProvider theme={theme}>
+        <Gen3Provider
+          icons={icons}
+          sessionConfig={sessionConfig}
+          modalsConfig={modalsConfig}
+        >
+          <Story />
+        </Gen3Provider>
+      </MantineProvider>
+    ),
+  ],
+  loaders: [mswLoader], // 👈 Adds the MSW loader to all stories
+};
+
+export default preview;

.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;

__mocks__/createWebStorageMock.js

@@ -0,0 +1,10 @@
+/* global jest */
+
+const mockStorage = {
+  getItem: jest.fn((_key) => Promise.resolve(null)),
+  setItem: jest.fn((_key, item) => Promise.resolve(item)),
+  removeItem: jest.fn((_key) => Promise.resolve()),
+};
+
+const createWebStorage = (_arg) => mockStorage;
+module.exports = createWebStorage;