fix(a11y): keep summary above scrolled violations

[SaKaNa-Y]

Problem

In a short A11y Inspector dock, scrolling the violation list could paint violation rows over the sticky summary controls. This left the summary partially visible but made its lower actions inaccessible.

Cause

The summary used z-[2], but the shared @antfu/design UnoCSS preset blocks unnamed numeric z-index utilities. The class therefore produced no z-index rule, allowing later positioned violation rows to paint above the sticky summary.

Fix

Use the shared z-nav layer for the sticky summary. Add a 360px-height regression test that scrolls the panel, verifies every summary button remains the pointer hit target, and confirms a severity filter is still interactive.

Verification

• pnpm lint
• pnpm knip
• pnpm typecheck — 39/39 tasks passed
• pnpm test — 128 files passed; 1,453 tests passed and 9 skipped; no type errors
• pnpm build — 27/27 tasks passed
• pnpm exec playwright test --config .tmp-playwright.config.ts tests/e2e/a11y-messages-hub-static.spec.ts — 4/4 tests passed using the installed system Chrome

[coldtea-pr-lens]

◈ PR Lens

🟢 +0 new · 🟠 ~1 changed · 🔴 -0 removed · 0 flows · 2 files · commit 45455fb

Architecture

1 component touched across 4 lanes.

Open full size

Data flow

No data-flow sequence changed in this PR.

Drill down

Built-in Devframes — 1 component

🟡 CHANGED A11y Inspector Devframe

Accessibility inspector panel that scans connected documents and provides summary controls and violation lists.

• plugins/a11y/app/components/SummaryBar.tsx:41
• tests/e2e/a11y-messages-hub-static.spec.ts:37-62

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

GitHub will not let you zoom an image in a comment. The link under each diagram opens it full size on a page of its own, where you can.

🪧 More tips

• Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• PR Lens is free for open source. A star on the repository is what keeps it going.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Something drawn wrong?

[vercel]

@SaKaNa-Y is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.