feat(a11y): bulk select-all / unselect / clear-selection actions

Add selection controls to the summary bar: a Select all / Unselect all toggle
(over the currently-visible, filtered violations) and a Clear selection action
(clears the whole selection, including any hidden by the filter) with a live
count. Selecting drives the in-page highlight + the fix-prompt set as before.

Co-authored-with an agent.

Author: antfubot

plugins/a11y/src/spa/app.tsx

@@ -140,6 +140,36 @@ export function App() {
     return out
   })
 
+  // Keys of the currently-visible (filtered) violations, for bulk selection.
+  const visibleKeys = createMemo(() =>
+    groups().flatMap(g => g.violations.map(v => selKey(g.report.route, v.ruleId))))
+  const allVisibleSelected = createMemo(() => {
+    const keys = visibleKeys()
+    return keys.length > 0 && keys.every(k => selected().has(k))
+  })
+
+  // Select all / unselect all — toggles the whole visible set at once.
+  function toggleSelectAll() {
+    const keys = visibleKeys()
+    if (keys.length === 0)
+      return
+    const allSel = keys.every(k => selected().has(k))
+    setSelected((prev) => {
+      const next = new Set(prev)
+      for (const k of keys) {
+        if (allSel)
+          next.delete(k)
+        else
+          next.add(k)
+      }
+      return next
+    })
+  }
+  // Clear the entire selection, including any hidden by the current filter.
+  function clearSelection() {
+    setSelected(new Set<string>())
+  }
+
   const selectionApi: SelectionApi = {
     isSelected: (route, ruleId) => selected().has(selKey(route, ruleId)),
     toggle: (route, ruleId) => {
@@ -330,6 +360,10 @@ export function App() {
               totalNodes={totalNodes()}
               totalRules={totalRules()}
               routeCount={routes().length}
+              selectedCount={selectedItems().length}
+              allSelected={allVisibleSelected()}
+              onToggleSelectAll={toggleSelectAll}
+              onClearSelection={clearSelection}
               autoScan={autoScan()}
               onToggleAutoScan={setAutoScan}
               showBestPractice={showBestPractice()}

plugins/a11y/src/spa/components/SummaryBar.stories.tsx

@@ -21,6 +21,10 @@ const base = {
   totalNodes: 18,
   totalRules: 7,
   routeCount: 3,
+  selectedCount: 0,
+  allSelected: false,
+  onToggleSelectAll: noop,
+  onClearSelection: noop,
   autoScan: true,
   onToggleAutoScan: noop,
   showBestPractice: true,
@@ -30,3 +34,5 @@ const base = {
 
 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 } }

plugins/a11y/src/spa/components/SummaryBar.tsx

@@ -1,4 +1,5 @@
 import type { Impact } from '../../shared/protocol.ts'
+import { Show } from 'solid-js'
 import { Summary } from './Summary.tsx'
 import { Switch } from './Switch.tsx'
 
@@ -10,25 +11,35 @@ interface SummaryBarProps {
   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, or unselect them when all are selected. */
+  onToggleSelectAll: () => 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, and the
- * scan / best-practice / clear controls.
+ * 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 (
     <div class="flex flex-col gap-2 pt-3 pb-2.5 sticky top-0 z-[2] bg-base">
       <Summary counts={props.counts} active={props.filter} onToggle={props.onToggleFilter} onHover={props.onHoverImpact} />
 
-      <div class="flex items-center gap-3 flex-wrap">
+      <div class="flex items-center gap-2 flex-wrap">
         <span class="text-[11.5px] color-muted tabular-nums">
           {plural(props.totalNodes, 'issue')}
           {' · '}
@@ -37,6 +48,29 @@ export function SummaryBar(props: SummaryBarProps) {
           {plural(props.routeCount, 'route')}
         </span>
 
+        <button
+          type="button"
+          class={ACTION}
+          onClick={() => props.onToggleSelectAll()}
+          title={props.allSelected ? 'Unselect all visible violations' : 'Select all visible violations'}
+        >
+          <span aria-hidden class={`shrink-0 ${props.allSelected ? 'i-ph-check-square-duotone' : 'i-ph-square-duotone'}`} />
+          {props.allSelected ? 'Unselect all' : 'Select all'}
+        </button>
+
+        <Show when={props.selectedCount > 0}>
+          <button
+            type="button"
+            class={ACTION}
+            onClick={() => props.onClearSelection()}
+            title="Clear the whole selection"
+          >
+            <span aria-hidden class="i-ph-x shrink-0" />
+            Clear selection
+            <span class="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-active text-[10px] font-bold tabular-nums">{props.selectedCount}</span>
+          </button>
+        </Show>
+
         <span class="flex-1" />
 
         <Switch label="Best-practice" checked={props.showBestPractice} onChange={props.onToggleBestPractice} />