feat(a11y): improve core interaction accessibility and add audit guide

docs/.vitepress/config.ts

@@ -1,150 +1,163 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vitepress'
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitepress";
 
 export default defineConfig({
-  base: '/react-ui-library/',
-  title: 'Nova UI',
-  description: 'Enterprise React component library with TypeScript and Tailwind CSS',
-  lang: 'zh-CN',
+  base: "/react-ui-library/",
+  title: "Nova UI",
+  description:
+    "Enterprise React component library with TypeScript and Tailwind CSS",
+  lang: "zh-CN",
   appearance: true,
   themeConfig: {
-    darkModeSwitchLabel: '主题',
-    lightModeSwitchTitle: '切换到浅色模式',
-    darkModeSwitchTitle: '切换到深色模式',
-    logo: '/favicon.svg',
+    darkModeSwitchLabel: "主题",
+    lightModeSwitchTitle: "切换到浅色模式",
+    darkModeSwitchTitle: "切换到深色模式",
+    logo: "/favicon.svg",
     nav: [
-      { text: '指南', link: '/guide/introduction' },
-      { text: '组件', link: '/components/overview' },
-      { text: '在线示例', link: '/playground' },
+      { text: "指南", link: "/guide/introduction" },
+      { text: "组件", link: "/components/overview" },
+      { text: "在线示例", link: "/playground" },
     ],
     sidebar: {
-      '/guide/': [
+      "/guide/": [
         {
-          text: '开始',
+          text: "开始",
           items: [
-            { text: '项目介绍', link: '/guide/introduction' },
-            { text: '快速开始', link: '/guide/getting-started' },
-            { text: '文档优化 TODO', link: '/guide/docs-optimization-todo' },
+            { text: "项目介绍", link: "/guide/introduction" },
+            { text: "快速开始", link: "/guide/getting-started" },
+            { text: "可访问性", link: "/guide/accessibility" },
+            { text: "文档优化 TODO", link: "/guide/docs-optimization-todo" },
           ],
         },
       ],
-      '/components/': [
-        { text: '概览', link: '/components/overview' },
+      "/components/": [
+        { text: "概览", link: "/components/overview" },
         {
-          text: '布局',
+          text: "布局",
           collapsed: false,
           items: [
-            { text: 'Layout 页面骨架', link: '/components/layout' },
-            { text: 'Container 布局容器', link: '/components/container' },
-            { text: 'Row 行', link: '/components/row' },
-            { text: 'Col 列', link: '/components/col' },
-            { text: 'Grid 网格', link: '/components/grid' },
-            { text: 'Flex 弹性布局', link: '/components/flex' },
-            { text: 'Space 间距', link: '/components/space' },
-            { text: 'Divider 分割线', link: '/components/divider' },
-            { text: 'SplitPane 分栏', link: '/components/split-pane' },
+            { text: "Layout 页面骨架", link: "/components/layout" },
+            { text: "Container 布局容器", link: "/components/container" },
+            { text: "Row 行", link: "/components/row" },
+            { text: "Col 列", link: "/components/col" },
+            { text: "Grid 网格", link: "/components/grid" },
+            { text: "Flex 弹性布局", link: "/components/flex" },
+            { text: "Space 间距", link: "/components/space" },
+            { text: "Divider 分割线", link: "/components/divider" },
+            { text: "SplitPane 分栏", link: "/components/split-pane" },
           ],
         },
         {
-          text: '基础',
+          text: "基础",
           collapsed: false,
           items: [
-            { text: 'Button 按钮', link: '/components/button' },
-            { text: 'Icon 图标', link: '/components/icon' },
-            { text: 'Typography 排版', link: '/components/typography' },
+            { text: "Button 按钮", link: "/components/button" },
+            { text: "Icon 图标", link: "/components/icon" },
+            { text: "Typography 排版", link: "/components/typography" },
           ],
         },
         {
-          text: '表单',
+          text: "表单",
           collapsed: false,
           items: [
-            { text: 'Input 输入框', link: '/components/input' },
-            { text: 'InputNumber 数字输入框', link: '/components/input-number' },
-            { text: 'AutoComplete 自动完成', link: '/components/auto-complete' },
-            { text: 'Select 选择器', link: '/components/select' },
-            { text: 'Checkbox 多选框', link: '/components/checkbox' },
-            { text: 'Radio 单选框', link: '/components/radio' },
-            { text: 'Switch 开关', link: '/components/switch' },
-            { text: 'DatePicker 日期选择', link: '/components/date-picker' },
-            { text: 'TimePicker 时间选择', link: '/components/time-picker' },
-            { text: 'Slider 滑动条', link: '/components/slider' },
-            { text: 'Rate 评分', link: '/components/rate' },
-            { text: 'Upload 上传', link: '/components/upload' },
-            { text: 'Form 表单', link: '/components/form' },
-            { text: 'Calendar 日历', link: '/components/calendar' },
-            { text: 'Transfer 穿梭框', link: '/components/transfer' },
-            { text: 'Cascader 级联选择', link: '/components/cascader' },
-            { text: 'TreeSelect 树选择', link: '/components/tree-select' },
-            { text: 'ColorPicker 颜色选择', link: '/components/color-picker' },
-            { text: 'Segmented 分段控制器', link: '/components/segmented' },
-            { text: 'Mentions 提及', link: '/components/mentions' },
+            { text: "Input 输入框", link: "/components/input" },
+            {
+              text: "InputNumber 数字输入框",
+              link: "/components/input-number",
+            },
+            {
+              text: "AutoComplete 自动完成",
+              link: "/components/auto-complete",
+            },
+            { text: "Select 选择器", link: "/components/select" },
+            { text: "Checkbox 多选框", link: "/components/checkbox" },
+            { text: "Radio 单选框", link: "/components/radio" },
+            { text: "Switch 开关", link: "/components/switch" },
+            { text: "DatePicker 日期选择", link: "/components/date-picker" },
+            { text: "TimePicker 时间选择", link: "/components/time-picker" },
+            { text: "Slider 滑动条", link: "/components/slider" },
+            { text: "Rate 评分", link: "/components/rate" },
+            { text: "Upload 上传", link: "/components/upload" },
+            { text: "Form 表单", link: "/components/form" },
+            { text: "Calendar 日历", link: "/components/calendar" },
+            { text: "Transfer 穿梭框", link: "/components/transfer" },
+            { text: "Cascader 级联选择", link: "/components/cascader" },
+            { text: "TreeSelect 树选择", link: "/components/tree-select" },
+            { text: "ColorPicker 颜色选择", link: "/components/color-picker" },
+            { text: "Segmented 分段控制器", link: "/components/segmented" },
+            { text: "Mentions 提及", link: "/components/mentions" },
           ],
         },
         {
-          text: '反馈',
+          text: "反馈",
           collapsed: false,
           items: [
-            { text: 'Alert 警告提示', link: '/components/alert' },
-            { text: 'Modal 对话框', link: '/components/modal' },
-            { text: 'Drawer 抽屉', link: '/components/drawer' },
-            { text: 'Toast 轻提示', link: '/components/toast' },
-            { text: 'Tooltip 文字提示', link: '/components/tooltip' },
-            { text: 'Popover 气泡卡片', link: '/components/popover' },
-            { text: 'Popconfirm 气泡确认', link: '/components/popconfirm' },
-            { text: 'Loading 加载中', link: '/components/loading' },
-            { text: 'Spin 加载动画', link: '/components/spin' },
-            { text: 'Skeleton 骨架屏', link: '/components/skeleton' },
-            { text: 'Notification 通知', link: '/components/notification' },
-            { text: 'Tour 漫游式引导', link: '/components/tour' },
-            { text: 'Watermark 水印', link: '/components/watermark' },
+            { text: "Alert 警告提示", link: "/components/alert" },
+            { text: "Modal 对话框", link: "/components/modal" },
+            { text: "Drawer 抽屉", link: "/components/drawer" },
+            { text: "Toast 轻提示", link: "/components/toast" },
+            { text: "Tooltip 文字提示", link: "/components/tooltip" },
+            { text: "Popover 气泡卡片", link: "/components/popover" },
+            { text: "Popconfirm 气泡确认", link: "/components/popconfirm" },
+            { text: "Loading 加载中", link: "/components/loading" },
+            { text: "Spin 加载动画", link: "/components/spin" },
+            { text: "Skeleton 骨架屏", link: "/components/skeleton" },
+            { text: "Notification 通知", link: "/components/notification" },
+            { text: "Tour 漫游式引导", link: "/components/tour" },
+            { text: "Watermark 水印", link: "/components/watermark" },
           ],
         },
         {
-          text: '数据展示',
+          text: "数据展示",
           collapsed: false,
           items: [
-            { text: 'Table 表格', link: '/components/table' },
-            { text: 'List 列表', link: '/components/list' },
-            { text: 'Card 卡片', link: '/components/card' },
-            { text: 'Carousel 走马灯', link: '/components/carousel' },
-            { text: 'Tag 标签', link: '/components/tag' },
-            { text: 'Badge 徽标', link: '/components/badge' },
-            { text: 'Avatar 头像', link: '/components/avatar' },
-            { text: 'Image 图片', link: '/components/image' },
-            { text: 'Pagination 分页', link: '/components/pagination' },
-            { text: 'Progress 进度条', link: '/components/progress' },
-            { text: 'Statistic 统计数值', link: '/components/statistic' },
-            { text: 'Descriptions 描述列表', link: '/components/descriptions' },
-            { text: 'Empty 空状态', link: '/components/empty' },
-            { text: 'Result 结果', link: '/components/result' },
-            { text: 'Timeline 时间轴', link: '/components/timeline' },
-            { text: 'QRCode 二维码', link: '/components/qrcode' },
-            { text: 'ImagePreview 图片预览', link: '/components/image-preview' },
-            { text: 'VirtualList 虚拟列表', link: '/components/virtual-list' },
+            { text: "Table 表格", link: "/components/table" },
+            { text: "List 列表", link: "/components/list" },
+            { text: "Card 卡片", link: "/components/card" },
+            { text: "Carousel 走马灯", link: "/components/carousel" },
+            { text: "Tag 标签", link: "/components/tag" },
+            { text: "Badge 徽标", link: "/components/badge" },
+            { text: "Avatar 头像", link: "/components/avatar" },
+            { text: "Image 图片", link: "/components/image" },
+            { text: "Pagination 分页", link: "/components/pagination" },
+            { text: "Progress 进度条", link: "/components/progress" },
+            { text: "Statistic 统计数值", link: "/components/statistic" },
+            { text: "Descriptions 描述列表", link: "/components/descriptions" },
+            { text: "Empty 空状态", link: "/components/empty" },
+            { text: "Result 结果", link: "/components/result" },
+            { text: "Timeline 时间轴", link: "/components/timeline" },
+            { text: "QRCode 二维码", link: "/components/qrcode" },
+            {
+              text: "ImagePreview 图片预览",
+              link: "/components/image-preview",
+            },
+            { text: "VirtualList 虚拟列表", link: "/components/virtual-list" },
           ],
         },
         {
-          text: '导航',
+          text: "导航",
           collapsed: false,
           items: [
-            { text: 'Tabs 标签页', link: '/components/tabs' },
-            { text: 'Menu 菜单', link: '/components/menu' },
-            { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb' },
-            { text: 'Dropdown 下拉菜单', link: '/components/dropdown' },
-            { text: 'Steps 步骤条', link: '/components/steps' },
-            { text: 'Collapse 折叠面板', link: '/components/collapse' },
-            { text: 'Tree 树形控件', link: '/components/tree' },
-            { text: 'Anchor 锚点', link: '/components/anchor' },
-            { text: 'Affix 固钉', link: '/components/affix' },
-            { text: 'BackTop 回到顶部', link: '/components/back-top' },
-            { text: 'FloatButton 悬浮按钮', link: '/components/float-button' },
+            { text: "Tabs 标签页", link: "/components/tabs" },
+            { text: "Menu 菜单", link: "/components/menu" },
+            { text: "Breadcrumb 面包屑", link: "/components/breadcrumb" },
+            { text: "Dropdown 下拉菜单", link: "/components/dropdown" },
+            { text: "Steps 步骤条", link: "/components/steps" },
+            { text: "Collapse 折叠面板", link: "/components/collapse" },
+            { text: "Tree 树形控件", link: "/components/tree" },
+            { text: "Anchor 锚点", link: "/components/anchor" },
+            { text: "Affix 固钉", link: "/components/affix" },
+            { text: "BackTop 回到顶部", link: "/components/back-top" },
+            { text: "FloatButton 悬浮按钮", link: "/components/float-button" },
           ],
         },
       ],
     },
-    socialLinks: [{ icon: 'github', link: 'https://github.com/your-org/nova-ui' }],
+    socialLinks: [
+      { icon: "github", link: "https://github.com/your-org/nova-ui" },
+    ],
   },
   vite: {
     plugins: [react()],
   },
-})
+});

docs/.vitepress/theme/custom.css

@@ -1,5 +1,5 @@
 :root {
-  --vp-font-family-base: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --vp-font-family-base: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
   --vp-c-brand-1: #2459ff;
   --vp-c-brand-2: #1d48d6;
   --vp-c-brand-3: #1a3cae;
@@ -83,7 +83,9 @@
   padding: 10px 10px 10px 12px;
   min-width: 2.75rem;
   text-align: right;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    monospace;
   font-size: 13px;
   line-height: 1.55;
   color: var(--vp-c-text-3);
@@ -111,7 +113,9 @@
 .live-code-editor-live pre {
   margin: 0 !important;
   padding: 10px 12px !important;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    monospace !important;
   font-size: 13px !important;
   line-height: 1.55 !important;
   tab-size: 2;
@@ -145,7 +149,9 @@
   padding: 14px;
   background: var(--vp-c-bg-soft);
   text-decoration: none;
-  transition: border-color 0.2s ease, transform 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
 }
 
 .comp-overview-card:hover {