ci: run a11y tests in their own CI job, separate from e2e

.github/workflows/ci.yml

@@ -127,3 +127,58 @@ jobs:
           name: playwright-results
           path: test/e2e/.results
           retention-days: 7
+
+  a11y:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v7
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Set node
+        uses: actions/setup-node@v7
+        with:
+          node-version: lts/*
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      # The orchestrator runs `pnpm build` + `pnpm web:build` itself; no
+      # separate build step needed here.
+
+      - name: Get Playwright version
+        id: pw-version
+        run: |
+          version=$(node -p "require('@playwright/test/package.json').version")
+          echo "version=$version" >> "$GITHUB_OUTPUT"
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v6
+        id: pw-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.pw-version.outputs.version }}
+
+      - name: Install Playwright browser
+        if: steps.pw-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Install Playwright system deps
+        if: steps.pw-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium
+
+      - name: A11y
+        run: nr test:a11y
+
+      - name: Upload Playwright artifacts
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-results-a11y
+          path: test/e2e/.results
+          retention-days: 7

AGENTS.md

@@ -14,7 +14,7 @@ RPC functions live in `packages/node-modules-inspector/src/node/rpc/<name>.ts` 
 
 - `pnpm dev` — dev server
 - `pnpm build` — full build
-- `pnpm test` / `pnpm test:e2e` — vitest / playwright
+- `pnpm test` / `pnpm test:e2e` / `pnpm test:a11y` — vitest / playwright e2e / playwright accessibility (axe-core)
 - `pnpm lint` / `pnpm typecheck`
 
 ## Conventions

package.json

@@ -17,7 +17,8 @@
     "prepare": "npx simple-git-hooks && pnpm -C packages/node-modules-inspector run dev:prepare && skills-npm",
     "lint": "pnpm -C packages/node-modules-inspector run dev:prepare && eslint .",
     "test": "vitest",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --project=dev --project=build --project=webcontainer --project=instant --project=build-subbase",
+    "test:a11y": "playwright test --project=a11y",
     "test:e2e:install": "playwright install chromium",
     "release": "bumpp -r",
     "typecheck": "vue-tsc --noEmit"

packages/node-modules-inspector/src/app/components/panel/Overview.vue

@@ -71,7 +71,7 @@ const timepassed = computed(() => rawPayload.value?.timestamp ? Date.now() - raw
         flex="~ gap-2 items-center"
       >
         <div i-catppuccin-npm icon-catppuccin flex-none />
-        <span>npm registry</span>
+        <a break-after-all text-left leading-none href="https://registry.npmjs.org" target="_blank" hover="underline">npm registry</a>
         <span
           v-tooltip="'The graph is resolved from registry metadata without a real install — versions, deduplication, and sizes are approximate. Use Sandbox Install mode for full fidelity.'"
           badge-color-amber px1.5 rounded text-xs

packages/node-modules-inspector/src/uno.config.ts

@@ -63,6 +63,12 @@ export default defineConfig({
         'badge-color-green': 'bg-green-400/20 dark:bg-green-400/10 text-green-800 dark:text-green-300 border border-green-600/15 dark:border-green-300/15',
         'badge-color-lime': 'bg-lime-400/20 dark:bg-lime-400/10 text-lime-800 dark:text-lime-300 border border-lime-600/15 dark:border-lime-300/15',
         'badge-color-teal': 'bg-teal-400/20 dark:bg-teal-400/10 text-teal-800 dark:text-teal-300 border border-teal-600/15 dark:border-teal-300/15',
+        // `NodeVersionRange` pairs this badge with `!bg-active` (the surface
+        // color for a "valid" engine range) instead of the badge's own
+        // translucent bg-400/10 — against that solid, lighter surface, the
+        // default `dark:text-gray-300` only clears 4.13:1 (axe-core-measured).
+        // Bump to the 200 shade (~4.9:1) like the hue-specific overrides above.
+        'badge-color-gray': 'bg-gray-400/20 dark:bg-gray-400/10 text-gray-700 dark:text-gray-200 border border-gray-600/15 dark:border-gray-300/15',
       },
     }),
     presetWind3(),

packages/node-modules-tools/src/registry/resolve.test.ts

@@ -319,10 +319,10 @@ describe('resolveRegistryDependencies', () => {
 
   it('excludes a package and its exclusively-reachable dependencies', async () => {
     const { fetch, requests } = createMockRegistry({
-      nuxt: { versions: { '3.0.0': { dependencies: { '@nuxt/kit': '^3.0.0', 'h3': '^1.0.0' } } } },
-      '@nuxt/kit': { versions: { '3.0.0': { dependencies: { 'unctx': '^2.0.0' } } } },
-      unctx: { versions: { '2.0.0': {} } },
-      h3: { versions: { '1.0.0': {} } },
+      'nuxt': { versions: { '3.0.0': { dependencies: { '@nuxt/kit': '^3.0.0', 'h3': '^1.0.0' } } } },
+      '@nuxt/kit': { versions: { '3.0.0': { dependencies: { unctx: '^2.0.0' } } } },
+      'unctx': { versions: { '2.0.0': {} } },
+      'h3': { versions: { '1.0.0': {} } },
     })
 
     const result = await resolveRegistryDependencies({
@@ -341,9 +341,9 @@ describe('resolveRegistryDependencies', () => {
 
   it('keeps a shared dep still reachable from a non-excluded path', async () => {
     const { fetch } = createMockRegistry({
-      nuxt: { versions: { '3.0.0': { dependencies: { '@nuxt/kit': '^3.0.0', 'vite': '^5.0.0' } } } },
+      'nuxt': { versions: { '3.0.0': { dependencies: { '@nuxt/kit': '^3.0.0', 'vite': '^5.0.0' } } } },
       '@nuxt/kit': { versions: { '3.0.0': { dependencies: { vite: '^5.0.0' } } } },
-      vite: { versions: { '5.0.0': {} } },
+      'vite': { versions: { '5.0.0': {} } },
     })
 
     const result = await resolveRegistryDependencies({

test/e2e/instant.spec.ts

@@ -87,7 +87,7 @@ async function mockRegistry(page: Page): Promise<void> {
 test.describe('hosted instant mode', () => {
   test('landing defaults to Instant mode with a Sandbox toggle', async ({ page }) => {
     await page.goto('/')
-    await expect(page.getByRole('button', { name: 'Instant', exact: true })).toBeVisible({ timeout: 30_000 })
+    await expect(page.getByRole('button', { name: 'Registry Query', exact: true })).toBeVisible({ timeout: 30_000 })
     await expect(page.getByRole('button', { name: 'Sandbox Install' })).toBeVisible()
     await expect(page.getByPlaceholder('Enter package names')).toBeVisible()