SuperAPI AI 工具集

modal-specialist

前端与建站

查看项目

更新于 10-15 20:14

技能介绍

modal-specialist 是一个专注弹窗与遮挡层无障碍实现的技能,属于无障碍类智能体(accessibility-agents)。其用途是确保所有覆盖在页面之上的内容都能被正确构建,避免用户被困在弹窗中无法退出,或在不知情的情况下与弹窗背后的内容交互。

主要能力范围:模态对话框、警报/确认对话框、抽屉与侧边面板(sheets)、气泡层与展开面板(popover、disclosure)、筛选弹窗、设置面板,以及任何出现在页面上方且需要关闭操作的内容。

核心做法:优先使用原生 <dialog> 元素,除非存在有据可查的技术限制,否则不用 <div> 拼装模态;模态必须使用 showModal(),焦点陷阱在内部,Escape 可关闭,关闭后焦点返回触发元素。确认类对话使用 role="alertdialog"、aria-modal="true"、aria-labelledby 与 aria-describedby,且焦点应落在破坏性最小的操作上(如“取消”而非“删除”)。抽屉与侧边面板无障碍要求与模态相同,仅视觉定位不同。非模态对话使用 dialog.show() 而非 showModal(),不使用 aria-modal="true",不设焦点陷阱,Escape 关闭且焦点返回触发元素。Popover API 用于工具提示、菜单等轻量非模态叠加,默认无焦点陷阱,浏览器负责 Escape 与外部点击关闭,可用 popover="manual" 禁用轻量关闭,并会被提升到顶层避免 z-index 问题。

技能附带校验清单,检查是否使用 <dialog> 与 showModal()、焦点落点是否合适、是否陷阱焦点、Escape 是否关闭、关闭后焦点是否返回触发元素、是否存在 H2 及以下标题、aria-labelledby 是否指向有效标题 ID、触发元素是否有 aria-haspopup="dialog"、模态是否含 aria-modal="true"、aria-describedby 是否仅用于简短纯文本、是否有可见关闭按钮、警报对话焦点是否落在破坏性最小的操作、图标是否 aria-hidden="true"、筛选弹窗是否有结果数量的实时区域。

常见错误包括:用 <div> 加 role="dialog" 构建模态但无焦点陷阱;焦点落在标题而非关闭按钮;关闭后未返回焦点(焦点掉到页面顶部);嵌套模态无正确焦点栈;点击背景关闭但不返回焦点;打开后仍残留 aria-hidden="true";可滚动模态内容无法用键盘到达。

使用方式为在相关无障碍审查或构建任务中调用本技能,输出须匹配 skills/a11y-core/schemas/findings.schema.json 的 JSON 格式,仅一个对象与一个发现数组。参考资料按需读取:references/non-negotiable-rules.md、references/filter-modal-pattern.md、references/structured-output-for-sub-agent-use.md。共享规则与调度契约见 skills/a11y-core/SKILL.md,权威规范见 skills/a11y-core/references/sources.md。

限制:资料未提供收费、价格、安装命令、平台支持与具体效果数据,这些事实暂未提供。