Popover API 可访问性与交互治理实践

Popover API 可访问性与交互治理实践概述Popover API 通过声明式 `popover` 与相关属性提供非模态浮层的统一能力，简化焦点、关闭行为与可访问性。2025 年现代浏览器已普遍支持（Chromium 114+ 起，Safari/Firefox 已覆盖核心能力）。关键参数/概念（已验证）- `popover="automanualhint"`：控制显示与关闭策略；`auto` 支持轻点关闭（light dismiss）。控制属性：`popoverTargetElement`/`popoverTargetAction` 用于声明式触发。JS 能力：`HTMLElement.popover` 属性用于检测与切换状态。实践/示例<button id="info" popovertarget="card" popovertargetaction="toggle">详情</button> <div id="card" popover="auto" tabindex="-1" role="dialog" aria-label="产品详情"> <h3>产品 A</h3> <p>最新库存与折扣信息。</p> <button popovertarget="card" popovertargetaction="hide">关闭</button> </div> 可访问性要点：为非模态浮层提供 `role` 与 `aria-*`，并控制初始焦点与关闭后焦点回退。验证方法支持性：在 Chrome 120+/Safari 17+/Firefox 122+ 检查 `HTMLElement.popover` 是否存在。行为一致性：测试 light dismiss、嵌套 popover 与键盘导航（Tab/Shift+Tab/Escape）。RUM 采集：统计触达与关闭事件，验证交互稳定性。注意事项非模态场景使用 Popover；模态场景请使用 `<dialog>`，避免可访问性混淆。控制焦点环路，避免与页面其他可聚焦元素产生逃逸路径。多个 `auto` popover 同时开启会被内核限制，按需改用 `manual`。参考资料MDN：Popover API、HTML popover 属性Chrome Blog：Introducing the Popover API