DRAFT feat: integration with nuxt/test-utils

.gitignore

@@ -45,6 +45,15 @@ coverage
 *.iml
 .idea
 
+# Beads
+.beads
+.dolt
+.doltcfg
+beads_a11y
+.ralph-tui
+/tasks
+/config.yml
+
 # OSX
 .DS_Store
 .AppleDouble

build.config.test-utils.ts

@@ -0,0 +1,18 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/test-utils/index',
+    'src/test-utils/setup',
+    'src/test-utils/playwright',
+  ],
+  outDir: 'dist',
+  clean: false,
+  declaration: 'node16',
+  externals: [
+    'vitest',
+    'playwright-core',
+    'axe-core',
+    'linkedom',
+  ],
+})

build.config.ts

@@ -0,0 +1,13 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  hooks: {
+    'build:done'(ctx) {
+      for (const warning of ctx.warnings) {
+        if (warning.includes('test-utils')) {
+          ctx.warnings.delete(warning)
+        }
+      }
+    },
+  },
+})

client/app/components/ControlPanel.vue

@@ -117,7 +117,7 @@ async function handleCopyReport() {
           v-if="props.hasViolations"
           class="flex items-center gap-2"
         >
-          <span class="text-sm opacity-70">WCAG:</span>
+          <span class="text-sm opacity-70">WCAG Level Filter:</span>
           <NSelect
             :model-value="props.wcagFilter"
             aria-label="WCAG level filter"

package.json

@@ -10,21 +10,43 @@
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
+    },
+    "./test-utils": {
+      "types": "./dist/test-utils/index.d.mts",
+      "import": "./dist/test-utils/index.mjs"
+    },
+    "./test-utils/setup": {
+      "types": "./dist/test-utils/setup.d.mts",
+      "import": "./dist/test-utils/setup.mjs"
+    },
+    "./test-utils/playwright": {
+      "types": "./dist/test-utils/playwright.d.mts",
+      "import": "./dist/test-utils/playwright.mjs"
     }
   },
   "main": "./dist/module.mjs",
   "typesVersions": {
     "*": {
       ".": [
         "./dist/types.d.mts"
+      ],
+      "test-utils": [
+        "./dist/test-utils/index.d.mts"
+      ],
+      "test-utils/setup": [
+        "./dist/test-utils/setup.d.mts"
+      ],
+      "test-utils/playwright": [
+        "./dist/test-utils/playwright.d.mts"
       ]
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt-module-build build && npm run client:build",
+    "build": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt-module-build build && npm run build:test-utils && npm run client:build",
+    "build:test-utils": "unbuild --config build.config.test-utils",
     "client:build": "nuxt generate client",
     "client:dev": "nuxt dev client --port 3030",
     "dev": "npm run play:dev",
@@ -45,6 +67,18 @@
     "linkedom": "^0.18.12",
     "sirv": "^3.0.2"
   },
+  "peerDependencies": {
+    "vitest": ">=1.0.0",
+    "playwright-core": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vitest": {
+      "optional": true
+    },
+    "playwright-core": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.18",
     "@nuxt/devtools": "latest",
@@ -62,6 +96,7 @@
     "pkg-pr-new": "0.0.63",
     "playwright-core": "1.58.2",
     "typescript": "~5.9.3",
+    "unbuild": "^3.6.1",
     "vite": "7.3.1",
     "vitest": "4.0.18",
     "vue-tsc": "3.2.5"

playground/A11Y-ISSUES.md

@@ -56,6 +56,21 @@ This playground app contains intentional accessibility issues for testing the Nu
 - ❌ iframe without title
 - ❌ FAQ not using proper disclosure pattern (button/details)
 
+### Interactive Page (/interactive)
+This page demonstrates **dynamic** a11y violations that appear on user interaction, designed to showcase the "Auto-scan on user events" feature.
+
+- ❌ Dynamically injected images without alt text (notifications, profile preview, products)
+- ❌ Low contrast text on dynamic content (#bbb, #aaa, #999, #ccc)
+- ❌ Heading level skip (h1 to h4, h4 to h6 in preview)
+- ❌ Form inputs without labels (placeholders only)
+- ❌ Select without label
+- ❌ onClick on div instead of button (product "Buy Now")
+- ❌ Non-descriptive link text ("Learn More")
+- ❌ Button with no accessible name (comment submit)
+- ❌ Checkboxes without proper label association (filters)
+- ❌ Filter toggles using div+click instead of disclosure buttons
+- ❌ Icon without accessible name (comment icon)
+
 ## Testing the A11y Plugin
 
 1. Run the playground: `pnpm run dev`
@@ -74,5 +89,6 @@ This playground app contains intentional accessibility issues for testing the Nu
 - **/** - Home page with hero, services, CTA, gallery, and newsletter
 - **/about-us** - About page with mission, team, values, stats, and timeline
 - **/contact** - Contact page with form, info, map, and FAQ
+- **/interactive** - Interactive dashboard with dynamic content for auto-scan demo
 
 All pages include a shared header and footer with navigation.

playground/app/layouts/default.vue

@@ -32,6 +32,10 @@
               to="/contact"
               style="color: #aaa"
             >Contact</nuxt-link>
+            <nuxt-link
+              to="/interactive"
+              style="color: #aaa"
+            >Interactive</nuxt-link>
 
             <!-- Issue: Button without accessible name -->
             <button