Zag UI Tree View组件焦点管理问题解析与解决方案

问题背景

在Zag UI框架的Tree View组件中，存在一个关于焦点管理的核心交互问题。当用户在树形视图内部导航后离开组件再返回时，焦点会意外跳转到之前选中的项目而非最后聚焦的项目，这违反了WAI-ARIA规范中关于树形视图的交互标准。

问题表现

该问题具体表现为两种异常行为：

1. 焦点位置错误恢复：用户在树形视图中从项目A导航到项目B后，离开组件再返回时，焦点会回到项目A而非最后交互的项目B。

2. 组件跳过问题：当用户折叠了包含选中项目的父节点后离开再返回，整个树形视图会被浏览器跳过，导致无法通过键盘访问。

技术分析

这个问题源于组件在失去焦点时错误地重置了焦点状态。根据WAI-ARIA规范，树形视图应当：

• 保持最后交互项目的焦点状态
• 在重新获得焦点时恢复到最后聚焦的项目
• 确保焦点不会因为项目可见性变化而丢失

Zag UI原有的实现方式是在组件失去焦点时清除了焦点状态，导致重新获得焦点时回到了选中的项目而非最后聚焦的项目。

解决方案

核心解决思路是修改焦点管理策略：

1. 移除不必要的blur处理：不再在组件失去焦点时清除焦点状态
2. 区分选中状态与焦点状态：保持两种状态的独立性
3. 持久化最后焦点位置：确保重新获得焦点时能正确定位

这种修改完全遵循了W3C提供的树形视图参考实现，确保了可访问性。

实现意义

这一修复对于用户体验至关重要，特别是：

• 键盘用户能够获得一致的导航体验
• 屏幕阅读器用户可以正确感知焦点位置
• 符合无障碍设计规范，避免可访问性问题

总结

Zag UI团队快速响应并修复了这个焦点管理问题，展示了框架对可访问性的重视。作为开发者，理解这类交互细节对于构建高质量的可访问组件至关重要。这次修复也提醒我们，在实现复杂交互组件时，严格遵循WAI-ARIA规范是避免类似问题的有效方法。