fix: address PR review — cleanup timers, AbortController, a11y, zoom keyboard support

- SpecDetailView: cleanup setTimeout on unmount via ref, add keyboard
  accessibility to zoom container (role, tabIndex, Enter/Space, focus-visible)
- SpecTabs: add AbortController to tag counts fetch for unmount cleanup
- PlotOfTheDay: add aria-label to dismiss button
- Update Serena style_guide memory to reflect tokenized highlight colors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

.serena/memories/style_guide.md

@@ -37,8 +37,8 @@ Full scale: micro, xxs, xs, sm, md, base, lg, xl.
 - `tableStyle` — consistent table cells/headers
 - `labelStyle` — small labels (0.875rem, labelText)
 
-## Highlight Colors (not tokenized)
-`#dbeafe`/`#1e40af` (highlighted tag chips) and `#90caf9` (tooltip text on dark bg) are intentionally kept as direct values.
+## Highlight Colors
+Use theme tokens for highlight treatments: `colors.highlight.bg`/`colors.highlight.text` for highlighted tag chips and `colors.tooltipLight` for tooltip text on dark backgrounds. Do not reintroduce hardcoded highlight hex values.
 
 ## Full reference
 See `docs/reference/style-guide.md` for complete documentation including spacing, breakpoints, component specs, animations, and accessibility rules.

app/src/components/PlotOfTheDay.tsx

@@ -96,6 +96,7 @@ export function PlotOfTheDay() {
           <IconButton
             onClick={handleDismiss}
             size="small"
+            aria-label="Dismiss plot of the day"
             sx={{
               color: colors.gray[400], p: 0.25,
               '&:hover': { color: colors.gray[600] },

app/src/components/SpecDetailView.tsx

@@ -4,7 +4,7 @@
  * Shows large image with library carousel and action buttons.
  */
 
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
@@ -56,6 +56,7 @@ export function SpecDetailView({
   const [zoomed, setZoomed] = useState(false);
   const [origin, setOrigin] = useState({ x: 50, y: 50 });
   const [animating, setAnimating] = useState(false);
+  const animTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
   const prevLibRef = useRef(selectedLibrary);
 
   // Reset zoom when library changes (no effect needed)
@@ -77,11 +78,16 @@ export function SpecDetailView({
       }
       setAnimating(true);
       setZoomed((z) => !z);
-      setTimeout(() => setAnimating(false), 300);
+      if (animTimerRef.current) clearTimeout(animTimerRef.current);
+      animTimerRef.current = setTimeout(() => setAnimating(false), 300);
     },
     [zoomed],
   );
 
+  useEffect(() => {
+    return () => { if (animTimerRef.current) clearTimeout(animTimerRef.current); };
+  }, []);
+
   const handleMouseMove = useCallback(
     (e: React.MouseEvent) => {
       if (!zoomed || animating || !containerRef.current) return;
@@ -116,7 +122,11 @@ export function SpecDetailView({
     >
       <Box
         ref={containerRef}
+        role="button"
+        tabIndex={0}
+        aria-label={zoomed ? 'Zoom out' : 'Zoom in'}
         onClick={handleZoomToggle}
+        onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleZoomToggle(e as unknown as React.MouseEvent); } }}
         onMouseMove={handleMouseMove}
         onTouchMove={handleTouchMove}
         sx={{
@@ -128,6 +138,8 @@ export function SpecDetailView({
           aspectRatio: '16/9',
           cursor: zoomed ? 'zoom-out' : 'zoom-in',
           touchAction: zoomed ? 'none' : 'auto',
+          outline: 'none',
+          '&:focus-visible': { boxShadow: `0 0 0 2px ${colors.primary}` },
           '&:hover .impl-counter': {
             opacity: 1,
           },

app/src/components/SpecTabs.tsx

@@ -191,7 +191,8 @@ export function SpecTabs({
   // Fetch global tag counts once (module-level cache)
   useEffect(() => {
     if (cachedTagCounts) return;
-    fetch(`${API_URL}/plots/filter?limit=1`)
+    const controller = new AbortController();
+    fetch(`${API_URL}/plots/filter?limit=1`, { signal: controller.signal })
       .then(r => r.ok ? r.json() : null)
       .then(data => {
         if (data?.globalCounts) {
@@ -200,6 +201,7 @@ export function SpecTabs({
         }
       })
       .catch(() => {});
+    return () => controller.abort();
   }, []);
 
   // Get count for a tag value (e.g., "scatter" in "plot" category → 421 implementations)