Welcome to the broken shop
+Featured (heading level skips from 1 to 4)
+})
+ An icon-only button with no accessible name:
+ +A link with no discernible text:
+ + `, + }, + { + path: '/images', + label: 'Images', + hint: 'image-alt (several)', + render: () => ` +Gallery
+
+ ${['#c0653a', '#3a8fc0', '#4aa06a', '#b04a9a']
+ .map(c => `})
`)
+ .join('')}
+
+ `)
+ .join('')}
+ None of the images above carry an alt attribute.
Checkout
+ +The inputs and the select have no associated labels; the checkbox's + text is not programmatically linked.
+ `, + }, + { + path: '/contrast', + label: 'Contrast', + hint: 'color-contrast · region (best-practice)', + render: () => ` +Low-contrast heading
++ This paragraph sets light grey text on a white background — well below + the WCAG AA contrast ratio for body text. +
+ + Yellow-on-white call to action + + +The grey square is a custom control with a role but no accessible name.
+ `, + }, +] + +/** A tiny inline SVG banner used as decorative (alt-less) imagery. */ +function banner(color: string): string { + return encodeURIComponent( + ``, + ) +} + +function currentRoute(): Route { + return ROUTES.find(r => r.path === location.pathname) ?? ROUTES[0]! +} + +/** + * Mount the app-under-test into `container`. Renders a route nav plus the + * current route's (deliberately broken) content, and navigates with + * `history.pushState` so the a11y agent re-scans and buckets per route. + */ +export function mountAppUnderTest(container: HTMLElement): void { + function render(): void { + const active = currentRoute() + container.innerHTML = ` + +Route ${active.path} · seeds: ${active.hint}
+
setDialogOpen(true)}
onRescan={channel.rescan}
/>
- 0}>
-
+
+
+export default meta
+type Story = StoryObj
+
+export const NoPage: Story = {
+ args: {
+ icon: 'i-ph-plugs-duotone text-4xl',
+ title: 'No page connected',
+ body: 'Load the inspector agent in the app you want to check, then this panel will list its accessibility issues live.',
+ code: '',
+ },
+}
+
+export const Scanning: Story = {
+ args: {
+ icon: 'i-ph-plugs-duotone text-4xl',
+ title: 'Scanning the page…',
+ body: 'Running axe-core against the connected document.',
+ },
+}
+
+export const Clean: Story = {
+ args: {
+ clean: true,
+ icon: 'i-ph-check-circle-duotone text-4xl',
+ title: 'No violations',
+ body: 'axe-core found nothing to flag across the tracked routes.',
+ },
+}
diff --git a/plugins/a11y/src/spa/components/EmptyState.tsx b/plugins/a11y/src/spa/components/EmptyState.tsx
new file mode 100644
index 00000000..40c46786
--- /dev/null
+++ b/plugins/a11y/src/spa/components/EmptyState.tsx
@@ -0,0 +1,32 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+interface EmptyStateProps {
+ /** Icon utility class (with its own size), e.g. `i-ph-plugs-duotone text-4xl`. */
+ icon: string
+ title: string
+ body: JSX.Element
+ /** Tints the glyph success-green for the "all clear" case. */
+ clean?: boolean
+ /** Optional code snippet shown below the body. */
+ code?: string
+}
+
+/**
+ * The centered full-height message shown when there's nothing to list: no page
+ * connected, scanning, all-clear, or filtered-to-empty.
+ */
+export function EmptyState(props: EmptyStateProps) {
+ return (
+
+
+export default meta
+type Story = StoryObj
+
+const items: SelectedItem[] = [
+ { route: '/', url: 'https://example.test/', violation: makeViolation('image-alt', 'critical', 1) },
+ { route: '/forms', url: 'https://example.test/forms', violation: makeViolation('label', 'serious', 1) },
+]
+
+export const TwoViolations: Story = { args: { items, onClose: () => {} } }
diff --git a/plugins/a11y/src/spa/components/FixPromptsDialog.tsx b/plugins/a11y/src/spa/components/FixPromptsDialog.tsx
new file mode 100644
index 00000000..630f3c88
--- /dev/null
+++ b/plugins/a11y/src/spa/components/FixPromptsDialog.tsx
@@ -0,0 +1,89 @@
+import type { SelectedItem } from '../lib/fix-prompt.ts'
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { button } from '../design'
+import { buildFixPrompt } from '../lib/fix-prompt.ts'
+
+export type { SelectedItem } from '../lib/fix-prompt.ts'
+
+interface FixPromptsDialogProps {
+ items: SelectedItem[]
+ onClose: () => void
+}
+
+/**
+ * A modal listing the AI fix prompt for the selected violations, with a copy
+ * button. Built to the same accessibility bar the tool enforces: labelled
+ * dialog, Escape/backdrop to close, focus moved in on open.
+ */
+export function FixPromptsDialog(props: FixPromptsDialogProps) {
+ const prompt = createMemo(() => buildFixPrompt(props.items))
+ const ruleCount = () => props.items.length
+ const [copied, setCopied] = createSignal(false)
+ let closeBtn: HTMLButtonElement | undefined
+
+ function copy() {
+ void navigator.clipboard?.writeText(prompt()).then(() => {
+ setCopied(true)
+ setTimeout(setCopied, 1500, false)
+ })
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === 'Escape')
+ props.onClose()
+ }
+
+ onMount(() => {
+ addEventListener('keydown', onKeyDown)
+ closeBtn?.focus()
+ })
+ onCleanup(() => removeEventListener('keydown', onKeyDown))
+
+ return (
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/Header.stories.tsx b/plugins/a11y/src/spa/components/Header.stories.tsx
new file mode 100644
index 00000000..d54a8b40
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Header.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { Header } from './Header.tsx'
+
+// The top nav bar: brand, connection status dot, generate-prompts, and rescan.
+const meta = {
+ title: 'A11y/Header',
+ component: Header,
+ parameters: { layout: 'fullscreen' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+const base = { selectedCount: 0, onGenerate: noop, onRescan: noop }
+
+export const Connected: Story = { args: { ...base, agentReady: true, scanning: false } }
+export const Scanning: Story = { args: { ...base, agentReady: true, scanning: true } }
+export const WithSelection: Story = { args: { ...base, agentReady: true, scanning: false, selectedCount: 3 } }
+export const Disconnected: Story = { args: { ...base, agentReady: false, scanning: false } }
diff --git a/plugins/a11y/src/spa/components/Header.tsx b/plugins/a11y/src/spa/components/Header.tsx
new file mode 100644
index 00000000..3fd0c7ca
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Header.tsx
@@ -0,0 +1,56 @@
+import { Show } from 'solid-js'
+import { button, nav, navBrand } from '../design'
+
+interface HeaderProps {
+ agentReady: boolean
+ scanning: boolean
+ selectedCount: number
+ onGenerate: () => void
+ onRescan: () => void
+}
+
+/** The top nav bar: brand, connection status, generate-prompts, and rescan. */
+export function Header(props: HeaderProps) {
+ const statusLabel = () =>
+ !props.agentReady ? 'No page connected' : props.scanning ? 'Scanning…' : 'Connected'
+ const dotClass = () =>
+ !props.agentReady ? 'bg-neutral-400' : props.scanning ? 'bg-primary-500 animate-pulse' : 'bg-success'
+
+ return (
+
+
+
+ A11y Inspector
+
+
+
+
+ {statusLabel()}
+
+
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/MetaLine.stories.tsx b/plugins/a11y/src/spa/components/MetaLine.stories.tsx
new file mode 100644
index 00000000..d03a1fab
--- /dev/null
+++ b/plugins/a11y/src/spa/components/MetaLine.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { MetaLine } from './MetaLine.tsx'
+
+// The mono meta strip under the nav: scanned URL, backend tag, axe version.
+const meta = {
+ title: 'A11y/MetaLine',
+ component: MetaLine,
+ parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const base = {
+ url: 'https://example.test/checkout',
+ engine: '4.10.0',
+ backend: () => 'websocket',
+ status: () => 'connected',
+}
+
+/** Live dev server (WebSocket backend). */
+export const Dev: Story = { args: base }
+
+/** Baked static build. */
+export const Static: Story = { args: { ...base, backend: () => 'static' } }
+
+/** Degraded backend connection — surfaced as a quiet amber tag. */
+export const Degraded: Story = { args: { ...base, status: () => 'disconnected' } }
diff --git a/plugins/a11y/src/spa/components/MetaLine.tsx b/plugins/a11y/src/spa/components/MetaLine.tsx
new file mode 100644
index 00000000..0e0d4801
--- /dev/null
+++ b/plugins/a11y/src/spa/components/MetaLine.tsx
@@ -0,0 +1,38 @@
+import { Show } from 'solid-js'
+
+interface MetaLineProps {
+ url?: string
+ engine?: string
+ backend: () => string | null
+ status?: () => string | null
+}
+
+/** The mono meta strip under the nav: scanned URL, backend tag, axe version. */
+export function MetaLine(props: MetaLineProps) {
+ // The backend is optional here, so a degraded connection is shown as a quiet
+ // tag rather than taking over the panel.
+ const degraded = () => {
+ const s = props.status?.()
+ return s === 'disconnected' || s === 'unauthorized' || s === 'error' ? s : null
+ }
+ return (
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/RouteGroup.stories.tsx b/plugins/a11y/src/spa/components/RouteGroup.stories.tsx
new file mode 100644
index 00000000..5afdb10d
--- /dev/null
+++ b/plugins/a11y/src/spa/components/RouteGroup.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { makeReport, makeViolation, stubChannel, stubSelection } from './_fixtures.ts'
+import { RouteGroup } from './RouteGroup.tsx'
+
+// A collapsible group of one route's violations, headed by its path + counts.
+const meta = {
+ title: 'A11y/RouteGroup',
+ component: RouteGroup,
+ parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+const violations = [makeViolation('image-alt', 'critical', 2), makeViolation('label', 'serious', 1)]
+const base = {
+ report: makeReport('/forms', violations),
+ violations,
+ onToggleGroup: noop,
+ onClearRoute: noop,
+ expandedRules: new Set(['/forms::image-alt']),
+ onToggleRule: noop,
+ channel: stubChannel,
+ selection: stubSelection,
+}
+
+export const ActiveExpanded: Story = { args: { ...base, active: true, collapsed: false } }
+export const Collapsed: Story = { args: { ...base, active: false, collapsed: true } }
diff --git a/plugins/a11y/src/spa/components/RouteGroup.tsx b/plugins/a11y/src/spa/components/RouteGroup.tsx
new file mode 100644
index 00000000..c91c57f4
--- /dev/null
+++ b/plugins/a11y/src/spa/components/RouteGroup.tsx
@@ -0,0 +1,71 @@
+import type { ScanReport, Violation } from '../../shared/protocol.ts'
+import type { A11yChannel } from '../lib/channel.ts'
+import type { SelectionApi } from '../lib/violation-view.ts'
+import { For, Show } from 'solid-js'
+import { ViolationRow } from './ViolationRow.tsx'
+
+interface RouteGroupProps {
+ report: ScanReport
+ active: boolean
+ violations: Violation[]
+ collapsed: boolean
+ onToggleGroup: () => void
+ onClearRoute: () => void
+ expandedRules: Set
+ onToggleRule: (ruleId: string) => void
+ channel: A11yChannel
+ selection: SelectionApi
+}
+
+/** A collapsible group of one route's violations, headed by its path + counts. */
+export function RouteGroup(props: RouteGroupProps) {
+ return (
+
+
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/Summary.stories.tsx b/plugins/a11y/src/spa/components/Summary.stories.tsx
new file mode 100644
index 00000000..8eb115d7
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Summary.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { Summary } from './Summary.tsx'
+
+// The severity summary chips — the one expressive, domain-specific color in the
+// inspector, and the impact filter. Presentational: driven by per-impact counts.
+const meta = {
+ title: 'A11y/Summary',
+ component: Summary,
+ parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+const counts = { critical: 3, serious: 5, moderate: 2, minor: 8 }
+
+export const Issues: Story = { args: { counts, active: null, onToggle: noop } }
+export const Filtered: Story = { args: { counts, active: 'serious', onToggle: noop } }
+export const Clean: Story = {
+ args: { counts: { critical: 0, serious: 0, moderate: 0, minor: 0 }, active: null, onToggle: noop },
+}
diff --git a/plugins/a11y/src/spa/components/Summary.tsx b/plugins/a11y/src/spa/components/Summary.tsx
new file mode 100644
index 00000000..3d284a0d
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Summary.tsx
@@ -0,0 +1,57 @@
+import type { Impact } from '../../shared/protocol.ts'
+import { For } from 'solid-js'
+import { IMPACT_COLOR, IMPACT_LABEL } from '../lib/impact.ts'
+
+interface SummaryProps {
+ counts: Record
+ active: Impact | null
+ onToggle: (impact: Impact) => void
+ /** Hover/focus a chip to preview every element of that impact in the page. */
+ onHover?: (impact: Impact | null) => void
+}
+
+const IMPACTS: Impact[] = ['critical', 'serious', 'moderate', 'minor']
+
+/**
+ * The severity summary chips — also the impact filter. The one expressive,
+ * domain-specific color (WCAG severity) rides an inline `--impact` CSS var so
+ * the utility classes can reference it.
+ */
+export function Summary(props: SummaryProps) {
+ return (
+
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+const base = {
+ counts: { critical: 3, serious: 5, moderate: 2, minor: 8 },
+ filter: null,
+ onToggleFilter: noop,
+ onHoverImpact: noop,
+ totalNodes: 18,
+ totalRules: 7,
+ routeCount: 3,
+ selectedCount: 0,
+ allSelected: false,
+ onSelectAll: noop,
+ onInvertSelection: noop,
+ onClearSelection: noop,
+ autoScan: true,
+ onToggleAutoScan: noop,
+ showBestPractice: true,
+ onToggleBestPractice: noop,
+ onClearAll: noop,
+}
+
+export const Overview: Story = { args: base }
+export const Filtered: Story = { args: { ...base, filter: 'serious' } }
+export const WithSelection: Story = { args: { ...base, selectedCount: 4 } }
+export const AllSelected: Story = { args: { ...base, selectedCount: 7, allSelected: true } }
diff --git a/plugins/a11y/src/spa/components/SummaryBar.tsx b/plugins/a11y/src/spa/components/SummaryBar.tsx
new file mode 100644
index 00000000..dc70547d
--- /dev/null
+++ b/plugins/a11y/src/spa/components/SummaryBar.tsx
@@ -0,0 +1,105 @@
+import type { Impact } from '../../shared/protocol.ts'
+import { Show } from 'solid-js'
+import { Summary } from './Summary.tsx'
+import { Switch } from './Switch.tsx'
+
+interface SummaryBarProps {
+ counts: Record
+ filter: Impact | null
+ onToggleFilter: (impact: Impact) => void
+ onHoverImpact: (impact: Impact | null) => void
+ totalNodes: number
+ totalRules: number
+ routeCount: number
+ /** Number of violations currently selected. */
+ selectedCount: number
+ /** Whether every currently-visible violation is selected. */
+ allSelected: boolean
+ /** Select all visible violations. */
+ onSelectAll: () => void
+ /** Invert the selection across the visible violations. */
+ onInvertSelection: () => void
+ /** Clear the entire selection (including any hidden by the filter). */
+ onClearSelection: () => void
+ autoScan: boolean
+ onToggleAutoScan: (enabled: boolean) => void
+ showBestPractice: boolean
+ onToggleBestPractice: (show: boolean) => void
+ onClearAll: () => void
+}
+
+const ACTION = 'inline-flex items-center gap-1.5 text-xs color-muted bg-secondary border border-base rounded-md px-2.5 py-1 cursor-pointer transition hover:bg-active outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:op-40 disabled:cursor-default'
+
+/**
+ * The compact, sticky summary band that heads the single-page panel: the
+ * severity chips (doubling as the impact filter), a one-line count, bulk
+ * selection actions, and the scan / best-practice / clear controls.
+ */
+export function SummaryBar(props: SummaryBarProps) {
+ const plural = (n: number, one: string) => `${n} ${n === 1 ? one : `${one}s`}`
+ return (
+
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+
+export const On: Story = { args: { label: 'Auto-scan', checked: true, onChange: noop } }
+export const Off: Story = { args: { label: 'Best-practice', checked: false, onChange: noop } }
diff --git a/plugins/a11y/src/spa/components/Switch.tsx b/plugins/a11y/src/spa/components/Switch.tsx
new file mode 100644
index 00000000..1de6fcca
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Switch.tsx
@@ -0,0 +1,23 @@
+interface SwitchProps {
+ label: string
+ checked: boolean
+ onChange: (checked: boolean) => void
+}
+
+/** A small labelled toggle switch, styled from `@antfu/design` semantic tokens. */
+export function Switch(props: SwitchProps) {
+ return (
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/ViolationList.stories.tsx b/plugins/a11y/src/spa/components/ViolationList.stories.tsx
new file mode 100644
index 00000000..f2f82b3c
--- /dev/null
+++ b/plugins/a11y/src/spa/components/ViolationList.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { sampleGroups, stubChannel, stubSelection } from './_fixtures.ts'
+import { ViolationList } from './ViolationList.tsx'
+
+// The full, per-route-grouped violation list.
+const meta = {
+ title: 'A11y/ViolationList',
+ component: ViolationList,
+ parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function noop() {}
+
+export const Grouped: Story = {
+ args: {
+ groups: sampleGroups,
+ collapsedRoutes: new Set(['/about']),
+ onToggleGroup: noop,
+ onClearRoute: noop,
+ expandedRules: new Set(['/::image-alt']),
+ onToggleRule: noop,
+ channel: stubChannel,
+ selection: stubSelection,
+ },
+}
diff --git a/plugins/a11y/src/spa/components/ViolationList.tsx b/plugins/a11y/src/spa/components/ViolationList.tsx
new file mode 100644
index 00000000..75b31da2
--- /dev/null
+++ b/plugins/a11y/src/spa/components/ViolationList.tsx
@@ -0,0 +1,39 @@
+import type { A11yChannel } from '../lib/channel.ts'
+import type { RouteGroupModel, SelectionApi } from '../lib/violation-view.ts'
+import { For } from 'solid-js'
+import { RouteGroup } from './RouteGroup.tsx'
+
+interface ViolationListProps {
+ groups: RouteGroupModel[]
+ collapsedRoutes: Set
+ onToggleGroup: (route: string) => void
+ onClearRoute: (route: string) => void
+ expandedRules: Set
+ onToggleRule: (route: string, ruleId: string) => void
+ channel: A11yChannel
+ selection: SelectionApi
+}
+
+/** The full, per-route-grouped violation list. */
+export function ViolationList(props: ViolationListProps) {
+ return (
+
{announce()}
+{announce()}
-
+
{/* No agent has announced itself on this origin yet. */}
-
-
-
- {/* Agent present, first report not in yet. */}
-
-
+
- {/* Report in, zero violations. */}
-
-
+
- {/* Filter active but empty for that impact. */}
-
-
+
- {/* The list. */}
- 0}>
- 0}>
+ 0}
+ fallback={(
+
+ {totalFilterable()}
+ {' '}
+ {totalFilterable() === 1 ? 'rule' : 'rules'}
+ {' at other severities. Clear the filter to see them.'}
+
+ )}
+ />
+ )}
+ >
+
+
+ 0}>
+ setDialogOpen(false)} />
+
)
}
diff --git a/plugins/a11y/src/spa/components/EmptyState.stories.tsx b/plugins/a11y/src/spa/components/EmptyState.stories.tsx
new file mode 100644
index 00000000..bfe2494c
--- /dev/null
+++ b/plugins/a11y/src/spa/components/EmptyState.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { EmptyState } from './EmptyState.tsx'
+
+// The centered full-height message shown when there's nothing to list.
+const meta = {
+ title: 'A11y/EmptyState',
+ component: EmptyState,
+ parameters: { layout: 'fullscreen' },
+} satisfies Meta
-
- No page connected
-- Load the inspector agent in the app you want to check, then this - panel will list its accessibility issues live. -
-{SNIPPET}
-
-
+ Scanning the page…
-Running axe-core against the connected document.
-
-
+ {/* Agent present, first state not in yet. */}
+ No WCAG A & AA violations
-- axe-core found nothing to flag on this page. Re-run after changes - to keep it that way. -
-
-
+ {/* Report in, nothing to flag. */}
+ - No - {' '} - {filter() ? IMPACT_LABEL[filter()!] : ''} - {' '} - issues -
-- {total()} - {' '} - {total() === 1 ? 'issue' : 'issues'} - {' '} - at other severities. Clear the filter to see them. -
-
+
+
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/FixPromptsDialog.stories.tsx b/plugins/a11y/src/spa/components/FixPromptsDialog.stories.tsx
new file mode 100644
index 00000000..86b23006
--- /dev/null
+++ b/plugins/a11y/src/spa/components/FixPromptsDialog.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import type { SelectedItem } from './FixPromptsDialog.tsx'
+import { makeViolation } from './_fixtures.ts'
+import { FixPromptsDialog } from './FixPromptsDialog.tsx'
+
+// The fix-prompts dialog: gathers the selected violations' context into one
+// paste-ready AI prompt, with a copy button.
+const meta = {
+ title: 'A11y/FixPromptsDialog',
+ component: FixPromptsDialog,
+ parameters: { layout: 'fullscreen' },
+} satisfies Meta{props.title}
+{props.body}
+
+ {props.code}
+
+
+ {props.url}
+ {b => {b()}} }
+ >
+ {s => {s()}}
+
+
+
+ axe
+ {' '}
+ {props.engine}
+
+
+
+
+
+
+
+ -
+
+
+ {(impact) => {
+ const count = () => props.counts[impact]
+ const pressed = () => props.active === impact
+ return (
+
+ )
+ }}
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/SummaryBar.stories.tsx b/plugins/a11y/src/spa/components/SummaryBar.stories.tsx
new file mode 100644
index 00000000..617765f2
--- /dev/null
+++ b/plugins/a11y/src/spa/components/SummaryBar.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { SummaryBar } from './SummaryBar.tsx'
+
+// The single-page summary band: severity chips (impact filter), a one-line
+// count, and the scan / best-practice / clear controls.
+const meta = {
+ title: 'A11y/SummaryBar',
+ component: SummaryBar,
+ parameters: { layout: 'padded' },
+} satisfies Meta
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/Switch.stories.tsx b/plugins/a11y/src/spa/components/Switch.stories.tsx
new file mode 100644
index 00000000..b1608fad
--- /dev/null
+++ b/plugins/a11y/src/spa/components/Switch.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { Switch } from './Switch.tsx'
+
+// The small labelled toggle used for the scan / best-practice controls.
+const meta = {
+ title: 'A11y/Switch',
+ component: Switch,
+ parameters: { layout: 'centered' },
+} satisfies Meta
+
+ {plural(props.totalNodes, 'issue')}
+ {' · '}
+ {plural(props.totalRules, 'rule')}
+ {' · '}
+ {plural(props.routeCount, 'route')}
+
+
+
+
+
+
+ 0}>
+
+
+
+
+
+
+
+
+ {group => (
+ props.onToggleGroup(group.report.route)}
+ onClearRoute={() => props.onClearRoute(group.report.route)}
+ expandedRules={props.expandedRules}
+ onToggleRule={ruleId => props.onToggleRule(group.report.route, ruleId)}
+ channel={props.channel}
+ selection={props.selection}
+ />
+ )}
+
+
+ )
+}
diff --git a/plugins/a11y/src/spa/components/ViolationRow.stories.tsx b/plugins/a11y/src/spa/components/ViolationRow.stories.tsx
new file mode 100644
index 00000000..d0cd5aae
--- /dev/null
+++ b/plugins/a11y/src/spa/components/ViolationRow.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite'
+import { makeViolation, stubChannel, stubSelection } from './_fixtures.ts'
+import { ViolationRow } from './ViolationRow.tsx'
+
+// One violation card: severity-spined, with a select checkbox and (expanded)
+// the offending elements. Wrapped in a `- ` so the list-item renders.
+const meta = {
+ title: 'A11y/ViolationRow',
+ component: ViolationRow,
+ parameters: { layout: 'padded' },
+ decorators: [(Story: () => any) =>
- props.channel.clearPreview()}
+ >
+ + props.onToggleSelect()} + onMouseEnter={() => first() && props.channel.preview(first())} + /> + ++ +
+ +-
+
- + + + )} +
+ {node => ( + +
+ )
+}
diff --git a/plugins/a11y/src/spa/components/_fixtures.ts b/plugins/a11y/src/spa/components/_fixtures.ts
new file mode 100644
index 00000000..5131b047
--- /dev/null
+++ b/plugins/a11y/src/spa/components/_fixtures.ts
@@ -0,0 +1,51 @@
+import type { ScanReport, Violation } from '../../shared/protocol.ts'
+import type { A11yChannel } from '../lib/channel.ts'
+import type { RouteGroupModel, SelectionApi } from '../lib/violation-view.ts'
+import { emptyCounts } from '../../shared/protocol.ts'
+
+function noop() {}
+
+/** A no-op channel stub — enough for the hover/clear calls the rows fire. */
+export const stubChannel = { preview: noop, clearPreview: noop, clearRoute: noop } as unknown as A11yChannel
+
+/** A selection stub that marks `image-alt` selected and numbers its nodes. */
+export const stubSelection: SelectionApi = {
+ isSelected: (_route, ruleId) => ruleId === 'image-alt',
+ toggle: noop,
+ numberOf: nodeId => (nodeId.startsWith('image-alt') ? Number(nodeId.split('-').pop()) + 1 : null),
+}
+
+export function makeViolation(ruleId: string, impact: Violation['impact'], nodes = 1, bestPractice = false): Violation {
+ return {
+ ruleId,
+ impact,
+ help: `Ensure ${ruleId} is correct`,
+ description: `Ensures ${ruleId}`,
+ helpUrl: `https://dequeuniversity.com/rules/axe/${ruleId}`,
+ tags: ['wcag2a', 'wcag111'],
+ bestPractice,
+ nodes: Array.from({ length: nodes }, (_, i) => ({
+ id: `${ruleId}-${i}`,
+ target: [`#${ruleId}-${i}`],
+ html: ` - props.channel.clearHighlight()}
- >
-
-
-
- --
-
- - - - )} -
- {node => ( - -
- )
-}
-
-interface ListProps {
- violations: Violation[]
- expanded: Set
- {Story()}
…
`,
+ failureSummary: `Fix any of the following:\n Fix the ${ruleId} element`,
+ })),
+ }
+}
+
+export function makeReport(route: string, violations: Violation[]): ScanReport {
+ return { route, url: `https://example.test${route}`, scannedAt: 1, engine: '4.10.0', violations, counts: emptyCounts() }
+}
+
+export const sampleGroups: RouteGroupModel[] = [
+ {
+ report: makeReport('/', []),
+ active: true,
+ violations: [makeViolation('image-alt', 'critical', 2), makeViolation('color-contrast', 'serious', 3)],
+ },
+ {
+ report: makeReport('/about', []),
+ active: false,
+ violations: [makeViolation('region', 'moderate', 1, true)],
+ },
+]
diff --git a/plugins/a11y/src/spa/components/header.tsx b/plugins/a11y/src/spa/components/header.tsx
deleted file mode 100644
index eb303a98..00000000
--- a/plugins/a11y/src/spa/components/header.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { Accessor } from 'solid-js'
-import type { Impact, ScanReport } from '../../shared/protocol.ts'
-import { For, Show } from 'solid-js'
-import { IMPACT_ORDER } from '../../shared/protocol.ts'
-import { button, nav, navBrand } from '../design'
-import { IMPACT_COLOR, IMPACT_LABEL } from '../lib/impact.ts'
-
-interface HeaderProps {
- agentReady: boolean
- scanning: boolean
- onRescan: () => void
-}
-
-export function Header(props: HeaderProps) {
- const statusLabel = () =>
- !props.agentReady ? 'No page connected' : props.scanning ? 'Scanning…' : 'Connected'
- const dotClass = () =>
- !props.agentReady
- ? 'status__dot'
- : props.scanning
- ? 'status__dot status__dot--scanning'
- : 'status__dot status__dot--live'
-
- return (
-
-
- {(impact) => {
- const count = () => props.counts[impact]
- return (
-
- )
- }}
-
-
- )
-}
diff --git a/plugins/a11y/src/spa/components/icons.tsx b/plugins/a11y/src/spa/components/icons.tsx
deleted file mode 100644
index fd9621ca..00000000
--- a/plugins/a11y/src/spa/components/icons.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { JSX } from 'solid-js'
-import { splitProps } from 'solid-js'
-
-type IconProps = JSX.HTMLAttributes-
-