tabIndex="0"是原生可聚焦元素的默认行为，仅伪控件需显式添加并配role和keydown处理；tabIndex="-1"用于编程聚焦，非隐藏；禁用正整数tabIndex；移动端Safari需用户手势后focus。
tabIndex="0" 是默认可聚焦元素的“隐形开关”，不是必须显式写的
原生可聚焦元素（<button>、<input>、<a href>）天然具备 tabIndex="0" 行为，写上反而多余。在线运行工具里常见的“运行”按钮、“清空控制台”链接，直接用原生标签就行，别画蛇添足加 tabIndex="0"。
真正要加的是那些伪控件：比如用 <div role="button"> 实现的代码折叠按钮、自定义标签页头、或模拟下拉菜单的容器。这些必须配 tabIndex="0" 才能进 Tab 流——但仅此不够：
- 同步加
role="button"（或对应语义角色），否则屏幕阅读器读不出功能 - 监听
keydown，对Enter和Space都触发相同逻辑（Space要event.preventDefault()，否则页面会滚动） - 提供
:focus-visible样式，否则键盘用户看不到焦点在哪
tabIndex="-1" 不是隐藏元素，而是“预留编程聚焦入口”
在线运行工具里，模态框（如错误提示弹窗）、动态展开的代码输出面板、折叠后的 console 区域，它们的内容是按需渲染的。这类组件首次出现时，焦点不能留在触发按钮上，得跳到第一个可操作项——比如弹窗里的“复制错误”按钮或输出区首行代码。
这时就要用 tabIndex="-1"：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素（如弹窗关闭按钮、输出区第一行
<pre>）设tabIndex="-1" - 在组件挂载/显示后立即调用
.focus()，例如modalCloseBtn.focus() - 关闭时，把焦点切回触发源（可用
document.activeElement记录，或传参保存）
注意：tabIndex="-1" 不等于视觉隐藏。如果用 opacity: 0 或 position: absolute; left: -9999px 隐藏元素，它仍可能被 Tab 到，必须配合 inert 属性或显式移除 tabIndex。
绝对别用 tabIndex="1"、"2" 这类正整数
在线运行工具常有“跳过输入直接运行”、“切换语言”等快捷入口，有人想让它优先被 Tab 到，就设 tabIndex="1"。结果是：所有原生可聚焦元素（包括编辑器里的 <textarea>）全被挤到最后，用户按一次 Tab 就从页头跳到页脚，中间漏掉全部输入区。
正整数 tabindex 的实际行为是：
- 浏览器只看是否 > 0，不严格按数值排序；多个正数时取最小值者优先，其余无效
- DOM 顺序彻底失效，SSR 渲染时客户端和服务端
tabIndex值不一致会触发 hydration 警告 - 屏幕阅读器依赖 DOM 顺序理解上下文，强行插队会让视障用户迷失路径
真要“跳过”，用 tabIndex="-1" + JS 控制流转时机更可靠：比如在编辑器失焦后，自动聚焦到“运行”按钮，而不是靠正数硬塞。
移动端 Safari 的 focus() 限制必须提前处理
在线运行工具的用户大量使用 iPad 或 iPhone。Safari 在未触发用户手势前，对非原生可聚焦元素（如 <div tabIndex="0">）的 .focus() 调用会静默失败——模态框打开后焦点没过去，不是代码错，是平台策略。
解决方案只有两个：
- 确保首次交互由用户点击/触摸触发（哪怕只是点一下空白处），再执行后续
.focus() - 对关键入口（如“运行”按钮）坚持用原生
<button>，它不受此限制
调试时别只看桌面端，用真机连 Safari Web Inspector 检查 Focusable: true 是否生效——这是比写对属性更难也更常被忽略的一环。
