feat(a11y): add a11y infrastructure — skip-nav, announcer, touch CSS, eslint-jsx-a11y

dashboard/src/components/ui/zoomable-chart.tsx

@@ -0,0 +1,90 @@
+/**
+ * ZoomableChart — 支持 pinch-to-zoom 的图表容器（Task 8）
+ *
+ * 用法：
+ *   <ZoomableChart aria-label="每小时请求量趋势">
+ *     <ChartContainer ...>
+ *       <LineChart ...>...</LineChart>
+ *     </ChartContainer>
+ *   </ZoomableChart>
+ *
+ * 特性：
+ * - 支持 macOS 触控板双指缩放（wheel + ctrlKey）
+ * - 支持移动端/触屏双指 pinch-to-zoom
+ * - 缩放范围 0.5x – 4x，带 rubberband 效果
+ * - 动画由 @react-spring/web 处理，不触发 React re-render
+ * - Must NOT: 不在 handler 内使用 useState
+ */
+
+import { useRef } from 'react'
+import { animated, useSpring } from '@react-spring/web'
+import { usePinch } from '@use-gesture/react'
+
+import { cn } from '@/lib/utils'
+
+interface ZoomableChartProps {
+  children: React.ReactNode
+  className?: string
+  'aria-label': string
+  minScale?: number
+  maxScale?: number
+}
+
+export function ZoomableChart({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  minScale = 0.5,
+  maxScale = 4,
+}: ZoomableChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const [style, api] = useSpring(() => ({
+    scale: 1,
+    config: { tension: 300, friction: 40 },
+  }))
+
+  usePinch(
+    ({ offset: [scale], first, last }) => {
+      // Rubberband: 超出范围时有弹性阻力
+      const clamped = Math.min(Math.max(scale, minScale * 0.85), maxScale * 1.15)
+      const rubberband = clamped < minScale
+        ? minScale + (clamped - minScale) * 0.3
+        : clamped > maxScale
+          ? maxScale + (clamped - maxScale) * 0.3
+          : clamped
+
+      api.start({ scale: rubberband, immediate: first })
+
+      // 松手后弹回范围内
+      if (last && (scale < minScale || scale > maxScale)) {
+        api.start({
+          scale: Math.min(Math.max(scale, minScale), maxScale),
+          config: { tension: 200, friction: 30 },
+        })
+      }
+    },
+    {
+      target: containerRef,
+      scaleBounds: { min: minScale * 0.85, max: maxScale * 1.15 },
+      rubberband: true,
+      // 阻止浏览器默认的页面缩放
+      preventDefault: true,
+      eventOptions: { passive: false },
+    }
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      role="img"
+      aria-label={ariaLabel}
+      className={cn('overflow-hidden touch-none select-none', className)}
+      style={{ touchAction: 'none' }}
+    >
+      <animated.div style={style} className="w-full h-full origin-center">
+        {children}
+      </animated.div>
+    </div>
+  )
+}