[dev-overlay] add a11y test (#75523)

Added a11y test, but haven't enabled for the CI. Will follow up to
resolve the test result.

![CleanShot 2025-02-01 at 03 20
54](https://github.com/user-attachments/assets/7315d740-dec1-4327-977b-8a8f3b06e95e)

You can manually test a11y at the storybook portal:


https://github.com/user-attachments/assets/72929e65-bd70-481e-ac2f-1b518c344373

Closes https://linear.app/vercel/issue/NDX-584/add-a11y-tests

package.json

@@ -67,7 +67,8 @@
     "sweep": "node scripts/sweep.cjs",
     "check-error-codes": "node packages/next/check-error-codes.js",
     "storybook": "turbo run storybook",
-    "build-storybook": "turbo run build-storybook"
+    "build-storybook": "turbo run build-storybook",
+    "test-storybook": "turbo run test-storybook"
   },
   "devDependencies": {
     "@actions/core": "1.10.1",

packages/next/.storybook/main.ts

@@ -19,6 +19,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

packages/next/.storybook/preview.ts

@@ -2,6 +2,9 @@ import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {
+    a11y: {
+      element: 'nextjs-portal',
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -19,6 +22,12 @@ const preview: Preview = {
       default: 'backdrop',
     },
   },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
 }
 
 export default preview

packages/next/.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, 'nextjs-portal', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    })
+  },
+}
+
+export default config

packages/next/package.json

@@ -88,7 +88,8 @@
     "typescript": "tsec --noEmit",
     "ncc-compiled": "taskr ncc",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook"
   },
   "taskr": {
     "requires": [
@@ -227,6 +228,7 @@
     "assert": "2.0.0",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
+    "axe-playwright": "2.0.3",
     "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",

packages/next/test-runner-jest.config.js

@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { getJestConfig } = require('@storybook/test-runner')
+
+// The default Jest configuration comes from @storybook/test-runner
+const testRunnerConfig = getJestConfig()
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  ...testRunnerConfig,
+  /** Add your own overrides below, and make sure
+   *  to merge testRunnerConfig properties with your own
+   * @see https://jestjs.io/docs/configuration
+   */
+  rootDir: '<rootDir>/../src/client/components/react-dev-overlay/',
+  testMatch: ['**/*.stories.tsx', '**/*.test.tsx'],
+}

turbo.json

@@ -15,6 +15,9 @@
       "dependsOn": ["^build-storybook"],
       "outputs": ["storybook-static/**"]
     },
+    "test-storybook": {
+      "dependsOn": ["^test-storybook"]
+    },
     "typescript": {},
     "//#typescript": {},
     "//#get-test-timings": {