（3916期）无障碍标签审查与自动修复 – React 无障碍合规智能修复专家

React 无障碍合规智能修复专家 专为企业级 React/TSX 项目设计的无障碍审查技能，自动检测并修复 WCAG 合规问题，特别针对 Tauri 桌面端、微信/QQ 内核等多平台兼容性优化。 使用说明 核心用法 a11y-label-audit 是一款面向 React/TypeScript 技术栈的无障碍（Accessibility）自动化审查与修复工具。该技能通过静态代码分析扫描 .tsx 文件，依据 7 大类检测规则识别 WCAG 合规违规项，并自动应用代码修复。用户只需指定扫描范围（文件、目录或组件名），技能即会执行完整的「扫描-报告-修复-验证」工作流，输出结构化的审查报告并保留原有代码风格。 检测覆盖六大核心场景：纯图标按钮缺失 aria-label、div/span 模拟按钮缺少键盘交互、图片 alt 文本缺失或无意义、表单元素未关联标签、弹窗/对话框缺少焦点管理、动态内容区域缺少实时播报标注。第 7 条规则专门针对多平台兼容性，覆盖 Tauri（WKWebView/WebView2）、微信 X5 内核、QQ 浏览器、Chrome 扩展、小程序 WebView 等受限运行环境。 显著优点 深度框架集成：原生支持 TDesign、@tencent/yb-component、Next.js Image 等企业常用组件库，能识别封装层对无障碍属性的透传问题，避免「假修复」。 多平台兼容性优先：业内罕见的将微信/QQ 内置浏览器、小程序 WebView 等国内主流环境的 ARIA 支持差异纳入核心规则，提供 inert polyfill、:focus-visible 回退、aria-live 多通道反馈等具体修复策略。 智能语义推断：修复不依赖硬编码模板，而是基于上下文（图标类型、文件名、placeholder、父级语义）推断有意义的标签文本，并自动识别 i18n 用法（t() 函数）进行包裹。 零破坏修复：使用 StrReplace 精确修改，严格保留缩进风格、引号习惯和 TypeScript 类型，修复后自动运行 ReadLints 验证未引入新错误。 潜在缺点与局限性 技术栈局限：仅支持 React/TSX，对 Vue、Svelte、Angular 等框架无检测能力；依赖静态正则匹配（Grep），对动态渲染（React.createElement、高阶组件包裹）的识别能力有限。 语义推断边界：自动生成的 aria-label 和 alt 文本基于启发式规则，可能产生「技术上合规但语义不准确」的结果（如将通用图标推断为「设置」而非实际功能的「筛选」），仍需人工复核。 焦点管理弱覆盖：弹窗的焦点捕获/归还逻辑以「警告」形式标注而非自动修复，因涉及运行时状态管理，无法通过静态分析安全修改。 平台检测依赖：兼容性修复策略依赖项目已有的环境变量（isDesktop、isMpWebview），若项目无此类封装，需手动补充条件分支。 适合的目标群体 企业级中后台前端团队：使用 TDesign 或内部组件库，需满足合规审计要求 跨平台桌面应用开发者：基于 Tauri 构建 macOS/Windows 客户端，需兼顾多系统屏幕阅读器 微信生态开发者：开发运行于微信内置浏览器、企业微信、小程序 WebView 的 H5 应用 无障碍合规专员：需批量审查遗留代码库，生成可量化的修复报告 使用风险 运行时性能：修复过程涉及全目录 Glob 扫描和大规模正则匹配，在超大型代码库（>10万行）中可能产生显著 I/O 开销，建议在 CI 流水线中异步执行而非开发时实时运行。 依赖项冲突：自动注入的 tabIndex、role 等属性可能与现有 CSS 选择器（如 [tabindex]:focus）或测试用例（如 Enzyme 查找条件）产生意外交互，修复后需全量回归测试。 过度修复风险：规则 3 对装饰性图片的识别依赖开发者标注 alt=""，若项目大量使用无意义占位图而未明确标记，可能被误添加描述性 alt 文本，反而造成屏幕阅读器噪音。 平台适配复杂性：微信/QQ 内核的 ARIA 支持存在版本碎片化，技能提供的兼容性策略基于通用最佳实践，特定版本（如老旧 X5）可能需要额外 UA 嗅探微调。 原始说明 扫描 React/TSX 组件中缺失的无障碍标签并自动修复。 检测纯图标按钮缺少 aria-label、div/span 模拟按钮缺少 role 和键盘交互、 图片缺少有意义的 alt 文本、表单元素缺少 label 关联、 弹窗缺少 aria-modal 和焦点管理、动态内容缺少 aria-live 等问题。...