React项目中Tab键无法触发onKeyDown事件的原因咨询

问题场景 #

React项目里的<CalendarDay>组件中，<td>元素绑定了onKeyDown事件，按下Enter、方向键等按键都能正常触发，但按下Tab键时，仅会切换页面焦点到下一个元素，完全不会调用onKeyDown方法。

核心原因 #

• 浏览器Tab键的默认优先级：Tab键的原生功能是在页面可聚焦元素间切换焦点，浏览器会优先执行这个默认行为。当Tab键按下时，浏览器直接将焦点从当前元素移走，导致原元素无法捕获到后续的keydown事件。
• td元素的可聚焦性缺陷：原生<td>属于非交互元素，默认不具备可聚焦能力。虽然给它设置了role="link"，但这只是语义上的标记，不能从根本上让它成为可聚焦元素。没有焦点的元素无法捕获键盘事件，包括Tab键的触发。另外jsx-a11y的警告也提示了这种用法的不合理性，可能进一步干扰浏览器的事件处理逻辑。
• blur操作导致元素失焦：代码中onMouseUp事件里的e.currentTarget.blur()会在鼠标点击后强制让元素失焦。如果元素处于失焦状态，自然无法响应任何键盘事件，包括Tab键。

可行的解决方向 #

• 让元素稳定获得焦点：给<td>添加tabindex="0"属性，明确将其设置为可聚焦元素。更规范的做法是替换<td>为<button>元素，按钮是原生支持聚焦和键盘事件的交互元素，符合无障碍设计规范，也能避免非交互元素用交互role的问题。
• 按需阻止Tab默认行为：如果需要在元素上处理Tab键的自定义逻辑，可以在onKeyDown中判断key === 'Tab'时，调用e.preventDefault()阻止浏览器的默认焦点切换，这样就能执行自定义的Tab键处理逻辑。注意这种操作会改变Tab键的原生行为，需要评估对无障碍体验的影响。
• 移除不必要的blur操作：如果onMouseUp中的blur不是业务必须的逻辑，建议移除，避免元素意外失焦导致无法捕获键盘事件。

内容的提问来源于stack exchange，提问作者Zayidu Ansari