dialog打开后按钮自动高亮是showModal()的默认规范行为，即自动聚焦首个可聚焦元素；若需指定按钮聚焦，应在requestAnimationFrame中手动调用focus()确保DOM渲染完成。
dialog打开后按钮自动高亮，是浏览器在执行标准行为
这不是 bug，是 showModal() 的默认规范行为：只要弹窗内有可聚焦元素（比如 button、input），它就会在渲染完成后自动聚焦到第一个匹配项——于是 :focus 或 :focus-visible 样式自然生效。你看到的“高亮边框”，其实是焦点真正落到了那个按钮上。
常见错误现象：outline: none 被全局 CSS 重置、button:focus 没写或被覆盖、按钮本身 disabled 或 tabindex="-1" 导致不可聚焦，都会让高亮消失——但根源往往不是样式没写对，而是焦点根本没过去。
- 检查是否用了
outline: 0/outline: transparent—— 这等于主动移除焦点指示，不符合无障碍要求 - 确保按钮没有
disabled属性，且没被inert或aria-hidden="true"隔离 - 如果按钮是动态插入的（如 fetch 后渲染），
showModal()调用太早会导致查询不到，必须等 DOM 就绪再聚焦
如何让指定按钮获得焦点，而不是默认第一个
浏览器按顺序查找可聚焦元素：从上到下遍历 button、input、select、textarea、[tabindex]:not([tabindex="-1"])。想跳过默认逻辑，就得手动接管。
关键不是“阻止自动聚焦”，而是“在它发生后立刻重定向”——因为 showModal() 的聚焦是异步的，直接 .focus() 可能被覆盖。稳妥做法是用 requestAnimationFrame() 延迟一次渲染周期：
立即学习“前端免费学习笔记（深入）”；
dialog.showModal();
requestAnimationFrame(() => {
const targetBtn = dialog.querySelector('#confirm-btn');
if (targetBtn) targetBtn.focus();
});
- 不要用
setTimeout(..., 0)—— 它不保证 DOM 已绘制，尤其在 Safari 中容易失败 - 避免聚焦到
div[tabindex="0"]这类无语义容器；屏幕阅读器可能忽略，或触发无效:focus样式 - 如果目标按钮在 Shadow DOM 内，需用
shadowRoot.querySelector()，普通querySelector查不到
为什么:focus边框有时不显示，即使按钮确实获得了焦点
焦点存在 ≠ 视觉反馈可见。最常踩的坑是 CSS 层级或重置规则压制了 outline。
-
button:focus { outline: 2px solid #007bff; outline-offset: 2px; }必须显式声明，不能依赖浏览器默认 - 某些 UI 框架（如 Bootstrap）或 CSS Reset 会全局设
*:focus { outline: 0 }，需针对性覆盖 -
:focus-visible更合理（仅键盘用户触发），但 Safari 直到 16.4 才支持，旧版需 fallback 到:focus - 若按钮有
border且outline颜色与背景相近（如白色按钮+白色 outline），视觉上就“看不见高亮”
多个dialog共存时，如何避免焦点逻辑互相干扰
每个 dialog 实例必须独立管理自己的焦点陷阱，否则后打开的会覆盖前一个的监听器，导致 Tab 键行为错乱。
核心原则：监听器绑定到具体 dialog 元素，关闭前必须解绑。别用全局 document.addEventListener('focusin', ...)。
function setupFocusTrap(dialogEl) {
const focusableEls = Array.from(
dialogEl.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
);
if (!focusableEls.length) return;
<p>const first = focusableEls[0];
const last = focusableEls[focusableEls.length - 1];</p><p>const handleFocusIn = (e) => {
if (!focusableEls.includes(e.target)) {
first.focus();
} else if (e.target === last && !e.shiftKey) {
e.preventDefault();
first.focus();
} else if (e.target === first && e.shiftKey) {
e.preventDefault();
last.focus();
}
};</p><p>dialogEl.addEventListener('focusin', handleFocusIn);
// 记得在 close 前调用 dialogEl.removeEventListener('focusin', handleFocusIn)
}
- 别在
dialog上直接设tabindex="-1"当兜底——Safari 和部分读屏器对未渲染/空容器的聚焦支持极差 - 如果弹窗内容异步加载，收集
focusableEls必须在内容插入 DOM 后再执行，不能只在初始化时查一次 - 多个
dialog同时 open（极端情况）时，浏览器只允许一个处于 modal 状态，其余会被降级为普通元素——此时焦点逻辑必须感知状态变化
实际中最容易被忽略的一点：焦点管理不是“加个 focus() 就完事”，而是要贯穿整个生命周期——打开时聚焦、循环时拦截、关闭时归还。任何一个环节断掉，键盘用户就会卡在页面某处动不了。
