动态内容插入后焦点未自动落到新元素上是浏览器默认行为，需手动调用 focus() 并确保渲染完成、元素可见且处于用户手势上下文；弹窗关闭后应通过 data-trigger-id 安全校验并聚焦触发源；屏幕阅读器需 aria-live 区域主动播报；tab 导航需焦点陷阱而非粗暴拦截。
动态内容插入后焦点没落到新元素上
这不是 JS 报错，而是浏览器默认行为：DOM 插入不触发自动聚焦，autofocus 属性只在初始 HTML 解析时生效，JS 动态插入的 <input autofocus> 纯属摆设。
必须手动调用 focus()，但不能一插完就调——得等渲染完成、元素可见、未被禁用、且处于用户手势上下文。常见错误包括：
- 在
setTimeout(() => input.focus(), 0)里调用 → 渲染未必完成，尤其带 CSS 动画的弹窗 - 元素还在
opacity: 0或visibility: hidden状态下尝试聚焦 → 浏览器静默拒绝 - 在 AJAX 回调里调用 → iOS Safari 直接拦截，软键盘不弹
- 没判断
document.activeElement !== input→ 覆盖用户刚点过的其他输入框，体验断裂
弹窗关闭后焦点回不到触发源
Esc 关闭模态框后，焦点常落到 document.body 或消失，下一次 Tab 就断链。这不是“忘了存触发按钮”，而是存的方式不对。
推荐做法是把触发源 ID 写进弹窗 DOM，比如：modal.setAttribute('data-trigger-id', 'login-btn')；关闭前查这个属性再聚焦，而不是靠闭包或变量引用——后者极易因组件重渲染或 DOM 移除而失效。
调用前加一层安全校验：if (triggerEl && triggerEl.offsetParent !== null)，避免聚焦已销毁节点却无报错。
动态加载分页/列表后屏幕阅读器读不出更新
单纯替换 DOM 内容，屏幕阅读器不会感知变化。必须配合 aria-live 区域主动“喊话”。
示例：在分页容器外加一个隐藏的实时区域：
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>，每次加载新内容后，往里面写文本（如“已加载第2页，共12条结果”），屏幕阅读器会自动朗读。
注意：aria-live="polite" 不打断当前朗读，aria-atomic="true" 确保整段文本被完整读出，而不是只读变更部分。别用 innerHTML = '' 清空它——这会中断播报，改用 textContent = '' 更稳妥。
Tab 键在动态内容里乱跳或穿出去
弹窗或手风琴展开后，Tab 仍能一路跳到页面底部，说明没做焦点陷阱（focus trap）。但不能粗暴监听所有 keydown 拦 Tab——这会破坏 NVDA、VoiceOver 的内置导航逻辑。
正确做法是：
- 预先缓存弹窗内所有可聚焦元素：
const focusables = modal.querySelectorAll('button, input, select, [tabindex="0"]') - 监听弹窗容器的
keydown，仅当event.key === 'Tab'且当前聚焦的是第一个或最后一个元素时，才event.preventDefault() - 手动将焦点移到列表头或尾，保持循环逻辑
关键细节：别依赖 document.activeElement 判断当前焦点位置——它可能滞后或不准；用事件 target 或 focusin 事件更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
