SuperAPI AI 工具集

autofocus-avoidance

前端与建站

查看项目

更新于 10-16 05:37

技能介绍

用途

该技能用于在代码审查或设计系统审查中,检查与“避免在表单字段上使用 autofocus”相关的已渲染 HTML、交互组件或设计系统模式。它关注的是无障碍(accessibility)问题,核心目标是防止页面加载时自动将焦点移动到表单字段,从而破坏屏幕阅读器用户的浏览上下文。

主要能力

  • 检查表单元素上是否存在 autofocus 属性。
  • 验证页面加载时焦点是否意外地从页面顶部移走,尤其是在表单之前存在内容的页面上。
  • 识别违反该规则的具体元素、角色、标签、焦点行为或键盘交互。
  • 说明如何通过浏览器无障碍工具或辅助技术验证修复效果。
  • 提供修复建议:移除表单元素上的 autofocus 属性;若需要焦点管理,改用 JavaScript 在用户交互后设置焦点,而不是在页面加载时自动聚焦。

使用方式

该技能以规则形式提供,包含快速参考、检查步骤、修复方法和解释说明。在代码审查时,审查已渲染的标记和交互状态,标记出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并记录如何用浏览器无障碍工具或辅助技术验证修复。完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/accessibility/autofocus-avoidance。

适用场景

  • 审查包含表单的页面,尤其是表单之前有内容的页面。
  • 审查交互组件和设计系统模式中的焦点管理。
  • 无障碍审计和代码审查流程。

限制与例外

  • 登录页和仅含搜索的页面属于例外,在这些页面上 autofocus 可能是可接受的。
  • 该技能本身不提供自动修复工具,需人工审查并修改代码。
  • 关于具体框架的实现细节,资料中仅指向 references/rule.md,未提供更多内容。