tabindex="0" 仅使非原生可聚焦元素进入Tab流，但需配合role、keydown监听、focus样式等才能真正可用；错误使用（如加在原生控件上）或缺失关键属性会导致键盘操作失效。
tabindex="0" 能让 div、span、img、label 这类非原生可聚焦元素真正进入 Tab 键导航流——但只加这一个属性，90% 的情况会失效。
为什么加了 tabindex="0" 还不能用键盘操作？
它只解决“能不能获得焦点”，不解决“获得焦点后怎么响应”。常见现象包括：按 Enter 或 Space 没反应、屏幕阅读器读作“无名容器”、焦点框看不见、用户 Tab 进去却卡住不动。
- 没配
role属性：比如<div tabindex="0">删除</div>，辅助技术读成“段落”，得改成<div role="button" tabindex="0">删除</div> - 没监听
keydown：必须手动捕获Enter和Space，且对Space调用e.preventDefault()，否则页面会滚动 - CSS 移除了
outline却没补:focus-visible：焦点不可见，键盘用户根本不知道当前在哪
tabindex="0" 该加在哪些元素上才不白加？
只加在“本不该可聚焦、但业务逻辑又必须支持键盘进入”的容器上。不是所有视觉可点的元素都该加。
- ✅ 合理场景：
<div role="button">、<h3 role="tab">、自定义折叠面板标题、带 click 的label（如<label for="x" tabindex="0">） - ❌ 典型错误：给纯图标
<span class="icon-close"></span>加tabindex="0"，没role、没事件、没样式，等于多设一个“死焦点” - ? 绝对禁止：给
button、a[href]、input加tabindex="0"—— 它们默认就在 Tab 流里，加了可能干扰 React hydration 或 SSR 焦点同步
表格行 tr 加 tabindex="0" 的实操要点
tr 默认不可聚焦，加 tabindex="0" 是让它参与键盘导航的必要步骤，但仅此不够。
立即学习“前端免费学习笔记（深入）”；
- 必须用
tabindex="0"，别用1或-1：前者打乱全局顺序，后者不进 Tab 流 - 操作按钮要作为该行最后一个可聚焦子元素：推荐放在
td底部，用原生button，不要用div+role模拟 - 移动端 Safari 不支持
tr直接聚焦：需额外加一个隐藏的button（position: absolute; opacity: 0;），同样设tabindex="0"并绑定相同逻辑
为什么永远不要用 tabindex="1" 或其他正数？
它不会让你的元素变成“第一个被 Tab 到的”，只会把它塞进所有正数中排最小——而多个 tabindex="1" 仍按 DOM 顺序走，和没设一样。更糟的是，一旦混入 tabindex="0" 的链接或按钮，Tab 流变成“正数 → 0 值 → 其他”，完全失控。
真正需要控制顺序时，靠 DOM 位置调整比设正数靠谱；需要临时跳转时，用 tabindex="-1" + .focus() 更稳定。容易被忽略的是：动态渲染的内容（比如异步加载的表格行）若还没挂载就调 .focus()，会静默失败——得等 ref 真实存在再触发，且最好配合 element.scrollIntoView({ block: 'nearest' }) 防止焦点被遮挡。
