Popover API 原生弹出层交互与可访问性治理

概述原生 Popover API 提供了轻量的弹出层机制，通过 `popover` 属性与脚本控制（`showPopover()`/`hidePopover()`），可在不引入额外框架的情况下实现一致的交互与良好的可访问性。关键参数与概念- `popover="automanual"`: 自动或手动触发的弹出层模式。`HTMLElement.showPopover()/hidePopover()/togglePopover()`: 以脚本控制弹出层显示与隐藏。`anchor` 属性：结合 CSS Anchor Positioning，为弹出层指定锚点元素以实现精准定位。（不支持时降级为固定定位方案）可访问性：弹出层应可通过键盘与屏幕阅读器访问，管理焦点与 `aria-controls/aria-expanded` 状态。实践示例<button id="btn" aria-haspopup="true" aria-expanded="false">打开菜单</button> <div id="menu" popover="manual" anchor="btn" role="menu"> <button role="menuitem">动作1</button> <button role="menuitem">动作2</button> <button role="menuitem">关闭</button> <style> #menu { padding: 8px 12px; border: 1px solid #ddd; background: #fff; } </style> </div> <script> const btn = document.getElementById('btn') const menu = document.getElementById('menu') btn.addEventListener('click', () => { if (menu.matches(':popover-open')) { menu.hidePopover(); btn.setAttribute('aria-expanded', 'false') } else { menu.showPopover(); btn.setAttribute('aria-expanded', 'true') } }) menu.addEventListener('click', (e) => { if (e.target.matches('button:last-child')) menu.hidePopover() }) </script> 验证方法平台兼容：在支持 Popover 的 Chromium/Firefox Nightly 验证；不支持时提供回退（如对话框或绝对定位容器）。可访问性：检查焦点进入/退出、`aria-*` 状态与键盘操作（Esc 关闭、Tab 导航）。交互稳定性：快速打开/关闭不应导致布局抖动或滚动条跳动。注意事项明确触发条件与关闭策略（点击外部、Esc、菜单项交互）。与 Anchor Positioning 协作时，保证锚点命名与定位一致；不支持场景回退到固定坐标。避免在弹出层中绑定过多昂贵计算，保持交互轻量。