SuperAPI AI 工具集

focus-management

通用与其它

查看项目

更新于 10-16 05:43

技能介绍

用途:在审查已渲染 HTML、交互组件或设计系统模式时,检查动态交互过程中的焦点管理是否符合无障碍要求。

主要能力:围绕打开和关闭模态框、视图导航、动态更新内容等场景,提示应移动焦点、返回触发元素、保留用户位置,避免焦点落入意外位置。

必要用法:快速参考指出,模态框打开时将焦点移入,关闭时返回触发元素;SPA 导航或动态更新后聚焦新内容;可用 tabindex='-1' 使非交互元素可聚焦;不要让焦点丢失到意外位置。检查时确认打开关闭模态框、视图切换或动态更新内容时焦点得到正确管理。修复时使用 tabindex、focus() 以及模态对话框的焦点陷阱实现焦点管理。解释时说明焦点管理如何帮助键盘和屏幕阅读器用户有效导航动态界面。

代码审查:审查影响动态交互焦点管理的已渲染标记和交互状态,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何使用浏览器无障碍工具或辅助技术验证修复。

适用场景:适用于前端无障碍审查、设计系统组件检查、模态框和 SPA 导航的键盘可用性验证。

限制:资料未提供具体框架实现代码、完整示例或兼容性细节,需查看 references/rule.md 获取完整实现细节和框架特定指导。URL 为 https://www.skills.sh/thedaviddias/front-end-checklist/focus-management,规则页为 https://frontendchecklist.io/rules/accessibility/focus-management。