SuperAPI AI 工具集

ibm-a11y-testing-guide

测试与质量

查看项目

更新于 10-15 23:48

技能介绍

用途:为 Langflow 前端(src/frontend)编写和运行无障碍(a11y)测试的参考指南,用于写测试、调试违规或落实由路由扫描、Level 1 审计、PR 修复等流程发现的修复;本身不决定扫描范围,也不自行驱动修复循环。

核心要求:自动化 a11y 必须同时跑两个引擎。axe-core 通过 Jest 的 axe()(@/utils/a11y-test)在 jsdom 运行,快,擅长对比度、标签、角色、ARIA 基础;IBM Equal Access 更严格,擅 ARIA 结构与键盘语义,能发现 axe 静默放过的 WCAG Level 1 问题,入口为 Playwright 的 page.runA11yScan(label)(对实时 DOM 扫描,可覆盖打开中的模态/菜单等状态)和 scripts/a11y/a11y_scan.py(仅默认加载页面)。axe 全绿不等于完成;涉及表格/树/列表/菜单等复合组件时必须用 IBM。

验证命令:cd src/frontend;RUN_A11Y=true RUN_A11Y_ASSERT=true npx playwright test tests/a11y/<feature>.a11y.spec.ts --project=chromium --workers=5。Python 扫描需先 uv run --with playwright playwright install chromium,再 uv run --with playwright python scripts/a11y/a11y_scan.py --url http://localhost:3000 --routes /settings/<route> --out /tmp/a11y.json --markdown /tmp/a11y.md --timeout-ms 45000。RUN_A11Y=true 执行扫描,加 RUN_A11Y_ASSERT=true 才会因新违规失败。

检查要点按 POUR:可感知(文本替代、对比度 4.5:1/3:1、320px 与 400% 缩放重排);可操作(键盘可达可操作、焦点可见、顺序合理、无键盘陷阱、禁用项不进 tab 序、复合组件单一 tab 停靠点、异步切换后焦点落点合理);可理解(输入有程序化标签、错误文本关联字段);健壮(角色/名称/状态正确、ARIA 父子合法、可聚焦元素不带 presentation 角色、aria-hidden 不包可聚焦元素)。

已知 axe 通过但 IBM 报出的规则包括 element_tabbable_role_valid、aria_child_valid、aria_child_tabbable、aria_hidden_focus_misuse、aria_accessiblename_exists、aria_content_in_landmark。

组件注意:AG Grid(共享 TableComponent)的禁用分页按钮需 tabindex="-1" 但不能 inert/disabled;空 rowgroup 需 role="presentation";仅图标列头需 headerName;单元格内交互控件需在 onCellKeyDown 上响应 Enter/Space;无边框网格需恢复 :focus-visible 轮廓;设置 ensureDomOrder: true。Radix(shadcn)三类陷阱:未加 asChild 导致双重 tab 停靠点、关闭时焦点恢复竞争、门户菜单触发 landmark 规则。模态/抽屉需标题描述、焦点陷阱、关闭后焦点回到触发器、Escape 关闭。

测试层次:jsdom 可渲染的原语/组件用 Jest + axe,放在 tests/<name>.a11y.test.tsx;需真实布局、路由、状态、模态、表格、焦点顺序或键盘行为的用 Playwright,放在 tests/a11y/<feature>.a11y.spec.ts,从 ../fixtures 导入 test/expect,测试打 @release 与域标签。

IBM 基线:对无法逐页修复的框架级问题,在 tests/a11y/baselines 建立 {project}__{label}.json 基线,按 path.dom + ruleId + reasonId 精确匹配标记 ignored,不要静默取消扫描或断言;基线匹配精确,易因其他 <body> 门户(如 toast)索引偏移而过期。

覆盖矩阵与限制:路由/页面改动应覆盖默认、空、有数据、模态/下拉打开、校验错误、选中展开、移动端视口等最小状态集。资料未提及其他功能、收费或价格信息。