Merge pull request #1181 from securityscorecard/next

🚀 Next release

.github/workflows/CD.yaml

@@ -113,6 +113,60 @@ jobs:
           name: visual-test-reports
           path: visual-test-reports.tar
 
+  a11y-tests:
+    name: '♿ Check basic a11y tests'
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: ['1','2','3','4']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.4.1'
+
+      - name: Cache yarn files
+        uses: actions/cache@v4
+        id: cache
+        with:
+          path: |
+            .yarn/install-state.gz
+            node_modules
+          key: node-modules-node-22.4.1-${{ hashFiles('**/yarn.lock', '**/package.json') }}
+
+      - name: Install Packages
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Cache storybook build
+        id: storybook-build-cache
+        uses: actions/cache@v4
+        with:
+          path: storybook-static
+          key: storybook-tests-node-22.4.1-${{ hashFiles('**/yarn.lock', '**/package.json', 'src/**', '!.storybook/image-snapshots/**' ,'.storybook/**') }}
+
+      - name: Build Storybook
+        if: steps.storybook-build-cache.outputs.cache-hit != 'true'
+        run: yarn storybook:build
+
+      - name: Run A11y tests
+        id: 'a11yTests'
+        run: yarn test:a11y:ci
+        continue-on-error: true
+        env:
+          SHARD: ${{matrix.shard}}
+          MAX_SHARDS: '4'
+
+      - run: echo "OK"
+        if: job.steps.a11yTests.status == failure()
+
   lint:
     name: '🧹 Run lint'
     runs-on: ubuntu-latest

.storybook/main.ts

@@ -22,6 +22,7 @@ const config: StorybookConfig = {
     '@storybook/addon-themes',
     '@storybook/addon-coverage',
     'storycap',
+    '@storybook/addon-a11y'
   ],
   docs: { defaultName: 'Documentation' },
   typescript: {

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import type { Preview } from '@storybook/react';
 import { withScreenshot } from 'storycap';
 import i18n from 'i18next';
@@ -35,33 +35,36 @@ clearDatatableLS();
 createIconLibrary();
 window.Math.random = () => 0.5;
 
-i18n.use(ICU).use(initReactI18next).init({
-  debug: true,
-  i18nFormat: {
-    localeData: [icuEn, icuJa, icuEs, icuPt, icuCs],
-    formats: {},
-  },
-  resources: {
-    'en-US': { sscds: en },
-    'ja-JP': { sscds: ja },
-    'cs-CZ': { sscds: cs },
-    'es-ES': { sscds: es },
-    'pt-BR': { sscds: pt },
-  },
-  defaultNS:'sscds',
-  keySeparator: false,
-  nsSeparator: '|',
-  lng: 'en-US',
-  fallbackLng: 'en-US',
-  interpolation: {
-    escapeValue: false,
-  },
-  saveMissing: true, // necessary for `missingKeyHandler` to work
-  missingKeyHandler: (lng, __, key) => {
-    // eslint-disable-next-line no-console
-    console.warn(`Missing intl key for lng:${lng}: '${key}' `);
-  }
-});
+i18n
+  .use(ICU)
+  .use(initReactI18next)
+  .init({
+    debug: true,
+    i18nFormat: {
+      localeData: [icuEn, icuJa, icuEs, icuPt, icuCs],
+      formats: {},
+    },
+    resources: {
+      'en-US': { sscds: en },
+      'ja-JP': { sscds: ja },
+      'cs-CZ': { sscds: cs },
+      'es-ES': { sscds: es },
+      'pt-BR': { sscds: pt },
+    },
+    defaultNS: 'sscds',
+    keySeparator: false,
+    nsSeparator: '|',
+    lng: 'en-US',
+    fallbackLng: 'en-US',
+    interpolation: {
+      escapeValue: false,
+    },
+    saveMissing: true, // necessary for `missingKeyHandler` to work
+    missingKeyHandler: (lng, __, key) => {
+      // eslint-disable-next-line no-console
+      console.warn(`Missing intl key for lng:${lng}: '${key}' `);
+    },
+  });
 
 const withI18next = (Story, context) => {
   const { locale } = context.globals;
@@ -73,9 +76,9 @@ const withI18next = (Story, context) => {
   }, [locale]);
 
   return (
-      <I18nextProvider i18n={i18n}>
-        <Story />
-      </I18nextProvider>
+    <I18nextProvider i18n={i18n}>
+      <Story />
+    </I18nextProvider>
   );
 };
 
@@ -124,11 +127,10 @@ const preview: Preview = {
     },
     docs: {
       source: { type: 'dynamic' },
-      controls:{
-        sort: 'requiredFirst'
-      }
+      controls: {
+        sort: 'requiredFirst',
+      },
     },
-    // storycap settings
     screenshot: {
       fullPage: true,
     },
@@ -151,7 +153,7 @@ const preview: Preview = {
       <DSProvider config={{ debugMode: true }}>{storyFn()}</DSProvider>
     ),
   ],
-  tags:['autodocs'],
+  tags: ['autodocs'],
   globalTypes: {
     locale: {
       name: 'Locale',
@@ -171,4 +173,4 @@ const preview: Preview = {
   },
 };
 
-export default preview
+export default preview;

.storybook/test-runner.ts

@@ -0,0 +1,33 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    const storyContext = await getStoryContext(page, context);
+    const a11yParams = storyContext.parameters?.a11y
+
+    if (a11yParams?.disable) {
+      return;
+    }
+    await configureAxe(page, {
+      rules: a11yParams?.config?.rules,
+    });
+
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+      verbose: false,
+      axeOptions: {
+        runOnly: ['wcag21aa','wcag22aa','best-practice','EN-301-549']
+      },
+    }, true, 'v2');
+  },
+};
+
+export default config;

package.json

@@ -60,6 +60,8 @@
     "test:storybook:visual:ci": "./visual-regressions/bin/take-and-check-in-docker-ci.sh",
     "test": "jest -w 4",
     "test:watch": "jest --watch",
+    "test:a11y": "test-storybook --maxWorkers 4 --url=http://localhost:8008",
+    "test:a11y:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers 2 --shard ${SHARD}/${MAX_SHARDS}\"",
     "test:storybook:coverage": "test-storybook --coverage --coverageDirectory coverage/storybook --maxWorkers 4 --url=http://localhost:8008",
     "test:unit:coverage": "yarn run test --coverage --coverageDirectory coverage/jest",
     "test:coverage": "yarn run test:unit:coverage & yarn run test:storybook:coverage",
@@ -106,7 +108,7 @@
     "react-container-query": "^0.13.0",
     "react-cool-portal": "^1.2.0",
     "react-datepicker": "^4.6.0",
-    "react-dropzone": "^12.1.0",
+    "react-dropzone": "^14.2.9",
     "react-i18next": ">=11.18.6",
     "react-popper": "^2.2.5",
     "react-table": "^7.7.0",
@@ -124,18 +126,19 @@
     "@semantic-release/github": "^10.1.6",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-actions": "^8.3.6",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-themes": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/preview-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/preview-api": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.5",
+    "@storybook/theming": "^8.3.6",
     "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
@@ -154,7 +157,9 @@
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "axe-playwright": "^2.0.3",
     "babel-plugin-styled-components": "^2.0.7",
+    "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.0",
     "eslint": "^8.11.0",
@@ -173,6 +178,7 @@
     "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-testing-library": "^5.1.0",
     "history": "^5.3.0",
+    "http-server": "^14.1.1",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -198,7 +204,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release": "^24.1.0",
     "semantic-release-export-data": "^1.1.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "storycap": "^5.0.0",
     "styled-components": "^5.3.3",
     "stylelint": "^16.6.1",
@@ -209,7 +215,8 @@
     "typescript": "^5.6.2",
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.2.1",
-    "vite-require": "^0.2.3"
+    "vite-require": "^0.2.3",
+    "wait-on": "^8.0.1"
   },
   "resolutions": {
     "set-value": "4.1.0",

src/components/Callout/Callout.stories.tsx

@@ -33,6 +33,17 @@ export const NeutralCallout: Story = {
   args: { color: 'neutral' },
 };
 
+export const SizedIcon: Story = {
+  render: (args) => (
+    <Stack gap="md">
+      <Callout {...args} icon={{ name: 'lightbulb', size: 'xs' }} />
+      <Callout {...args} icon={{ name: 'lightbulb', size: 'sm' }} />
+      <Callout {...args} icon={{ name: 'lightbulb', size: 'md' }} />
+    </Stack>
+  ),
+  args: { color: 'neutral' },
+};
+
 export const ColorsDark: Story = {
   render: (args) => (
     <Stack gap="md">

src/components/Callout/Callout.tsx

@@ -14,6 +14,7 @@ export type CalloutProps = {
     | {
         name: IconNames;
         type?: RegularIconTypes;
+        size?: Exclude<ComponentProps<typeof IconWrapper>['size'], 'lg' | 'xl'>;
       };
   color?: 'neutral' | 'info';
 };
@@ -47,7 +48,7 @@ const Callout = ({
         ) : (
           <IconWrapper
             name={icon.name}
-            size="md"
+            size={icon?.size ?? 'md'}
             type={icon?.type ?? 'ssc'}
             variant={iconWrapperVariant}
           />