From c658b2314dba1521be399efd5b9a49941591990b Mon Sep 17 00:00:00 2001
From: DrSmoothl <1787882683@qq.com>
Date: Thu, 5 Mar 2026 21:57:36 +0800
Subject: [PATCH] feat(a11y): apply ARIA roles, landmarks, focus management,
 touch targets and contrast fixes across components

---
 dashboard/electron/main/index.ts              |   8 +
 .../src/components/electron/TitleBar.tsx      |   3 +
 .../src/components/expression-reviewer.tsx    | 228 +++++++++++-------
 dashboard/src/components/layout/Header.tsx    |  12 +-
 dashboard/src/components/layout/Layout.tsx    |  55 ++++-
 dashboard/src/components/layout/Sidebar.tsx   |   4 +-
 dashboard/src/components/plugin-stats.tsx     |   3 +-
 dashboard/src/components/ui/alert.tsx         |   1 +
 dashboard/src/components/ui/dialog.tsx        |   2 +-
 dashboard/src/components/ui/pagination.tsx    |   1 +
 dashboard/src/components/ui/toast.tsx         |   1 +
 dashboard/src/routes/auth.tsx                 |   4 +-
 dashboard/src/routes/chat/ChatTabBar.tsx      |   5 +-
 dashboard/src/routes/chat/MessageRenderer.tsx |   2 +
 dashboard/src/routes/config/adapter.tsx       |  18 +-
 .../config/model/components/ModelTable.tsx    |   2 +-
 .../config/modelProvider/ProviderForm.tsx     |  12 +-
 .../config/modelProvider/ProviderList.tsx     |   2 +-
 dashboard/src/routes/config/pack-detail.tsx   |   4 +-
 dashboard/src/routes/index.tsx                |   7 +
 .../src/routes/monitor/planner-monitor.tsx    |   6 +
 .../src/routes/monitor/replier-monitor.tsx    |   6 +
 dashboard/src/routes/person.tsx               |   2 +-
 dashboard/src/routes/plugin-config.tsx        |   3 +
 dashboard/src/routes/plugin-mirrors.tsx       |   2 +-
 .../src/routes/plugins/InstallDialog.tsx      |   1 +
 .../routes/resource/emoji/EmojiDialogs.tsx    |   8 +
 .../src/routes/resource/emoji/EmojiList.tsx   |   3 +
 .../resource/expression/ExpressionList.tsx    |   2 +-
 .../src/routes/resource/jargon/JargonList.tsx |   2 +-
 .../resource/knowledge-graph/GraphDialogs.tsx |   8 +-
 .../knowledge-graph/GraphVisualization.tsx    | 104 ++++----
 32 files changed, 365 insertions(+), 156 deletions(-)

diff --git a/dashboard/electron/main/index.ts b/dashboard/electron/main/index.ts
index 4df1cf3f..03acc056 100644
--- a/dashboard/electron/main/index.ts
+++ b/dashboard/electron/main/index.ts
@@ -143,12 +143,20 @@ function createWindow() {
   mainWindow.on('unmaximize', () => {
     mainWindow?.webContents.send('electron:window-unmaximized')
   })
+
+  // 窗口获得焦点时确保焦点传递到 webContents，支持屏幕阅读器正确工作
+  mainWindow.on('focus', () => {
+    mainWindow?.webContents.focus()
+  })
 }
 
 /**
  * App event: when app is ready
  */
 app.whenReady().then(() => {
+  // 确保 Chromium a11y tree 始终激活（供屏幕阅读器使用）
+  app.setAccessibilitySupportEnabled(true)
+
   registerAppProtocol()
 
   // Set Content Security Policy
diff --git a/dashboard/src/components/electron/TitleBar.tsx b/dashboard/src/components/electron/TitleBar.tsx
index 8fe43480..fac440e5 100644
--- a/dashboard/src/components/electron/TitleBar.tsx
+++ b/dashboard/src/components/electron/TitleBar.tsx
@@ -34,6 +34,7 @@ export function TitleBar() {
             onClick={minimize}
             tabIndex={-1}
             type="button"
+            aria-label="最小化"
           >
             <Minus className="h-3.5 w-3.5" />
           </button>
@@ -42,6 +43,7 @@ export function TitleBar() {
             onClick={toggleMaximize}
             tabIndex={-1}
             type="button"
+            aria-label={isMaximized ? "还原窗口" : "最大化"}
           >
             {isMaximized ? (
               <Copy className="h-3.5 w-3.5" />
@@ -54,6 +56,7 @@ export function TitleBar() {
             onClick={close}
             tabIndex={-1}
             type="button"
+            aria-label="关闭窗口"
           >
             <X className="h-3.5 w-3.5" />
           </button>
diff --git a/dashboard/src/components/expression-reviewer.tsx b/dashboard/src/components/expression-reviewer.tsx
index 40b1d5fd..002eb206 100644
--- a/dashboard/src/components/expression-reviewer.tsx
+++ b/dashboard/src/components/expression-reviewer.tsx
@@ -8,7 +8,8 @@
  * 4. 冲突检测（防止与AI自动检查冲突）
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { animated, useSpring } from '@react-spring/web'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -80,9 +81,10 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
   const [quickLoading, setQuickLoading] = useState(false)
   const [quickTotal, setQuickTotal] = useState(0)
   const [quickPage, setQuickPage] = useState(1)
-  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right' | null>(null)
-  const [swipeOffset, setSwipeOffset] = useState(0)
-  const [isAnimating, setIsAnimating] = useState(false)
+  const swipeDirectionRef = useRef<'left' | 'right' | null>(null)
+  const isAnimatingRef = useRef(false)
+  const [cardSpring, cardApi] = useSpring(() => ({ x: 0, opacity: 1, rotate: 0, config: { tension: 300, friction: 30 } }))
+  const swipeOffsetRef = useRef(0)
   const [conflictId, setConflictId] = useState<number | null>(null)
   const cardRef = useRef<HTMLDivElement>(null)
   const dragStartRef = useRef<{ x: number; y: number } | null>(null)
@@ -259,16 +261,16 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
   // 快速审核 - 执行审核操作
   const handleQuickReview = useCallback(async (rejected: boolean) => {
     const currentExpr = quickExpressions[quickCurrentIndex]
-    if (!currentExpr || isAnimating) return
+    if (!currentExpr || isAnimatingRef.current) return
 
     const directions = getAllowedDirections(currentExpr)
     if ((rejected && !directions.left) || (!rejected && !directions.right)) {
       return
     }
 
-    setIsAnimating(true)
-    setSwipeDirection(rejected ? 'left' : 'right')
-    setSwipeOffset(rejected ? -400 : 400)
+    isAnimatingRef.current = true
+    swipeDirectionRef.current = rejected ? 'left' : 'right'
+    cardApi.start({ x: rejected ? -400 : 400, rotate: rejected ? -20 : 20, opacity: 0 })
 
     try {
       const result = await batchReviewExpressions([{
@@ -303,9 +305,10 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
           }
           
           // 重置状态
-          setSwipeDirection(null)
-          setSwipeOffset(0)
-          setIsAnimating(false)
+          swipeDirectionRef.current = null
+          swipeOffsetRef.current = 0
+          cardApi.set({ x: 0, opacity: 1, rotate: 0 })
+          isAnimatingRef.current = false
           
           // 刷新统计
           loadStats()
@@ -327,9 +330,10 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
         // 播放冲突动画后刷新
         setTimeout(() => {
           setConflictId(null)
-          setSwipeDirection(null)
-          setSwipeOffset(0)
-          setIsAnimating(false)
+          swipeDirectionRef.current = null
+          swipeOffsetRef.current = 0
+          cardApi.set({ x: 0, opacity: 1, rotate: 0 })
+          isAnimatingRef.current = false
           loadQuickList(false) // 重新加载当前页
           loadStats()
         }, 1500)
@@ -340,35 +344,36 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
         description: error instanceof Error ? error.message : '未知错误',
         variant: 'destructive',
       })
-      setSwipeDirection(null)
-      setSwipeOffset(0)
-      setIsAnimating(false)
+      swipeDirectionRef.current = null
+      swipeOffsetRef.current = 0
+      cardApi.set({ x: 0, opacity: 1, rotate: 0 })
+      isAnimatingRef.current = false
     }
-  }, [quickExpressions, quickCurrentIndex, isAnimating, getAllowedDirections, quickFilterType, toast, loadStats, quickTotal, loadQuickList])
+  }, [quickExpressions, quickCurrentIndex, isAnimatingRef, getAllowedDirections, quickFilterType, toast, loadStats, quickTotal, loadQuickList])
 
   // 拖拽开始
   const handleDragStart = useCallback((clientX: number, clientY: number) => {
-    if (isAnimating) return
+    if (isAnimatingRef.current) return
     dragStartRef.current = { x: clientX, y: clientY }
     isDraggingRef.current = false
-  }, [isAnimating])
+  }, [isAnimatingRef])
 
   // 触发无效操作动画
   const triggerInvalidAnimation = useCallback((direction: 'left' | 'right') => {
-    if (isAnimating) return
-    setIsAnimating(true)
+    if (isAnimatingRef.current) return
+    isAnimatingRef.current = true
     // 模拟向该方向移动一点
-    setSwipeOffset(direction === 'left' ? -30 : 30)
+    cardApi.start({ x: direction === 'left' ? -30 : 30, immediate: true })
     
     setTimeout(() => {
-      setSwipeOffset(0)
-      setTimeout(() => setIsAnimating(false), 300)
+      cardApi.start({ x: 0 })
+      setTimeout(() => { isAnimatingRef.current = false }, 300)
     }, 150)
-  }, [isAnimating])
+  }, [cardApi])
 
   // 拖拽移动
   const handleDragMove = useCallback((clientX: number) => {
-    if (!dragStartRef.current || isAnimating) return
+    if (!dragStartRef.current || isAnimatingRef.current) return
     
     const deltaX = clientX - dragStartRef.current.x
     const currentExpr = quickExpressions[quickCurrentIndex]
@@ -376,42 +381,48 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
     
     // 检查方向限制
     if (deltaX < 0 && !directions.left) {
-      setSwipeOffset(deltaX * 0.2) // 提供阻力反馈
-      setSwipeDirection(null)
+      cardApi.start({ x: deltaX * 0.2, immediate: true }) // 提供阻力反馈
+      swipeOffsetRef.current = deltaX * 0.2
+      swipeDirectionRef.current = null
       return
     }
     if (deltaX > 0 && !directions.right) {
-      setSwipeOffset(deltaX * 0.2)
-      setSwipeDirection(null)
+      cardApi.start({ x: deltaX * 0.2, immediate: true })
+      swipeOffsetRef.current = deltaX * 0.2
+      swipeDirectionRef.current = null
       return
     }
 
     isDraggingRef.current = true
-    setSwipeOffset(deltaX)
+    swipeOffsetRef.current = deltaX
+    cardApi.start({ x: deltaX, rotate: deltaX * 0.05, opacity: Math.max(0, 1 - Math.abs(deltaX) / 500), immediate: true })
+    cardApi.start({ x: deltaX, rotate: deltaX * 0.05, opacity: Math.max(0, 1 - Math.abs(deltaX) / 500), immediate: true })
     
     if (Math.abs(deltaX) > 50) {
-      setSwipeDirection(deltaX > 0 ? 'right' : 'left')
+      swipeDirectionRef.current = deltaX > 0 ? 'right' : 'left'
     } else {
-      setSwipeDirection(null)
+      swipeDirectionRef.current = null
     }
-  }, [quickExpressions, quickCurrentIndex, getAllowedDirections, isAnimating])
+  }, [quickExpressions, quickCurrentIndex, getAllowedDirections, cardApi])
 
   // 拖拽结束
   const handleDragEnd = useCallback(() => {
     if (!dragStartRef.current) return
     
     const threshold = 100
-    if (Math.abs(swipeOffset) > threshold && swipeDirection) {
-      handleQuickReview(swipeDirection === 'left')
+    const currentX = cardSpring.x.get()
+    if (Math.abs(currentX) > threshold && swipeDirectionRef.current) {
+      handleQuickReview(swipeDirectionRef.current === 'left')
     } else {
       // 回弹
-      setSwipeOffset(0)
-      setSwipeDirection(null)
+      cardApi.start({ x: 0, rotate: 0, opacity: 1 })
+      swipeOffsetRef.current = 0
+      swipeDirectionRef.current = null
     }
     
     dragStartRef.current = null
     isDraggingRef.current = false
-  }, [swipeOffset, swipeDirection, handleQuickReview])
+  }, [cardSpring.x, handleQuickReview, cardApi])
 
   // 鼠标事件处理
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -463,7 +474,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
       e.stopPropagation()
       e.stopImmediatePropagation()
       
-      if (isAnimating || quickLoading) return
+      if (isAnimatingRef.current || quickLoading) return
       
       const currentExpr = quickExpressions[quickCurrentIndex]
       const directions = getAllowedDirections(currentExpr)
@@ -496,7 +507,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
     // 使用 capture 模式，在事件到达 Tabs 之前拦截
     window.addEventListener('keydown', handleKeyDown, true)
     return () => window.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, reviewMode, quickExpressions, quickCurrentIndex, isAnimating, quickLoading, getAllowedDirections, handleQuickReview, triggerInvalidAnimation])
+  }, [open, reviewMode, quickExpressions, quickCurrentIndex, isAnimatingRef, quickLoading, getAllowedDirections, handleQuickReview, triggerInvalidAnimation])
 
   // 动态加载更多数据 - 当接近列表末尾时自动加载
   useEffect(() => {
@@ -1406,7 +1417,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                         <>
                           <div className={cn(
                             'flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-300',
-                            swipeDirection === 'left' ? 'bg-red-500/20 text-red-500 scale-110' : 'bg-muted/50 text-muted-foreground opacity-0',
+                            swipeDirectionRef.current === 'left' ? 'bg-red-500/20 text-red-500 scale-110' : 'bg-muted/50 text-muted-foreground opacity-0',
                             !directions.left && 'invisible'
                           )}>
                             <XCircle className="h-8 w-8" />
@@ -1414,7 +1425,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                           </div>
                           <div className={cn(
                             'flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-300',
-                            swipeDirection === 'right' ? 'bg-green-500/20 text-green-500 scale-110' : 'bg-muted/50 text-muted-foreground opacity-0',
+                            swipeDirectionRef.current === 'right' ? 'bg-green-500/20 text-green-500 scale-110' : 'bg-muted/50 text-muted-foreground opacity-0',
                             !directions.right && 'invisible'
                           )}>
                             <span className="font-bold text-lg hidden sm:inline">通过</span>
@@ -1426,6 +1437,12 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                   </div>
 
                   {/* 堆叠卡片 */}
+                  <div
+                    className="relative w-full max-w-md h-[400px] flex items-center justify-center"
+                    role="listbox"
+                    aria-label="待审核的表达方式"
+                    aria-activedescendant={quickExpressions[quickCurrentIndex] ? `quick-expr-${quickExpressions[quickCurrentIndex].id}` : undefined}
+                  >
                   <div className="relative w-full max-w-md h-[400px] flex items-center justify-center">
                     {quickExpressions
                       .slice(quickCurrentIndex, quickCurrentIndex + 5)
@@ -1442,17 +1459,16 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                           transition: isCurrent && !isDraggingRef.current ? 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)' : 'none',
                         }
 
-                        if (isCurrent) {
-                          // 当前卡片样式
+if (isCurrent) {
+                          // 当前卡片：样式由 useSpring 控制，通过 animated.div 渲染
+                          // style 仅保留非动画属性
                           style = {
                             ...style,
-                            transform: `translateX(${swipeOffset}px) rotate(${swipeOffset * 0.05}deg)`,
-                            opacity: Math.max(0, 1 - Math.abs(swipeOffset) / 500),
                             cursor: 'grab',
                           }
                         } else {
                           // 后方卡片样式
-                          const progress = Math.min(Math.abs(swipeOffset) / 200, 1) // 0 to 1
+                          const progress = Math.min(Math.abs(swipeOffsetRef.current) / 200, 1) // 0 to 1
                           
                           // 计算指定索引的样式属性
                           const getStyleForIndex = (i: number) => {
@@ -1487,27 +1503,30 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                           }
                         }
 
-                        return (
-                          <div
+                        return isCurrent ? (
+                          <animated.div
                             key={expr.id}
-                            ref={isCurrent ? cardRef : undefined}
+                            ref={cardRef}
+                            role="option"
+                            id={`quick-expr-${expr.id}`}
+                            aria-selected={true}
                             className={cn(
                               'bg-card border rounded-xl shadow-xl p-6 select-none h-full flex flex-col',
-                              isCurrent && 'active:cursor-grabbing shadow-2xl ring-1 ring-border/50',
+                              'active:cursor-grabbing shadow-2xl ring-1 ring-border/50',
                               // 冲突动效
-                              isCurrent && conflictId === expr.id && 'ring-4 ring-orange-500/50 bg-orange-50/10'
+                              conflictId === expr.id && 'ring-4 ring-orange-500/50 bg-orange-50/10'
                             )}
-                            style={style}
-                            onMouseDown={isCurrent ? handleMouseDown : undefined}
-                            onMouseMove={isCurrent ? handleMouseMove : undefined}
-                            onMouseUp={isCurrent ? handleMouseUp : undefined}
-                            onMouseLeave={isCurrent ? handleMouseLeave : undefined}
-                            onTouchStart={isCurrent ? handleTouchStart : undefined}
-                            onTouchMove={isCurrent ? handleTouchMove : undefined}
-                            onTouchEnd={isCurrent ? handleTouchEnd : undefined}
+                            style={{ ...style, ...cardSpring }}
+                            onMouseDown={handleMouseDown}
+                            onMouseMove={handleMouseMove}
+                            onMouseUp={handleMouseUp}
+                            onMouseLeave={handleMouseLeave}
+                            onTouchStart={handleTouchStart}
+                            onTouchMove={handleTouchMove}
+                            onTouchEnd={handleTouchEnd}
                           >
                             {/* 冲突提示遮罩 */}
-                            {isCurrent && conflictId === expr.id && (
+                            {conflictId === expr.id && (
                               <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm animate-in fade-in duration-300 rounded-xl">
                                 <div className="relative">
                                   <div className="absolute inset-0 bg-orange-500/20 rounded-full animate-ping" />
@@ -1517,21 +1536,71 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                                 <p className="text-muted-foreground mt-2 animate-in slide-in-from-bottom-3 fade-in duration-700">后台任务已处理此条目</p>
                               </div>
                             )}
-
                             {/* 无效操作提示 */}
-                            {isCurrent && (
-                              <div className={cn(
-                                "absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-opacity duration-200",
-                                ((swipeOffset < -10 && !getAllowedDirections(expr).left) || (swipeOffset > 10 && !getAllowedDirections(expr).right)) 
-                                  ? "opacity-100" 
-                                  : "opacity-0"
-                              )}>
-                                <div className="bg-background/80 backdrop-blur-sm p-4 rounded-full shadow-lg border border-border">
-                                  <Ban className="h-12 w-12 text-muted-foreground" />
-                                </div>
+                            <div className={cn(
+                              "absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-opacity duration-200",
+                              ((swipeOffsetRef.current < -10 && !getAllowedDirections(expr).left) || (swipeOffsetRef.current > 10 && !getAllowedDirections(expr).right))
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}>
+                              <div className="bg-background/80 backdrop-blur-sm p-4 rounded-full shadow-lg border border-border">
+                                <Ban className="h-12 w-12 text-muted-foreground" />
                               </div>
-                            )}
-
+                            </div>
+                            {/* 内容区 */}
+                            <div className="space-y-4 flex-1">
+                              {/* 状态和ID */}
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm text-muted-foreground font-mono">#{expr.id}</span>
+                                <div className="flex items-center gap-2">
+                                  {getStatusBadge(expr)}
+                                  {getModifierBadge(expr.modified_by)}
+                                </div>
+                              </div>
+                              {/* 情景 */}
+                              <div className="space-y-1.5">
+                                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">情景</label>
+                                <div className="p-3 bg-muted/30 rounded-lg border border-border/50">
+                                  <p className="text-lg font-medium leading-relaxed">{expr.situation}</p>
+                                </div>
+                              </div>
+                              {/* 风格 */}
+                              <div className="space-y-1.5">
+                                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">风格</label>
+                                <div className="flex flex-wrap gap-2">
+                                  {expr.style.split(/[,，]/).map((s, i) => (
+                                    <Badge key={i} variant="secondary" className="font-normal">
+                                      {s.trim()}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                            {/* 底部信息 */}
+                            <div className="mt-auto pt-4 border-t flex items-center justify-between text-xs text-muted-foreground">
+                              <div className="flex items-center gap-2">
+                                <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                                  <User className="h-3 w-3" />
+                                </div>
+                                <span title={getChatName(expr.chat_id)} className="truncate max-w-[120px] font-medium">
+                                  {getChatName(expr.chat_id)}
+                                </span>
+                              </div>
+                              <span className="font-mono">{formatTime(expr.create_date)}</span>
+                            </div>
+                          </animated.div>
+                        ) : (
+                          <div
+                            key={expr.id}
+                            role="option"
+                            id={`quick-expr-${expr.id}`}
+                            aria-selected={false}
+                            className={cn(
+                              'bg-card border rounded-xl shadow-xl p-6 select-none h-full flex flex-col'
+                            )}
+                            style={style}
+                          >
+                            {/* 内容区 */}
                             <div className="space-y-4 flex-1">
                               {/* 状态和ID */}
                               <div className="flex items-center justify-between">
@@ -1541,7 +1610,6 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                                   {getModifierBadge(expr.modified_by)}
                                 </div>
                               </div>
-
                               {/* 情景 */}
                               <div className="space-y-1.5">
                                 <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">情景</label>
@@ -1549,7 +1617,6 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                                   <p className="text-lg font-medium leading-relaxed">{expr.situation}</p>
                                 </div>
                               </div>
-
                               {/* 风格 */}
                               <div className="space-y-1.5">
                                 <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">风格</label>
@@ -1562,7 +1629,6 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                                 </div>
                               </div>
                             </div>
-
                             {/* 底部信息 */}
                             <div className="mt-auto pt-4 border-t flex items-center justify-between text-xs text-muted-foreground">
                               <div className="flex items-center gap-2">
@@ -1595,7 +1661,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                               !directions.left ? 'opacity-30 cursor-not-allowed' : 'hover:bg-red-50 hover:text-red-600 hover:border-red-200'
                             )}
                             onClick={() => directions.left && handleQuickReview(true)}
-                            disabled={!directions.left || isAnimating}
+                            disabled={!directions.left || isAnimatingRef.current}
                           >
                             <XCircle className="h-8 w-8" />
                           </Button>
@@ -1607,7 +1673,7 @@ export function ExpressionReviewer({ open, onOpenChange }: ExpressionReviewerPro
                               !directions.right ? 'opacity-30 cursor-not-allowed' : 'hover:bg-green-50 hover:text-green-600 hover:border-green-200'
                             )}
                             onClick={() => directions.right && handleQuickReview(false)}
-                            disabled={!directions.right || isAnimating}
+                            disabled={!directions.right || isAnimatingRef.current}
                           >
                             <CheckCircle2 className="h-8 w-8" />
                           </Button>
diff --git a/dashboard/src/components/layout/Header.tsx b/dashboard/src/components/layout/Header.tsx
index 6738e7ab..d17d080e 100644
--- a/dashboard/src/components/layout/Header.tsx
+++ b/dashboard/src/components/layout/Header.tsx
@@ -35,7 +35,7 @@ interface HeaderProps {
 
 export function Header({
   sidebarOpen,
-  // mobileMenuOpen, // unused - kept in props for API compatibility
+  mobileMenuOpen,
   searchOpen,
   actualTheme,
   onSidebarToggle,
@@ -67,6 +67,8 @@ export function Header({
         {/* 移动端菜单按钮 */}
         <button
           onClick={onMobileMenuToggle}
+          aria-label={t('a11y.closeMenu')}
+          aria-expanded={mobileMenuOpen}
           className="rounded-lg p-2 hover:bg-accent lg:hidden"
         >
           <Menu className="h-5 w-5" />
@@ -75,8 +77,9 @@ export function Header({
         {/* 桌面端侧边栏收起/展开按钮 */}
         <button
           onClick={onSidebarToggle}
+          aria-label={sidebarOpen ? t('header.collapseSidebar') : t('header.expandSidebar')}
+          aria-expanded={sidebarOpen}
           className="hidden rounded-lg p-2 hover:bg-accent lg:block"
-          title={sidebarOpen ? t('header.collapseSidebar') : t('header.expandSidebar')}
         >
           <ChevronLeft
             className={cn('h-5 w-5 transition-transform', !sidebarOpen && 'rotate-180')}
@@ -120,9 +123,10 @@ export function Header({
         {/* 搜索框 */}
         <button
           onClick={() => onSearchOpenChange(true)}
+          aria-label={t('header.searchPlaceholder')}
           className="relative hidden md:flex items-center w-64 h-9 pl-9 pr-16 bg-background/50 border rounded-md hover:bg-accent/50 transition-colors text-left"
         >
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
           <span className="text-sm text-muted-foreground">{t('header.searchPlaceholder')}</span>
           <Kbd size="sm" className="absolute right-2 top-1/2 -translate-y-1/2">
             <span className="text-xs">⌘</span>K
@@ -179,8 +183,8 @@ export function Header({
             const newTheme = actualTheme === 'dark' ? 'light' : 'dark'
             toggleThemeWithTransition(newTheme, onThemeChange, e)
           }}
+          aria-label={actualTheme === 'dark' ? t('header.switchToLight') : t('header.switchToDark')}
           className="rounded-lg p-2 hover:bg-accent"
-          title={actualTheme === 'dark' ? t('header.switchToLight') : t('header.switchToDark')}
         >
           {actualTheme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
         </button>
diff --git a/dashboard/src/components/layout/Layout.tsx b/dashboard/src/components/layout/Layout.tsx
index f242fce0..6169133e 100644
--- a/dashboard/src/components/layout/Layout.tsx
+++ b/dashboard/src/components/layout/Layout.tsx
@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useRouter } from '@tanstack/react-router'
 
 import { BackgroundLayer } from '@/components/background-layer'
 import { BackToTop } from '@/components/back-to-top'
 import { HttpWarningBanner } from '@/components/http-warning-banner'
+import { SkipNav } from '@/components/ui/skip-nav'
+import { useAnnounce } from '@/components/ui/announcer'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { useTheme } from '@/components/use-theme'
 import { useAuthGuard } from '@/hooks/use-auth'
@@ -12,6 +15,7 @@ import { useBackground } from '@/hooks/use-background'
 import { TitleBar } from '@/components/electron/TitleBar'
 import { isElectron } from '@/lib/runtime'
 import { cn } from '@/lib/utils'
+import { menuSections } from './constants'
 import { Header } from './Header'
 import { Sidebar } from './Sidebar'
 import type { LayoutProps } from './types'
@@ -19,6 +23,8 @@ import type { LayoutProps } from './types'
 export function Layout({ children }: LayoutProps) {
   const { t } = useTranslation()
   const { checking } = useAuthGuard() // 检查认证状态
+  const router = useRouter()
+  const announce = useAnnounce()
   
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -52,6 +58,41 @@ export function Layout({ children }: LayoutProps) {
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
+  // 路由变更：焦点管理 + 屏幕阅读器播报 + document.title 更新
+  useEffect(() => {
+    // 构建 路径 -> 页面标题 的映射表（以当前语言 t() 翻译）
+    const pathToLabel: Record<string, string> = {}
+    for (const section of menuSections) {
+      for (const item of section.items) {
+        pathToLabel[item.path] = t(item.label)
+      }
+    }
+
+    const unsubscribe = router.subscribe('onResolved', () => {
+      const pathname = router.state.location.pathname
+      const pageTitle = pathToLabel[pathname] ?? 'MaiBot Dashboard'
+      const fullTitle = pageTitle === 'MaiBot Dashboard'
+        ? 'MaiBot Dashboard'
+        : `${pageTitle} — MaiBot Dashboard`
+
+      // 更新 document.title
+      document.title = fullTitle
+
+      // 屏幕阅读器朗读导航结果
+      announce(t('a11y.navigatedTo', { page: pageTitle }), 'polite')
+
+      // 将焦点移到主内容区（仅当焦点不在其内部时）
+      const mainEl = document.getElementById('main-content')
+      if (mainEl && !mainEl.contains(document.activeElement)) {
+        // requestAnimationFrame 确保 DOM 已渲染完成
+        requestAnimationFrame(() => {
+          mainEl.focus({ preventScroll: true })
+        })
+      }
+    })
+
+    return unsubscribe
+  }, [router, announce, t])
 
   // 认证检查中，显示加载状态
   if (checking) {
@@ -74,8 +115,9 @@ export function Layout({ children }: LayoutProps) {
   const pageBg = useBackground('page')
 
   return (
-    <TooltipProvider delayDuration={300}>
-      {isElectron() && <TitleBar />}
+      <TooltipProvider delayDuration={300}>
+        <SkipNav />
+        {isElectron() && <TitleBar />}
       <div className={cn('flex h-screen overflow-hidden', isElectron() && 'pt-8')}>
       {/* Sidebar */}
       <Sidebar
@@ -88,11 +130,12 @@ export function Layout({ children }: LayoutProps) {
       {/* Mobile overlay */}
       {mobileMenuOpen && (
         <div
+          aria-hidden="true"
           className="fixed inset-0 z-40 bg-black/50 lg:hidden"
           onClick={() => setMobileMenuOpen(false)}
         />
-      )}
 
+      )}
       {/* Main content */}
       <div className="flex flex-1 flex-col overflow-hidden">
         {/* HTTP 安全警告横幅 */}
@@ -111,7 +154,11 @@ export function Layout({ children }: LayoutProps) {
         />
 
         {/* Page content */}
-        <main className="relative flex-1 overflow-hidden bg-background">
+        <main
+          id="main-content"
+          tabIndex={-1}
+          className="relative flex-1 overflow-hidden bg-background outline-none"
+        >
           <BackgroundLayer config={pageBg} layerId="page" />
           {children}
         </main>
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
index 4d7e4ef9..7d2304e2 100644
--- a/dashboard/src/components/layout/Sidebar.tsx
+++ b/dashboard/src/components/layout/Sidebar.tsx
@@ -44,7 +44,9 @@ export function Sidebar({
         "flex-1 overflow-x-hidden",
         !sidebarOpen && "lg:w-16"
       )}>
-        <nav className={cn(
+        <nav
+          aria-label={t('a11y.sidebarNav')}
+          className={cn(
           "p-4",
           !sidebarOpen && "lg:p-2 lg:w-16"
         )}>
diff --git a/dashboard/src/components/plugin-stats.tsx b/dashboard/src/components/plugin-stats.tsx
index 63bee1b8..a9a21b27 100644
--- a/dashboard/src/components/plugin-stats.tsx
+++ b/dashboard/src/components/plugin-stats.tsx
@@ -239,9 +239,10 @@ export function PluginStats({ pluginId, compact = false }: PluginStatsProps) {
 
               {/* 评论 */}
               <div>
-                <label className="text-sm font-medium mb-2 block">评论（可选）</label>
+                <label htmlFor="plugin-rating-comment" className="text-sm font-medium mb-2 block">评论（可选）</label>
                 <Textarea
                   value={userComment}
+                  id="plugin-rating-comment"
                   onChange={(e) => setUserComment(e.target.value)}
                   placeholder="分享你的使用体验..."
                   rows={4}
diff --git a/dashboard/src/components/ui/alert.tsx b/dashboard/src/components/ui/alert.tsx
index 5afd41d1..a6335d05 100644
--- a/dashboard/src/components/ui/alert.tsx
+++ b/dashboard/src/components/ui/alert.tsx
@@ -36,6 +36,7 @@ const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content -- content passed via spread props
   <h5
     ref={ref}
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
diff --git a/dashboard/src/components/ui/dialog.tsx b/dashboard/src/components/ui/dialog.tsx
index 569cc48d..cd10f20d 100644
--- a/dashboard/src/components/ui/dialog.tsx
+++ b/dashboard/src/components/ui/dialog.tsx
@@ -54,7 +54,7 @@ const DialogContent = React.forwardRef<
       {!hideCloseButton && (
         <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
+          <span className="sr-only">关闭</span>
         </DialogPrimitive.Close>
       )}
     </DialogPrimitive.Content>
diff --git a/dashboard/src/components/ui/pagination.tsx b/dashboard/src/components/ui/pagination.tsx
index 4e60d4f9..36a1f0cf 100644
--- a/dashboard/src/components/ui/pagination.tsx
+++ b/dashboard/src/components/ui/pagination.tsx
@@ -45,6 +45,7 @@ const PaginationLink = ({
   size = "icon",
   ...props
 }: PaginationLinkProps) => (
+  // eslint-disable-next-line jsx-a11y/anchor-has-content -- content passed via spread props
   <a
     aria-current={isActive ? "page" : undefined}
     className={cn(
diff --git a/dashboard/src/components/ui/toast.tsx b/dashboard/src/components/ui/toast.tsx
index fd29cb4f..a1bca4c7 100644
--- a/dashboard/src/components/ui/toast.tsx
+++ b/dashboard/src/components/ui/toast.tsx
@@ -93,6 +93,7 @@ const ToastClose = React.forwardRef<
       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
+    aria-label="关闭提示"
     toast-close=""
     {...props}
   >
diff --git a/dashboard/src/routes/auth.tsx b/dashboard/src/routes/auth.tsx
index 24ccbfeb..8c6addea 100644
--- a/dashboard/src/routes/auth.tsx
+++ b/dashboard/src/routes/auth.tsx
@@ -237,13 +237,15 @@ export function AuthPage() {
                   disabled={isValidating}
                   autoFocus
                   autoComplete="off"
+                  aria-invalid={error ? true : undefined}
+                  aria-describedby={error ? 'token-error' : undefined}
                 />
               </div>
             </div>
 
             {/* 错误提示 */}
             {error && (
-              <div className="flex items-center gap-2 rounded-md bg-red-50 p-3 text-sm text-red-600 dark:bg-red-950/50 dark:text-red-400">
+              <div id="token-error" role="alert" className="flex items-center gap-2 rounded-md bg-red-50 p-3 text-sm text-red-600 dark:bg-red-950/50 dark:text-red-400">
                 <AlertCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} fill="none" />
                 <span>{error}</span>
               </div>
diff --git a/dashboard/src/routes/chat/ChatTabBar.tsx b/dashboard/src/routes/chat/ChatTabBar.tsx
index 484b5a2d..924bfb5f 100644
--- a/dashboard/src/routes/chat/ChatTabBar.tsx
+++ b/dashboard/src/routes/chat/ChatTabBar.tsx
@@ -23,7 +23,7 @@ export function ChatTabBar({
       <div className="max-w-4xl mx-auto px-2 sm:px-4">
         <div className="flex items-center gap-1 overflow-x-auto py-1.5 scrollbar-thin">
           {tabs.map((tab) => (
-            <div
+            <button
               key={tab.id}
               className={cn(
                 "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer",
@@ -32,6 +32,7 @@ export function ChatTabBar({
                   ? "bg-background shadow-sm border"
                   : "text-muted-foreground"
               )}
+              type="button"
               onClick={() => onSwitch(tab.id)}
             >
               {tab.type === 'webui' ? (
@@ -62,7 +63,7 @@ export function ChatTabBar({
                   <X className="h-3 w-3" />
                 </span>
               )}
-            </div>
+            </button>
           ))}
           {/* 新建虚拟身份标签页按钮 */}
           <button
diff --git a/dashboard/src/routes/chat/MessageRenderer.tsx b/dashboard/src/routes/chat/MessageRenderer.tsx
index 32026db5..6bbced3f 100644
--- a/dashboard/src/routes/chat/MessageRenderer.tsx
+++ b/dashboard/src/routes/chat/MessageRenderer.tsx
@@ -39,6 +39,7 @@ export function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
             src={String(segment.data)} 
             className="max-w-[200px] h-8"
           >
+            <track kind="captions" src="" label="无字幕" default />
             您的浏览器不支持音频播放
           </audio>
         </div>
@@ -51,6 +52,7 @@ export function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
           src={String(segment.data)} 
           className="rounded-lg max-w-full max-h-64"
         >
+          <track kind="captions" src="" label="无字幕" default />
           您的浏览器不支持视频播放
         </video>
       )
diff --git a/dashboard/src/routes/config/adapter.tsx b/dashboard/src/routes/config/adapter.tsx
index a840f24b..6ce6384f 100644
--- a/dashboard/src/routes/config/adapter.tsx
+++ b/dashboard/src/routes/config/adapter.tsx
@@ -418,7 +418,7 @@ export function AdapterConfigPage() {
           </CardHeader>
           <CollapsibleContent>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4" role="radiogroup" aria-label="部署模式选择">
               {/* 预设模式 */}
               <div
                 className={`border-2 rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
@@ -426,7 +426,11 @@ export function AdapterConfigPage() {
                     ? 'border-primary bg-primary/5'
                     : 'border-muted hover:border-primary/50 active:border-primary/70'
                 }`}
+                role="radio"
+                aria-checked={mode === 'preset'}
+                tabIndex={0}
                 onClick={() => handleModeChange('preset')}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('preset') } }}
               >
                 <div className="flex items-start gap-2 md:gap-3">
                   <Package className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
@@ -446,7 +450,11 @@ export function AdapterConfigPage() {
                     ? 'border-primary bg-primary/5'
                     : 'border-muted hover:border-primary/50 active:border-primary/70'
                 }`}
+                role="radio"
+                aria-checked={mode === 'upload'}
+                tabIndex={0}
                 onClick={() => handleModeChange('upload')}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('upload') } }}
               >
                 <div className="flex items-start gap-2 md:gap-3">
                   <Upload className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
@@ -466,7 +474,11 @@ export function AdapterConfigPage() {
                     ? 'border-primary bg-primary/5'
                     : 'border-muted hover:border-primary/50 active:border-primary/70'
                 }`}
+                role="radio"
+                aria-checked={mode === 'path'}
+                tabIndex={0}
                 onClick={() => handleModeChange('path')}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('path') } }}
               >
                 <div className="flex items-start gap-2 md:gap-3">
                   <FolderOpen className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
@@ -496,10 +508,14 @@ export function AdapterConfigPage() {
                             ? 'border-primary bg-primary/5'
                             : 'border-muted hover:border-primary/50'
                         }`}
+                        role="radio"
+                        aria-checked={isSelected}
+                        tabIndex={0}
                         onClick={() => {
                           setSelectedPreset(key as PresetKey)
                           handleLoadFromPreset(key as PresetKey)
                         }}
+                        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedPreset(key as PresetKey); handleLoadFromPreset(key as PresetKey) } }}
                       >
                         <div className="flex items-start gap-3">
                           <Icon className="h-5 w-5 mt-0.5 flex-shrink-0" />
diff --git a/dashboard/src/routes/config/model/components/ModelTable.tsx b/dashboard/src/routes/config/model/components/ModelTable.tsx
index 9908c88b..e1876d1e 100644
--- a/dashboard/src/routes/config/model/components/ModelTable.tsx
+++ b/dashboard/src/routes/config/model/components/ModelTable.tsx
@@ -54,7 +54,7 @@ export const ModelTable = React.memo(function ModelTable({
   return (
     <div className="hidden md:block rounded-lg border bg-card overflow-hidden">
       <div className="overflow-x-auto">
-        <Table>
+        <Table aria-label="模型列表">
           <TableHeader>
             <TableRow>
               <TableHead className="w-12">
diff --git a/dashboard/src/routes/config/modelProvider/ProviderForm.tsx b/dashboard/src/routes/config/modelProvider/ProviderForm.tsx
index 81a9adad..87b9204c 100644
--- a/dashboard/src/routes/config/modelProvider/ProviderForm.tsx
+++ b/dashboard/src/routes/config/modelProvider/ProviderForm.tsx
@@ -209,10 +209,12 @@ export function ProviderForm({
                   }
                 }}
                 placeholder="例如: DeepSeek, SiliconFlow"
+                aria-invalid={formErrors.name ? true : undefined}
+                aria-describedby={formErrors.name ? 'name-error' : undefined}
                 className={formErrors.name ? 'border-destructive focus-visible:ring-destructive' : ''}
               />
               {formErrors.name && (
-                <p className="text-xs text-destructive">{formErrors.name}</p>
+                <p id="name-error" role="alert" className="text-xs text-destructive">{formErrors.name}</p>
               )}
             </div>
 
@@ -249,10 +251,12 @@ export function ProviderForm({
                 }}
                 placeholder="https://api.example.com/v1"
                 disabled={isUsingTemplate}
+                aria-invalid={formErrors.base_url ? true : undefined}
+                aria-describedby={formErrors.base_url ? 'base-url-error' : undefined}
                 className={`${isUsingTemplate ? 'bg-muted cursor-not-allowed' : ''} ${formErrors.base_url ? 'border-destructive focus-visible:ring-destructive' : ''}`}
               />
               {formErrors.base_url && (
-                <p className="text-xs text-destructive">{formErrors.base_url}</p>
+                <p id="base-url-error" role="alert" className="text-xs text-destructive">{formErrors.base_url}</p>
               )}
               {isUsingTemplate && !formErrors.base_url && (
                 <p className="text-xs text-muted-foreground">
@@ -295,6 +299,8 @@ export function ProviderForm({
                     }
                   }}
                   placeholder="sk-..."
+                  aria-invalid={formErrors.api_key ? true : undefined}
+                  aria-describedby={formErrors.api_key ? 'api-key-error' : undefined}
                   className={`flex-1 ${formErrors.api_key ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                 />
                 <Button
@@ -321,7 +327,7 @@ export function ProviderForm({
                 </Button>
               </div>
               {formErrors.api_key && (
-                <p className="text-xs text-destructive">{formErrors.api_key}</p>
+                <p id="api-key-error" role="alert" className="text-xs text-destructive">{formErrors.api_key}</p>
               )}
             </div>
 
diff --git a/dashboard/src/routes/config/modelProvider/ProviderList.tsx b/dashboard/src/routes/config/modelProvider/ProviderList.tsx
index 8b31008a..37c63b9a 100644
--- a/dashboard/src/routes/config/modelProvider/ProviderList.tsx
+++ b/dashboard/src/routes/config/modelProvider/ProviderList.tsx
@@ -170,7 +170,7 @@ export function ProviderList({
       {/* 桌面端表格视图 */}
       <div className="hidden md:block rounded-lg border bg-card overflow-hidden">
         <div className="overflow-x-auto">
-          <Table>
+          <Table aria-label="AI 模型提供商列表">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-12">
diff --git a/dashboard/src/routes/config/pack-detail.tsx b/dashboard/src/routes/config/pack-detail.tsx
index 74a88eb4..a1d7b027 100644
--- a/dashboard/src/routes/config/pack-detail.tsx
+++ b/dashboard/src/routes/config/pack-detail.tsx
@@ -400,7 +400,7 @@ export default function PackDetailPage() {
             </CardHeader>
             <CardContent>
               <div className="overflow-x-auto">
-                <Table>
+                <Table aria-label="API 提供商配置列表">
                   <TableHeader>
                     <TableRow>
                       <TableHead>名称</TableHead>
@@ -435,7 +435,7 @@ export default function PackDetailPage() {
             </CardHeader>
             <CardContent>
               <div className="overflow-x-auto">
-                <Table>
+                <Table aria-label="模型配置列表">
                   <TableHeader>
                     <TableRow>
                       <TableHead>模型名称</TableHead>
diff --git a/dashboard/src/routes/index.tsx b/dashboard/src/routes/index.tsx
index 59733566..326cfd29 100644
--- a/dashboard/src/routes/index.tsx
+++ b/dashboard/src/routes/index.tsx
@@ -52,6 +52,7 @@ import { RestartProvider, useRestart } from '@/lib/restart-context'
 import { RestartOverlay } from '@/components/restart-overlay'
 import { ExpressionReviewer } from '@/components/expression-reviewer'
 import { getReviewStats } from '@/lib/expression-api'
+import { ZoomableChart } from '@/components/ui/zoomable-chart'
 
 // 主导出组件：包装 RestartProvider
 export function IndexPage() {
@@ -736,6 +737,7 @@ function IndexPageContent() {
               <CardDescription>最近{timeRange}小时的请求量变化</CardDescription>
             </CardHeader>
             <CardContent>
+              <ZoomableChart aria-label="每小时请求量趋势图，显示最近若干小时的请求次数变化">
               <ChartContainer config={chartConfig} className="h-[300px] sm:h-[400px] w-full aspect-auto">
                 <LineChart data={hourly_data}>
                   <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
@@ -760,6 +762,7 @@ function IndexPageContent() {
                   />
                 </LineChart>
               </ChartContainer>
+              </ZoomableChart>
             </CardContent>
           </Card>
 
@@ -770,6 +773,7 @@ function IndexPageContent() {
                 <CardDescription>API调用成本变化</CardDescription>
               </CardHeader>
               <CardContent>
+                <ZoomableChart aria-label="API花费趋势图，显示最近若干小时的API调用成本变化">
                 <ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
                   <BarChart data={hourly_data}>
                     <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
@@ -789,6 +793,7 @@ function IndexPageContent() {
                     <Bar dataKey="cost" fill="var(--color-cost)" />
                   </BarChart>
                 </ChartContainer>
+                </ZoomableChart>
               </CardContent>
             </Card>
 
@@ -798,6 +803,7 @@ function IndexPageContent() {
                 <CardDescription>Token使用量变化</CardDescription>
               </CardHeader>
               <CardContent>
+                <ZoomableChart aria-label="Token消耗趋势图，显示最近若干小时的Token使用量变化">
                 <ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
                   <BarChart data={hourly_data}>
                     <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
@@ -817,6 +823,7 @@ function IndexPageContent() {
                     <Bar dataKey="tokens" fill="var(--color-tokens)" />
                   </BarChart>
                 </ChartContainer>
+                </ZoomableChart>
               </CardContent>
             </Card>
           </div>
diff --git a/dashboard/src/routes/monitor/planner-monitor.tsx b/dashboard/src/routes/monitor/planner-monitor.tsx
index f1b31fc1..2212906b 100644
--- a/dashboard/src/routes/monitor/planner-monitor.tsx
+++ b/dashboard/src/routes/monitor/planner-monitor.tsx
@@ -228,7 +228,10 @@ export function PlannerMonitor({ autoRefresh, refreshKey }: PlannerMonitorProps)
                       <div
                         key={chat.chat_id}
                         className="border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
+                        role="button"
+                        tabIndex={0}
                         onClick={() => handleChatClick(chat)}
+                        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleChatClick(chat) } }}
                       >
                         <div className="flex items-start justify-between mb-2">
                           <div className="flex items-center gap-2">
@@ -327,7 +330,10 @@ export function PlannerMonitor({ autoRefresh, refreshKey }: PlannerMonitorProps)
                         <div
                           key={plan.filename}
                           className="border rounded-lg p-3 hover:bg-accent/50 transition-colors cursor-pointer"
+                          role="button"
+                          tabIndex={0}
                           onClick={() => handleLogClick(plan.chat_id, plan.filename)}
+                          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleLogClick(plan.chat_id, plan.filename) } }}
                         >
                           <div className="flex items-center justify-between mb-2">
                             <span className="text-sm font-medium text-muted-foreground">
diff --git a/dashboard/src/routes/monitor/replier-monitor.tsx b/dashboard/src/routes/monitor/replier-monitor.tsx
index 6127b8d5..d2828bda 100644
--- a/dashboard/src/routes/monitor/replier-monitor.tsx
+++ b/dashboard/src/routes/monitor/replier-monitor.tsx
@@ -228,7 +228,10 @@ export function ReplierMonitor({ autoRefresh, refreshKey }: ReplierMonitorProps)
                       <div
                         key={chat.chat_id}
                         className="border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
+                        role="button"
+                        tabIndex={0}
                         onClick={() => handleChatClick(chat)}
+                        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleChatClick(chat) } }}
                       >
                         <div className="flex items-start justify-between mb-2">
                           <div className="flex items-center gap-2">
@@ -327,7 +330,10 @@ export function ReplierMonitor({ autoRefresh, refreshKey }: ReplierMonitorProps)
                         <div
                           key={reply.filename}
                           className="border rounded-lg p-3 hover:bg-accent/50 transition-colors cursor-pointer"
+                          role="button"
+                          tabIndex={0}
                           onClick={() => handleLogClick(reply.chat_id, reply.filename)}
+                          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleLogClick(reply.chat_id, reply.filename) } }}
                         >
                           <div className="flex items-center justify-between mb-2">
                             <span className="text-sm font-medium text-muted-foreground">
diff --git a/dashboard/src/routes/person.tsx b/dashboard/src/routes/person.tsx
index 7c51db05..8a1d8430 100644
--- a/dashboard/src/routes/person.tsx
+++ b/dashboard/src/routes/person.tsx
@@ -415,7 +415,7 @@ export function PersonManagementPage() {
       <div className="rounded-lg border bg-card">
         {/* 桌面端表格视图 */}
         <div className="hidden md:block">
-          <Table>
+          <Table aria-label="人物信息列表">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-12">
diff --git a/dashboard/src/routes/plugin-config.tsx b/dashboard/src/routes/plugin-config.tsx
index 8c2cff3d..f7374b8d 100644
--- a/dashboard/src/routes/plugin-config.tsx
+++ b/dashboard/src/routes/plugin-config.tsx
@@ -924,7 +924,10 @@ function PluginConfigPageContent() {
                   <div
                     key={plugin.id}
                     className="flex items-center justify-between p-4 rounded-lg border hover:bg-muted/50 cursor-pointer transition-colors"
+                    role="button"
+                    tabIndex={0}
                     onClick={() => setSelectedPlugin(plugin)}
+                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedPlugin(plugin) } }}
                   >
                     <div className="flex items-center gap-3 min-w-0">
                       <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
diff --git a/dashboard/src/routes/plugin-mirrors.tsx b/dashboard/src/routes/plugin-mirrors.tsx
index da217f9f..33336df2 100644
--- a/dashboard/src/routes/plugin-mirrors.tsx
+++ b/dashboard/src/routes/plugin-mirrors.tsx
@@ -302,7 +302,7 @@ export function PluginMirrorsPage() {
           <Card>
             {/* 桌面端表格 */}
             <div className="hidden md:block">
-              <Table>
+              <Table aria-label="插件镜像源列表">
                 <TableHeader>
                   <TableRow>
                     <TableHead>状态</TableHead>
diff --git a/dashboard/src/routes/plugins/InstallDialog.tsx b/dashboard/src/routes/plugins/InstallDialog.tsx
index 1b0f4891..33f8bdf6 100644
--- a/dashboard/src/routes/plugins/InstallDialog.tsx
+++ b/dashboard/src/routes/plugins/InstallDialog.tsx
@@ -74,6 +74,7 @@ export function InstallDialog({ open, plugin, onOpenChange, onInstall }: Install
           {showAdvancedOptions && (
             <div className="space-y-4 p-4 border rounded-lg">
               <div className="space-y-2">
+                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- section heading above Tabs, not a form label */}
                 <label className="text-sm font-medium">分支选择</label>
                 
                 <Tabs value={branchInputMode} onValueChange={(value) => setBranchInputMode(value as 'preset' | 'custom')}>
diff --git a/dashboard/src/routes/resource/emoji/EmojiDialogs.tsx b/dashboard/src/routes/resource/emoji/EmojiDialogs.tsx
index 44d510dd..e7b28221 100644
--- a/dashboard/src/routes/resource/emoji/EmojiDialogs.tsx
+++ b/dashboard/src/routes/resource/emoji/EmojiDialogs.tsx
@@ -773,6 +773,14 @@ export function EmojiUploadDialog({
                   <div
                     key={file.id}
                     onClick={() => setSelectedFileId(file.id)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedFileId(file.id) } }}
+                    className={`
+                      flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
+                      ${isSelected ? 'ring-2 ring-primary' : ''}
+                      ${complete ? 'border-green-500 bg-green-50 dark:bg-green-950/20' : 'border-border hover:border-muted-foreground/50'}
+                    `}
                     className={`
                       flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
                       ${isSelected ? 'ring-2 ring-primary' : ''}
diff --git a/dashboard/src/routes/resource/emoji/EmojiList.tsx b/dashboard/src/routes/resource/emoji/EmojiList.tsx
index ddc7a75d..3d6abdf7 100644
--- a/dashboard/src/routes/resource/emoji/EmojiList.tsx
+++ b/dashboard/src/routes/resource/emoji/EmojiList.tsx
@@ -76,7 +76,10 @@ export function EmojiList({
                 ? 'ring-2 ring-primary bg-primary/5'
                 : ''
             }`}
+            role="button"
+            tabIndex={0}
             onClick={() => onToggleSelect(emoji.id)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggleSelect(emoji.id) } }}
           >
             {/* 选中指示器 */}
             <div
diff --git a/dashboard/src/routes/resource/expression/ExpressionList.tsx b/dashboard/src/routes/resource/expression/ExpressionList.tsx
index b39d748d..06bba0cc 100644
--- a/dashboard/src/routes/resource/expression/ExpressionList.tsx
+++ b/dashboard/src/routes/resource/expression/ExpressionList.tsx
@@ -74,7 +74,7 @@ export function ExpressionList({
     <div className="rounded-lg border bg-card">
       {/* 桌面端表格视图 */}
       <div className="hidden md:block">
-        <Table>
+        <Table aria-label="表达方式列表">
           <TableHeader>
             <TableRow>
               <TableHead className="w-12">
diff --git a/dashboard/src/routes/resource/jargon/JargonList.tsx b/dashboard/src/routes/resource/jargon/JargonList.tsx
index 0190c8c0..c6165d62 100644
--- a/dashboard/src/routes/resource/jargon/JargonList.tsx
+++ b/dashboard/src/routes/resource/jargon/JargonList.tsx
@@ -74,7 +74,7 @@ export function JargonList({
     <div className="rounded-lg border bg-card">
       {/* 桁面端表格视图 */}
       <div className="hidden md:block">
-        <Table>
+        <Table aria-label="黑话列表">
           <TableHeader>
             <TableRow>
               <TableHead className="w-12">
diff --git a/dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx b/dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx
index 51ad8db7..93cf7dca 100644
--- a/dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx
+++ b/dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx
@@ -28,7 +28,7 @@ export function NodeDetailDialog({ open, onOpenChange, selectedNodeData }: NodeD
             <div className="space-y-4 pb-2">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="text-sm font-medium text-muted-foreground">类型</label>
+                  <p className="text-sm font-medium text-muted-foreground">类型</p>
                   <div className="mt-1">
                     <Badge variant={selectedNodeData.type === 'entity' ? 'default' : 'secondary'}>
                       {selectedNodeData.type === 'entity' ? '🏷️ 实体' : '📄 段落'}
@@ -38,14 +38,14 @@ export function NodeDetailDialog({ open, onOpenChange, selectedNodeData }: NodeD
               </div>
 
               <div>
-                <label className="text-sm font-medium text-muted-foreground">ID</label>
+                <p className="text-sm font-medium text-muted-foreground">ID</p>
                 <code className="mt-1 block p-2 bg-muted rounded text-xs break-all">
                   {selectedNodeData.id}
                 </code>
               </div>
 
               <div>
-                <label className="text-sm font-medium text-muted-foreground">内容</label>
+                <p className="text-sm font-medium text-muted-foreground">内容</p>
                 <div className="mt-1 p-3 bg-muted rounded border">
                   <p className="text-sm whitespace-pre-wrap break-words">{selectedNodeData.content}</p>
                 </div>
@@ -106,7 +106,7 @@ export function EdgeDetailDialog({ open, onOpenChange, selectedEdgeData }: EdgeD
               </div>
 
               <div>
-                <label className="text-sm font-medium text-muted-foreground">权重</label>
+                <p className="text-sm font-medium text-muted-foreground">权重</p>
                 <div className="mt-1">
                   <Badge variant="outline" className="text-base font-mono">
                     {selectedEdgeData.edge.weight.toFixed(4)}
diff --git a/dashboard/src/routes/resource/knowledge-graph/GraphVisualization.tsx b/dashboard/src/routes/resource/knowledge-graph/GraphVisualization.tsx
index 2ea59f06..d8d865de 100644
--- a/dashboard/src/routes/resource/knowledge-graph/GraphVisualization.tsx
+++ b/dashboard/src/routes/resource/knowledge-graph/GraphVisualization.tsx
@@ -130,53 +130,67 @@ export function GraphVisualization({ graphData, onNodeClick, onEdgeClick, loadin
   }
 
   return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick}
-      onEdgeClick={onEdgeClick}
-      nodeTypes={nodeTypes}
-      fitView
-      minZoom={0.05}
-      maxZoom={1.5}
-      defaultViewport={{ x: 0, y: 0, zoom: 0.5 }}
-      elevateNodesOnSelect={nodeCount <= 500}
-      nodesDraggable={nodeCount <= 1000}
-      attributionPosition="bottom-left"
+    <div
+      style={{ touchAction: 'none' }}
+      role="img"
+      aria-label={`知识图谱可视化，共 ${nodeCount} 个节点，${edges.length} 条关系`}
+      className="w-full h-full"
     >
-      <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
-      <Controls />
-      {nodeCount <= 500 && (
-        <MiniMap
-          nodeColor={miniMapNodeColor}
-          nodeBorderRadius={8}
-          pannable
-          zoomable
-        />
-      )}
+      <span className="sr-only">
+        {`知识图谱包含 ${nodeCount} 个节点和 ${edges.length} 条关系。`}
+      </span>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onEdgeClick={onEdgeClick}
+        nodeTypes={nodeTypes}
+        fitView
+        minZoom={0.05}
+        maxZoom={1.5}
+        defaultViewport={{ x: 0, y: 0, zoom: 0.5 }}
+        elevateNodesOnSelect={nodeCount <= 500}
+        nodesDraggable={nodeCount <= 1000}
+        attributionPosition="bottom-left"
+        panOnScroll
+        panOnScrollMode={undefined}
+        panOnDrag
+        zoomOnPinch
+      >
+        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+        <Controls />
+        {nodeCount <= 500 && (
+          <MiniMap
+            nodeColor={miniMapNodeColor}
+            nodeBorderRadius={8}
+            pannable
+            zoomable
+          />
+        )}
 
-      <Panel position="top-right" className="bg-background/95 backdrop-blur-sm rounded-lg border p-3 shadow-lg">
-        <div className="text-sm font-semibold mb-2">图例</div>
-        <div className="space-y-2 text-xs">
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 rounded bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700" />
-            <span>实体节点</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 rounded bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700" />
-            <span>段落节点</span>
-          </div>
-          {nodeCount > 200 && (
-            <div className="mt-2 pt-2 border-t text-yellow-600 dark:text-yellow-500">
-              <div className="font-semibold">性能模式</div>
-              <div>已禁用动画</div>
-              {nodeCount > 500 && <div>已禁用缩略图</div>}
+        <Panel position="top-right" className="bg-background/95 backdrop-blur-sm rounded-lg border p-3 shadow-lg">
+          <div className="text-sm font-semibold mb-2">图例</div>
+          <div className="space-y-2 text-xs">
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700" aria-hidden="true" />
+              <span>实体节点</span>
             </div>
-          )}
-        </div>
-      </Panel>
-    </ReactFlow>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700" aria-hidden="true" />
+              <span>段落节点</span>
+            </div>
+            {nodeCount > 200 && (
+              <div className="mt-2 pt-2 border-t text-yellow-600 dark:text-yellow-500">
+                <div className="font-semibold">性能模式</div>
+                <div>已禁用动画</div>
+                {nodeCount > 500 && <div>已禁用缩略图</div>}
+              </div>
+            )}
+          </div>
+        </Panel>
+      </ReactFlow>
+    </div>
   )
 }