accesslint 差异分析

accesslint-diff
分类通用
作者Agentic Awesome Skills 社区
许可MIT
评分4.50/5
使用6.9K

默认分支：!git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main

仅报告变更内容。定位问题，无需修复。如果 $ARGUMENTS 中没有 URL，请询问用户。

解析 $ARGUMENTS：如果存在 --branch <name> 则将其剔除 $\rightarrow$ 进入分支模式。如果 --branch 没有值，则使用上述默认分支。剩余部分为 URL。

使用场景

  • 当任务符合以下描述时使用此技能：对比实时页面的无障碍违规项与基准线 —— 默认对比未提交的更改（基于 stash），或通过 --branch [<name>] 对比指定分支。仅报告新增的违规项、已修复的违规项以及预先存在的数量。如需进行不含对比的全量审计，请使用 scan。

1. 审计

bash
PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')

Stash 模式（默认 —— 未提交的更改）。首先告知用户：_"正在以对比模式运行 —— 正在暂存（stash）您的更改以获取基准线，随后将恢复。您的工作区将被完全还原。"_ 如果 git stash push 失败，请发出警告并退出。

bash
git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json

分支模式 (--branch <name>)。首先告知用户：_"正在与 <name> 进行对比 —— 正在切换至该分支以获取基准线，随后将恢复。您的工作区将被完全还原。"_

切换分支会触发重新构建，但不会触发浏览器刷新 —— 因为 CLI 每次都会打开一个新标签页，因此它始终读取当前的构建版本。使用 --wait-for "<selector>" 来确保在重新构建完成后才开始审计；否则，请警告用户缓慢的构建可能会导致基准线过时。

将分支值保存在下方的引号 branch 变量中；切勿将分支名称作为 shell 语法直接粘贴或执行。

bash
git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
branch="<branch>"
git check-ref-format --branch "$branch" >/dev/null
case "$branch" in -*) echo "Refusing option-like branch name: $branch" >&2; exit 1 ;; esac
git rev-parse --verify --quiet "$branch^{commit}" >/dev/null
git switch "$branch"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git switch - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]

将 --selector 和 --include-aaa 传递给两次运行。

2. 报告

code
Accessibility diff — http://localhost:3000/ vs main (94 rules, live DOM)
2 new · 1 fixed · 4 pre-existing hidden

New — Critical
  • color-contrast — 2.1:1 (needs 4.5:1), #bbb on #fff

    where: main > p.subtitle   fix: darken to #767676
Fixed
  • img-alt — <img src="old.jpg"> (no longer pr

每次新违规：位置（原样输出选择器 + 若有 source 则提供 file:line (symbol) —— 严禁捏造）、证据、修复方案（机械化修改或标记为 NEEDS HUMAN）。

不要直接编辑。关于修复：应用机械化修改后重新运行 accesslint:diff 进行验证；大批量工作请移交给 accesslint:audit。

3. 拆卸/清理

bash
npx -y @accesslint/chrome@latest stop --all  # 如果 ensure 报告 "managed":false 则可跳过

注意事项 (Gotchas)

  • ensure 始终决定端口 —— 绝不要硬编码 9222。
  • CLI 退出码 2 = URL 错误或页面从未加载；请检查开发服务器。
  • Stash 模式：sleep 2 可覆盖大多数 HMR（热更新）场景；如果基准线（baseline）与当前状态看起来一致，请添加 --wait-for "<selector>"。
  • Branch 模式：无 HMR —— CLI 每次运行都会打开一个新标签页。--wait-for 是重新构建的门控。
  • 运行期间剧烈的 DOM 变更会导致选择器偏移 —— 请使用 accesslint:scan 重新运行以获取完整视图。

局限性

  • 仅在任务明确符合上述范围时使用此技能。
  • 不要将输出结果视为特定环境验证、测试或专家评审的替代方案。
  • 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。