Radix Vue 中 Radio Group 焦点消失问题的技术分析

问题现象

在 Radix Vue 项目中，当用户使用 Radio Group 组件时，如果先通过鼠标点击选择选项，然后使用 Tab 键在表单中导航，会出现焦点消失的问题。具体表现为焦点跳转到包裹 Radio Group 的 div 元素（带有 role="radiogroup" 属性），而不是停留在某个选项上。

技术背景

Radio Group 是一种常见的表单控件，用于在多个互斥选项中进行选择。在 Web 可访问性（a11y）方面，Radio Group 需要满足 WCAG 标准，确保键盘导航和焦点管理符合预期行为。

Radix Vue 是基于 Vue 3 的 UI 组件库，旨在提供无障碍、可定制的 UI 原语。其 Radio Group 组件参考了 Radix UI 的实现，但在 Vue 环境下进行了适配。

问题根源

经过技术分析，发现问题出在 Roving Focus 机制的实现上。具体来说：

1. 当用户通过鼠标点击选择选项时，isClickFocus 状态被设置为 true
2. 随后用户使用 Tab 键导航时，焦点处理逻辑因为 isClickFocus 为 true 而被跳过
3. 最终 isClickFocus 被重置为 false，但焦点已经丢失

这种实现方式与原生 Radio Group 的行为不一致，也与其他流行 UI 库（如 React Spectrum）的实现有差异。

影响范围

该问题主要出现在基于 Chromium 的浏览器（Chrome、Edge、Brave）中，而在 Firefox 中表现正常。这表明问题可能与不同浏览器对焦点管理的实现差异有关。

解决方案建议

针对这个问题，可以考虑以下改进方向：

1. 优化焦点管理逻辑：重新设计 isClickFocus 的状态管理，确保在鼠标交互后键盘导航仍能正常工作
2. 参考原生实现：研究原生 HTML radio 组件的焦点行为，确保一致的用户体验
3. 跨浏览器测试：增加对不同浏览器焦点行为的测试覆盖，确保一致的行为

总结

Radio Group 的焦点管理是确保无障碍访问的关键功能。Radix Vue 团队需要仔细处理鼠标和键盘交互的协调问题，特别是在 Vue 响应式系统的上下文中。通过修复这个问题，可以提升组件的可用性和可访问性，使其更符合用户预期。

对于开发者而言，在使用 Radio Group 组件时，应当注意测试键盘导航行为，确保表单在所有浏览器中都能正常工作。同时，关注组件的更新，及时应用修复版本。