SuperAPI AI 工具集

accessibility

测试与质量

查看项目

更新于 10-16 02:34

技能介绍

用途:对指定组件执行统一的无障碍审计,覆盖静态分析、运行时测试、ARIA 模式、键盘导航和颜色对比度五个层面,并输出结构化报告。

主要能力与用法:

  1. 静态分析:对组件源码运行 ESLint 的 lit-a11y 规则,命令为 cd projects/core && pnpm exec eslint --no-warn-ignored src/<component>/<component>.ts,并检查交互元素缺少 aria-label/aria-labelledby、自定义交互模式缺少 role、图片缺少 alt、表单输入缺少关联标签等问题。
  2. 运行时测试:确认存在 <component>.test.axe.ts 并覆盖所有组件变体,测试需从 @internals/testing/axe 导入 runAxe,覆盖各视觉变体(状态、尺寸、禁用态),期望零违规 expect(results.violations.length).toBe(0),并正确创建与移除 fixture。
  3. ARIA 模式验证:识别组件实现的 WAI-ARIA Authoring Practices 模式,核对 role、必需 ARIA 状态(aria-expanded、aria-selected、aria-checked 等)、tabindex 管理及复合组件的焦点管理。
  4. 键盘导航:检查是否使用来自 @nvidia-elements/core/internal 的 keynav 响应式控制器,可用 Grep pattern="keynav|keyNavigationList|KeyNav" path="projects/core/src/<component>/" 检索,并核对方向键、Enter/Space、Escape、Tab、Home/End 等交互是否符合 ARIA 模式。
  5. 颜色对比度:检查组件是否使用主题令牌而非硬编码颜色,可用 Grep pattern="rgb|#[0-9a-fA-F]|hsl" path="projects/core/src/<component>/<component>.css" 检索,标记硬编码颜色值,并确认 CSS 自定义属性映射到满足 WCAG 2.1 AA 对比度的主题令牌(普通文本 4.5:1,大文本 3:1)。

输出:给出总体通过/失败状态、按审计层面分组的发现、每项发现的具体修复步骤,以及运行相关测试的命令。

限制:执行前必须先阅读 projects/site/src/docs/internal/guidelines/testing-accessibility.md;具体组件路径、测试文件与主题令牌需按项目实际结构替换。其他细节暂未提供。