feat: improve accessibility tests (#299)

.github/workflows/chromatic.yml

@@ -83,9 +83,15 @@ jobs:
           corepack enable
           pnpm install --frozen-lockfile --ignore-scripts
 
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
       - name: Storybook build
         run: pnpm html:storybook:build
 
+      - name: Serve Storybook and run tests
+        run: pnpm html:storybook:test
+
       - name: Publish Global HTML Library to Chromatic
         uses: chromaui/action@latest
         with:
@@ -114,9 +120,15 @@ jobs:
           corepack enable
           pnpm install --frozen-lockfile --ignore-scripts
 
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
       - name: Storybook build
         run: pnpm react:storybook:build
 
+      - name: Serve Storybook and run tests
+        run: pnpm react:storybook:test
+
       - name: Publish React Library to Chromatic
         uses: chromaui/action@latest
         with:

.github/workflows/ci.yml

@@ -63,7 +63,7 @@ jobs:
           pnpm nx affected --base=last-release -t format:check --parallel=3
           pnpm build
           pnpm nx affected --base=last-release -t lint --parallel=3
-          pnpm nx affected --base=last-release -t test --parallel=3
+          pnpm test
 
       - name: Create Figma tokens flat artifact
         uses: actions/upload-artifact@v4

.gitignore

@@ -8,3 +8,5 @@ storybook-static
 theme.zip
 govie-frontend.zip
 /packages/html/storybook/static/
+coverage
+accessibility-audit.html

apps/docs/package.json

@@ -54,34 +54,19 @@
     "ts-extras": "^0.11.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
     "@fontsource/lato": "^5.0.21",
     "@govie-ds/eslint-config": "workspace:*",
     "@govie-ds/prettier-config": "workspace:*",
     "@nx-tools/container-metadata": "^6.0.1",
     "@nx-tools/nx-container": "^6.0.1",
-    "@storybook/addon-essentials": "8.1.10",
-    "@storybook/addon-interactions": "8.1.10",
-    "@storybook/addon-links": "8.1.10",
-    "@storybook/addon-onboarding": "8.1.10",
-    "@storybook/blocks": "8.1.10",
-    "@storybook/nextjs": "8.1.10",
-    "@storybook/react": "8.1.10",
-    "@storybook/test": "8.1.10",
     "@types/color-convert": "^2.0.3",
     "@types/lodash": "^4.17.7",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.14",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "cross-env": "^7.0.3",
     "eslint": "^9.8.0",
     "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8.4.40",
-    "prettier": "^3.3.3",
-    "storybook": "^8.2.7",
-    "tailwindcss": "^3.4.7",
-    "vitest": "^1.6.0"
+    "prettier": "^3.3.3"
   }
 }

apps/docs/src/components/document/get-started/developers-advice.tsx

@@ -36,7 +36,7 @@ function DevelopersAdviceInternal({ children }: { children: React.ReactNode }) {
     throw new Error(`Unknown platform '${platform}'.`);
   }
 
-  const childrenArray = Children.toArray(children);
+  const childrenArray = Children.toArray(<>{children}</>);
 
   const recommendation = platform
     ? childrenArray.find((child) => {

apps/docs/src/components/document/typography/iframe.tsx

@@ -48,7 +48,7 @@ export function IFrame({
       height={typeof height === 'number' ? `${height}px` : height}
       ref={setContentRef}
     >
-      {mountNode && createPortal(children, mountNode)}
+      {mountNode && createPortal(<>{children}</>, mountNode)}
     </iframe>
   );
 }

examples/nextjs/package.json

@@ -16,12 +16,8 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/node": "^20.14.14",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.13",
-    "postcss": "^8.4.40",
-    "tailwindcss": "^3.4.7"
+    "postcss": "^8.4.40"
   }
 }

examples/vite/package.json

@@ -16,14 +16,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "vite": "^5.3.6"
+    "eslint-plugin-react-refresh": "^0.4.9"
   }
 }

examples/vite/src/application.tsx

@@ -59,7 +59,7 @@ export function App() {
       <CookieBanner {...CookieBannerProps} />
       <Container>
         <Heading>Design System </Heading>
-        <Tabs id="tabs">
+        <Tabs id="tabs" ariaLabelledBy="">
           <TabList>
             <TabItem value="tab1" checked>
               Typography

package.json

@@ -17,19 +17,53 @@
     "ds:storybook": "nx run @govie-ds/docs:storybook",
     "build": "nx run-many --target=build --all",
     "build:libs": "nx run-many --target=build --all --exclude=@govie-ds/docs,@govie-ds/examples-vite,@govie-ds/examples-nextjs",
-    "test": "nx run-many --target=test --all --verbose",
+    "test": "nx run-many --target=test --all --exclude=@govie-frontend/storybook,@govie-react/storybook --verbose",
     "tokens:build": "nx run @govie-ds/tokens:build",
     "govie:build": "nx run @govie-ds/theme-govie:build",
     "figma:build": "nx run @govie-ds/figma:build",
     "html:storybook": "nx run @govie-frontend/storybook:dev",
     "html:storybook:build": "nx run @govie-frontend/storybook:build",
+    "html:storybook:test": "nx run @govie-frontend/storybook:test",
     "react:storybook": "nx run @govie-react/storybook:dev",
     "react:storybook:build": "nx run @govie-react/storybook:build",
+    "react:storybook:test": "nx run @govie-react/storybook:test",
     "examples:vite": "nx run @govie-ds/examples-vite:dev",
     "examples:nextjs": "nx run @govie-ds/examples-nextjs:dev"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-docs": "8.3.6",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-onboarding": "8.3.6",
+    "@storybook/addon-viewport": "8.3.6",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/react": "8.3.6",
+    "@storybook/react-vite": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@storybook/test-runner": "^0.19.1",
+    "@types/node": "^20.14.14",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/browser": "^2.1.3",
+    "axe-playwright": "^2.0.3",
+    "chromatic": "^11.7.1",
+    "concurrently": "^9.0.1",
+    "http-server": "^14.1.1",
     "nx": "^19.5.6",
-    "typescript": "^5.5.4"
+    "playwright": "^1.48.1",
+    "storybook": "8.3.6",
+    "tailwindcss": "3.4.14",
+    "typescript": "5.5.4",
+    "vite": "5.4.10",
+    "vitest": "2.1.3",
+    "wait-on": "^8.0.1"
+  },
+  "peerDependencies": {
+    "@vitest/spy": "2.1.3"
   }
 }

packages/design/figma/package.json

@@ -24,7 +24,6 @@
     "@govie-ds/eslint-config": "workspace:*",
     "@govie-ds/prettier-config": "workspace:*",
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.14.14",
     "eslint": "^9.8.0",
     "prettier": "^3.3.3",
     "tsx": "^4.16.5"

packages/design/tailwind/css/components.css

@@ -205,43 +205,28 @@
 
 /* Tabs */
 
-.tab-item:checked + label {
+.gi-tabs {
+  @apply gi-flex gi-flex-wrap;
+}
+
+.gi-tab-item {
+  @apply gi-inline-block gi-cursor-pointer gi-px-5 gi-py-2 gi-relative gi-mr-1 gi-bg-gray-50 gi-text-center gi-text-md gi-underline gi-text-gray-950;
+}
+
+.gi-tab-item-checked {
   @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline;
 }
 
-.tab-item:hover + label > * {
+.gi-tab-item:hover > * {
   @apply gi-decoration-lg;
 }
 
-.tab-item:focus + label > * {
+.gi-tab-item:focus > * {
   @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400;
 }
 
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(1):checked)
-  [role='tabpanel']:nth-of-type(2),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(2):checked)
-  [role='tabpanel']:nth-of-type(3),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(3):checked)
-  [role='tabpanel']:nth-of-type(4),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(4):checked)
-  [role='tabpanel']:nth-of-type(5),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(5):checked)
-  [role='tabpanel']:nth-of-type(6),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(6):checked)
-  [role='tabpanel']:nth-of-type(7),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(7):checked)
-  [role='tabpanel']:nth-of-type(8),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(8):checked)
-  [role='tabpanel']:nth-of-type(9),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(9):checked)
-  [role='tabpanel']:nth-of-type(10),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(10):checked)
-  [role='tabpanel']:nth-of-type(11),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(11):checked)
-  [role='tabpanel']:nth-of-type(12),
-div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(12):checked)
-  [role='tabpanel']:nth-of-type(13) {
-  display: block;
+.gi-tab-panel {
+  @apply gi-hidden gi-basis-full gi-border-xs gi-border-solid gi-border-gray-200 gi-bg-white gi-p-4;
 }
 
 /* End Tabs */

packages/design/tailwind/package.json

@@ -37,8 +37,6 @@
     "@tsconfig/node20": "^20.1.4",
     "eslint": "^9.8.0",
     "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.7",
-    "tsup": "^8.2.4",
-    "vitest": "^1.6.0"
+    "tsup": "^8.2.4"
   }
 }

packages/design/theme-builder/package.json

@@ -32,11 +32,9 @@
     "@govie-ds/prettier-config": "workspace:*",
     "@tsconfig/node20": "^20.1.4",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.14.14",
     "eslint": "^9.8.0",
     "prettier": "^3.3.3",
     "tsup": "^8.2.4",
-    "vitest": "^1.6.0",
     "zod": "^3.23.8",
     "zod-to-ts": "^1.2.0"
   }

packages/design/token-utils/package.json

@@ -29,7 +29,6 @@
     "@types/lodash": "^4.17.7",
     "eslint": "^9.8.0",
     "prettier": "^3.3.3",
-    "tsup": "^8.2.4",
-    "vitest": "^1.6.0"
+    "tsup": "^8.2.4"
   }
 }

packages/design/tokens-builder/package.json

@@ -32,7 +32,6 @@
     "@types/lodash": "^4.17.7",
     "eslint": "^9.8.0",
     "prettier": "^3.3.3",
-    "tsup": "^8.2.4",
-    "vitest": "^1.6.0"
+    "tsup": "^8.2.4"
   }
 }

packages/html/ds/package.json

@@ -41,29 +41,24 @@
     "@govie-ds/prettier-config": "workspace:*",
     "@govie-ds/tailwind": "workspace:*",
     "@govie-ds/macro": "workspace:*",
-    "@storybook/react": "^8.2.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/user-event": "^14.5.2",
     "@types/nunjucks": "^3.2.6",
-    "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
     "axe-core": "^4.10.0",
     "eslint": "^9.8.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.4.5",
-    "jsdom": "^24.1.1",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.40",
     "postcss-import": "^16.1.0",
     "prettier": "^3.3.3",
     "prettier-plugin-jinja-template": "^2.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.7",
     "tsx": "^4.16.5",
-    "vite": "^5.3.6",
     "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.6.0",
     "zod": "^3.23.8"
   }
 }

packages/html/ds/src/button/button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 import { renderComponent } from '../storybook/storybook';
 import { ButtonAppearance, ButtonProps } from './button-schema';
 import { ButtonVariant, ButtonSize } from './button-schema';
@@ -56,6 +57,12 @@ export const Default: Story = {
     content: 'Button',
     variant: ButtonVariant.Primary,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.hover(button);
+    await userEvent.click(button);
+  },
 };
 
 export const WithIcon: Story = {

packages/html/ds/src/common/instances.ts

@@ -3,6 +3,7 @@ import { CookieBanner } from '../cookie-banner/cookie-banner';
 import { Header } from '../header/header';
 import { Modal } from '../modal/modal';
 import { Radio } from '../radio/radio';
+import { Tabs } from '../tabs/tabs';
 import { Textarea } from '../textarea/textarea';
 import { BaseComponent, BaseComponentOptions } from './component';
 
@@ -17,6 +18,7 @@ const componentRegistry = {
   Textarea,
   Modal,
   CookieBanner,
+  Tabs,
   // TODO: additional component classes
 } as const;
 

packages/html/ds/src/index.ts

@@ -5,6 +5,7 @@ import { initHeader } from './header/header.js';
 import { initCheckboxes } from './checkbox/checkbox.js'; /* eslint-disable-line import/order */
 import { initModal } from './modal/modal.js';
 import { initRadios } from './radio/radio.js';
+import { initTabs } from './tabs/tabs.js';
 import { initTextarea } from './textarea/textarea.js';
 
 export * as properties from './dist/properties.js';
@@ -30,6 +31,7 @@ export function initGovIe() {
   initTextarea();
   initModal();
   initCookieBanner();
+  initTabs();
 }
 
 export function destroyGovIe() {
@@ -46,3 +48,4 @@ componentEvents.init();
 export * from './header/header.js';
 export * from './checkbox/checkbox.js';
 export * from './radio/radio.js';
+export * from './tabs/tabs.js';