tabindex="0"使非原生可聚焦元素（如div、span）按HTML源码顺序自然加入Tab流，需配合role属性、键盘事件监听及:focus-visible样式；tabindex="-1"仅支持JavaScript编程聚焦，不可通过Tab键到达。
tabindex 不是用来“排号”的，设成 1、2 或 99 都是错的；真正该用的只有 0 和 -1，其余数值会破坏焦点流、误导屏幕阅读器、且在动态内容中极易失效。
tabindex="0" 是什么，什么时候必须加
它让一个默认不可聚焦的元素（比如 div、span）按 HTML 源码顺序自然加入 Tab 流。不是“开启聚焦”，而是“声明：我愿意遵守 DOM 顺序”。
- 原生可聚焦元素（
button、a[href]、input）**不需要**加tabindex="0"——它们默认就在流里，加了反而冗余 - 自定义控件（如
<div role="button">）**必须加** <code>tabindex="0"，否则键盘用户根本 Tab 不到 - 加了之后不会自动响应 Enter/Space，得手动监听
keydown并判断event.key === 'Enter'或event.key === ' '（注意空格是字符串空格） - 必须同步加
role属性（如role="button"），否则屏幕阅读器读不出语义 - CSS 中若重置了
outline，要补上:focus-visible或:focus样式，否则焦点不可见 - 模态框打开后，立即对第一个可操作项（如“确认”按钮）调用
element.focus()，前提是它有tabindex="-1"（否则非原生元素无法被.focus()成功聚焦） - Accordion 展开后，把焦点移到新暴露的首项，而不是留在触发按钮上
- 别给
button或a加tabindex="-1"——它们本就在 Tab 流里，加了等于主动踢出，除非你明确想临时屏蔽其键盘访问 -
focus({preventScroll: true})在 Safari 中不支持，传对象参数会静默失败；真实项目建议先检测：if ('preventScroll' in FocusOptions.prototype) - 元素若被
display: none或visibility: hidden隐藏，.focus()会失败，哪怕有tabindex="-1" - 多个
tabindex="1"元素中，只有第一个会被当作“最小正整数”，其余被忽略——不是并列第一，而是“只有一个第一” - DOM 结构变化（比如新增一个
tabindex="3"的元素）会打乱原有顺序，且无法预测影响范围 - 屏幕阅读器可能跳过中间缺失的数值（比如只有
tabindex="1"和tabindex="5"），造成导航断层 - Flex/Grid 布局下视觉顺序和 DOM 顺序不一致时，正整数 tabindex 会让焦点流和用户预期彻底脱节
- 原生表单控件（如
input）默认是tabindex=0，一旦混用正整数，它们会被挤到最后——用户 Tab 到一半突然跳到页脚输入框，体验崩坏 - 用开发者工具选中元素，在 Accessibility 面板看 “Focusable: true” 是否显示——如果不是，
tabindex再对也白搭 - 父级是否有
inert、aria-hidden="true"、pointer-events: none或overflow: hidden？这些都会阻断焦点传递 - 是否用了
opacity: 0或position: absolute; left: -9999px隐藏？这些不影响可聚焦性，得配tabindex="-1"或inert才真正排除 - 移动端 Safari 在用户首次触屏前，会忽略非原生元素的
.focus()调用——这不是 bug，是策略限制 - React/Vue 中条件渲染导致元素卸载重挂载，焦点状态无法保留；应优先用
hidden属性或 CSS 控制显隐，保持 DOM 存在
tabindex="-1" 不是隐藏开关，是编程聚焦入口
它让元素**无法被 Tab 键到达**，但可以通过 JS 调用 .focus() 主动把焦点给它。这不是“禁用”，而是“仅限程序控制”。
为什么正整数 tabindex（如 1、2、5）必须避免
浏览器确实会按正整数升序排列这些元素，但结果不可靠、不可维护、也不可访问。
立即学习“前端免费学习笔记（深入）”；
调试时焦点“消失”或“跳不过”，先查这几点
90% 的问题不是 tabindex 写错了，而是元素根本没进入可聚焦状态，或者焦点被中途拦截。
最复杂的点不在怎么写 tabindex，而在理解：焦点流是一条线性路径，不能跳跃、不能分叉、也不能靠“编号”强行插队；真正需要干预的，永远是状态变化时的 .focus() 调用时机和目标选择，而不是属性值本身。
