feat(a11y): unify dock icon, highlight all elements on severity hover

- Use i-ph-person-simple-circle-duotone as the single a11y icon everywhere
  (dock definition, panel brand, and the playground rail/header).
- Hovering (or focusing) a summary severity chip now previews every element of
  that impact in the page, restoring the selection highlight on leave.

Co-authored-with an agent.

Author: antfubot

examples/a11y-messages-playground/index.html

@@ -35,7 +35,7 @@
     <div class="h-full flex flex-col">
       <header class="shrink-0 flex items-center gap-3 h-nav px-3 border-b border-base bg-base">
         <h1 class="m0 flex items-center gap-1.5 shrink-0 text-sm font-semibold select-none">
-          <span class="i-ph-wheelchair-duotone text-base color-active"></span>
+          <span class="i-ph-person-simple-circle-duotone text-base color-active"></span>
           <span>A11y × Messages Playground</span>
         </h1>
         <p id="status" class="m0 text-xs font-mono op-fade"><span id="conn">Connecting…</span></p>

examples/a11y-messages-playground/src/client/icons.ts

@@ -3,7 +3,7 @@
 // the offline Phosphor set renders without a runtime icon library. UnoCSS only
 // emits classes it can see in source, hence the literal map.
 const ICONS: Record<string, string> = {
-  'ph:wheelchair-duotone': 'i-ph-wheelchair-duotone',
+  'ph:person-simple-circle-duotone': 'i-ph-person-simple-circle-duotone',
   'ph:notification-duotone': 'i-ph-notification-duotone',
 }
 

plugins/a11y/src/index.ts

@@ -80,7 +80,7 @@ export function createA11yDevframe(options: A11yDevframeOptions = {}): DevframeD
     packageName: pkg.name,
     homepage: pkg.homepage,
     description: pkg.description,
-    icon: options.icon ?? 'ph:wheelchair-duotone',
+    icon: options.icon ?? 'ph:person-simple-circle-duotone',
     basePath: options.basePath ?? BASE_PATH,
     cli: {
       command: id,

plugins/a11y/src/spa/app.tsx

@@ -31,6 +31,9 @@ export function App() {
   // and the "Generate fix prompts" dialog.
   const [selected, setSelected] = createSignal<Set<string>>(new Set())
   const [dialogOpen, setDialogOpen] = createSignal(false)
+  // Transient severity preview: hovering a summary chip lights up every element
+  // of that impact, overriding the selection highlight until the hover ends.
+  const [hoverImpact, setHoverImpact] = createSignal<Impact | null>(null)
 
   const storedAuto = (() => {
     try {
@@ -109,6 +112,20 @@ export function App() {
     return out
   })
 
+  // Every element of a given impact (across routes), for the chip-hover preview.
+  const impactPins = (impact: Impact): PinTarget[] => {
+    const out: PinTarget[] = []
+    for (const report of routes()) {
+      for (const v of report.violations) {
+        if (includeViolation(v) && v.impact === impact) {
+          for (const node of v.nodes)
+            out.push(nodePin(v, node))
+        }
+      }
+    }
+    return out
+  }
+
   const selectedItems = createMemo<SelectedItem[]>(() => {
     const sel = selected()
     const out: SelectedItem[] = []
@@ -170,8 +187,12 @@ export function App() {
       setExpandedRoutes(prev => (prev.has(r) ? prev : new Set(prev).add(r)))
   })
 
-  // Push the highlight set (derived from the selection) to the in-page agent.
-  createEffect(() => channel.setPins(selectedPins()))
+  // Push the highlight set to the in-page agent: the hovered impact's elements
+  // while a summary chip is hovered, otherwise the selection.
+  createEffect(() => {
+    const hov = hoverImpact()
+    channel.setPins(hov ? impactPins(hov) : selectedPins())
+  })
 
   // defaultHighlight: select all of a route's violations the first time it's scanned.
   const highlighted = new Set<string>()
@@ -309,6 +330,7 @@ export function App() {
               counts={chipCounts()}
               filter={filter()}
               onToggleFilter={toggleFilter}
+              onHoverImpact={setHoverImpact}
               totalNodes={totalNodes()}
               totalRules={totalRules()}
               routeCount={routes().length}

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

@@ -24,7 +24,7 @@ export function Header(props: HeaderProps) {
   return (
     <header class={nav()}>
       <span class={navBrand()}>
-        <span aria-hidden class="i-ph-person-arms-spread-duotone text-base color-active" />
+        <span aria-hidden class="i-ph-person-simple-circle-duotone text-base color-active" />
         <span>A11y Inspector</span>
       </span>
       <span class="flex-1" />
@@ -96,6 +96,8 @@ interface SummaryProps {
   counts: Record<Impact, number>
   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
 }
 
 /** The severity summary chips — also serve as the impact filter. */
@@ -111,8 +113,12 @@ export function Summary(props: SummaryProps) {
               class={`chip${count() === 0 ? ' chip--zero' : ''}`}
               style={{ '--impact': IMPACT_COLOR[impact] }}
               aria-pressed={props.active === impact}
-              aria-label={`${count()} ${IMPACT_LABEL[impact]} issues — filter`}
+              aria-label={`${count()} ${IMPACT_LABEL[impact]} issues — filter and highlight`}
               onClick={() => props.onToggle(impact)}
+              onMouseEnter={() => props.onHover?.(impact)}
+              onMouseLeave={() => props.onHover?.(null)}
+              onFocus={() => props.onHover?.(impact)}
+              onBlur={() => props.onHover?.(null)}
             >
               <span class="chip__count">{count()}</span>
               <span class="chip__label">{IMPACT_LABEL[impact]}</span>

plugins/a11y/src/spa/components/summary-bar.stories.tsx

@@ -19,6 +19,7 @@ const base = {
   counts: { critical: 3, serious: 5, moderate: 2, minor: 8 },
   filter: null,
   onToggleFilter: noop,
+  onHoverImpact: noop,
   totalNodes: 18,
   totalRules: 7,
   routeCount: 3,

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

@@ -5,6 +5,7 @@ interface SummaryBarProps {
   counts: Record<Impact, number>
   filter: Impact | null
   onToggleFilter: (impact: Impact) => void
+  onHoverImpact: (impact: Impact | null) => void
   totalNodes: number
   totalRules: number
   routeCount: number
@@ -23,7 +24,7 @@ interface SummaryBarProps {
 export function SummaryBar(props: SummaryBarProps) {
   return (
     <div class="summary-bar">
-      <Summary counts={props.counts} active={props.filter} onToggle={props.onToggleFilter} />
+      <Summary counts={props.counts} active={props.filter} onToggle={props.onToggleFilter} onHover={props.onHoverImpact} />
 
       <div class="summary-bar__toolbar">
         <span class="summary-bar__stat">