本文介绍通过合理设置 tabindex 属性与 DOM 顺序，使表格行（）获得焦点后，按 Tab 键可无缝聚焦到其动态显示的“操作菜单按钮”，避免焦点丢失导致菜单隐藏的问题。

本文介绍通过合理设置 `tabindex` 属性与 dom 顺序，使表格行（`

`）获得焦点后，按 tab 键可无缝聚焦到其动态显示的“操作菜单按钮”，避免焦点丢失导致菜单隐藏的问题。

在构建可访问性良好的数据表格时，常需为每行提供上下文操作（如编辑、删除），这些操作按钮通常采用“悬停/聚焦显示”模式（例如通过 :hover 或 :focus-within 控制 display 或 opacity）。但默认情况下，

元素不可聚焦，当用户用键盘 Tab 导航至某一行时，若未显式赋予其可聚焦能力，浏览器不会将焦点停留于该行——导致 :focus 样式失效、关联菜单立即隐藏，且下一次 Tab 会跳转到页面中下一个可聚焦元素（而非预期的按钮），破坏导航流。

解决此问题的核心在于两点：让表格行本身可接收焦点，并确保操作按钮在 DOM 中紧随其后且具有更高 tabindex 优先级（或自然顺序）。

✅ 正确做法是：

• 为 添加 tabindex="0"（推荐）或一个正整数（如 tabindex="1"）；
• 将操作按钮（如 ⋯）作为该行的最后一个子元素，并确保其本身具有可聚焦性（原生 默认可聚焦，无需额外 tabindex）；
• 避免使用 tabindex="-1"（仅支持程序化聚焦，不参与自然 Tab 流）或过大的正整数（易引发 tabIndex 乱序）。

以下是符合无障碍规范的结构示例：

姓名	职位	部门	操作
张三	前端工程师	技术部	⋯
李四	产品经理	产品部	⋯

配套 CSS 建议使用 :focus-within 实现菜单显示逻辑（比单纯 :focus 更健壮）：

.actions-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

tr:focus-within .actions-btn,
tr:hover .actions-btn {
  opacity: 1;
  visibility: visible;
}

⚠️ 注意事项：

• 不要为多个 设置递增的正 tabindex（如 1, 2, 3），这会强制覆盖文档自然顺序，干扰屏幕阅读器和键盘用户的预期流；统一使用 tabindex="0" 即可，它使元素按 DOM 顺序加入 Tab 序列；
• 确保操作按钮有明确的 aria-label 或嵌套可见文本，满足 WCAG 4.1.2（名称-角色-值）要求；
• 若按钮需展开下拉菜单，请额外实现 Escape 键关闭、方向键导航等完整键盘交互，以满足 ARIA Authoring Practices 指南。

通过以上方式，用户 Tab 至某行 → 行获得焦点（菜单显示）→ 再次 Tab → 焦点自然移至该行内的操作按钮，形成连贯、可预测、符合无障碍标准的键盘导航体验。