本文介绍通过合理设置 tabindex 属性与 DOM 顺序，使表格行（<tr>）获得焦点后，按 Tab 键可无缝聚焦到其动态显示的“操作菜单按钮”，避免焦点丢失导致菜单隐藏的问题。
本文介绍通过合理设置 `tabindex` 属性与 dom 顺序，使表格行（`
在构建可访问性良好的数据表格时，常需为每行提供上下文操作（如编辑、删除），这些操作按钮通常采用“悬停/聚焦显示”模式（例如通过 :hover 或 :focus-within 控制 display 或 opacity）。但默认情况下，<tr> 元素不可聚焦，当用户用键盘 Tab 导航至某一行时，若未显式赋予其可聚焦能力，浏览器不会将焦点停留于该行——导致 :focus 样式失效、关联菜单立即隐藏，且下一次 Tab 会跳转到页面中下一个可聚焦元素（而非预期的按钮），破坏导航流。
解决此问题的核心在于两点：让表格行本身可接收焦点，并确保操作按钮在 DOM 中紧随其后且具有更高 tabindex 优先级（或自然顺序）。
✅ 正确做法是：
- 为 <tr> 添加 tabindex="0"（推荐）或一个正整数（如 tabindex="1"）；
- 将操作按钮（如 <button class="actions-btn">⋯</button>）作为该行的最后一个子元素，并确保其本身具有可聚焦性（原生 <button> 默认可聚焦，无需额外 tabindex）；
- 避免使用 tabindex="-1"（仅支持程序化聚焦，不参与自然 Tab 流）或过大的正整数（易引发 tabIndex 乱序）。
以下是符合无障碍规范的结构示例：
<table>
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr tabindex="0">
<td>张三</td>
<td>前端工程师</td>
<td>技术部</td>
<td>
<button class="actions-btn" aria-label="操作张三">⋯</button>
</td>
</tr>
<tr tabindex="0">
<td>李四</td>
<td>产品经理</td>
<td>产品部</td>
<td>
<button class="actions-btn" aria-label="操作李四">⋯</button>
</td>
</tr>
</tbody>
</table>配套 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;
}⚠️ 注意事项：
- 不要为多个 <tr> 设置递增的正 tabindex（如 1, 2, 3），这会强制覆盖文档自然顺序，干扰屏幕阅读器和键盘用户的预期流；统一使用 tabindex="0" 即可，它使元素按 DOM 顺序加入 Tab 序列；
- 确保操作按钮有明确的 aria-label 或嵌套可见文本，满足 WCAG 4.1.2（名称-角色-值）要求；
- 若按钮需展开下拉菜单，请额外实现 Escape 键关闭、方向键导航等完整键盘交互，以满足 ARIA Authoring Practices 指南。
通过以上方式，用户 Tab 至某行 → 行获得焦点（菜单显示）→ 再次 Tab → 焦点自然移至该行内的操作按钮，形成连贯、可预测、符合无障碍标准的键盘导航体验。
