SuperAPI AI 工具集

frontend-component-modal-toast-system

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:构建无障碍的确认模态框、警告对话框、设置浮层,以及基于原生浏览器原语的 Toast 通知系统,不依赖自定义焦点陷阱库。

主要能力:模态框使用 <dialog> 元素配合 dialog.showModal(),自动实现焦点陷阱、文档其余部分 inert、Escape 关闭与顶层放置;Toast 使用 Popover API 的 popover="manual" 加 aria-live 区域。涵盖焦点恢复、滚动锁定、live-region 紧急度映射、Toast 队列管理与 @starting-style 动画模式。

必要用法:模态框始终用 <dialog> 与 showModal(),并在打开前记录触发元素、在 close 事件中恢复焦点;始终为 <dialog> 配 aria-labelledby 或 aria-label;确认式对话框用 dialog.close(value) 与 dialog.returnValue,配合 <form method="dialog">。Toast 状态、成功、信息类用 aria-live="polite",错误或警告用 assertive 或 role="alert";堆叠 Toast 用 popover="manual",避免 auto 的互斥替换;aria-live 区域须先于消息存在于 DOM。动画用 @starting-style 与 transition-behavior: allow-discrete。

适用场景:破坏性操作确认、登录流程、设置浮层、状态反馈、错误提示、带撤销的确认、周期性后台轮询通知。

限制:不涵盖 popover/dialog API 机制深入、ARIA 角色深入或自定义焦点陷阱库;关键且必须确认的消息应改用模态框而非 Toast;浏览器不支持时行为暂未提供。