Zag.js 中受控弹出框的焦点管理问题解析

问题背景

在 Zag.js 0.65.0 版本中，开发者发现了一个关于受控弹出框(Popover)的焦点管理问题。当使用键盘操作弹出框时，如果通过 ESC 键关闭弹出框，焦点不会如预期那样返回到触发元素上。这对于键盘用户的可访问性体验造成了影响。

问题复现步骤

1. 使用 Tab 键导航到弹出框的触发元素
2. 通过键盘(如回车或空格键)激活弹出框
3. 按下 ESC 键关闭弹出框
4. 观察焦点位置 - 此时焦点没有回到触发元素上

技术分析

这个问题的核心在于受控弹出框的焦点恢复机制。在无障碍设计中，弹出框关闭后恢复焦点到触发元素是一个重要原则，这确保了键盘用户的导航连续性。

在 Zag.js 的实现中，当弹出框处于受控模式时，关闭逻辑可能没有正确处理焦点恢复的步骤。特别是在通过键盘命令(如 ESC)关闭时，焦点管理逻辑出现了遗漏。

解决方案

项目维护者已经确认了这个问题，并推送了修复代码。新版本将会包含以下改进：

1. 确保受控模式下弹出框关闭时正确执行焦点恢复
2. 统一键盘和鼠标操作的焦点管理行为
3. 保持与无障碍标准的一致性

开发者建议

对于正在使用 Zag.js 弹出框组件的开发者，建议：

1. 升级到包含修复的新版本
2. 测试键盘导航场景下的焦点行为
3. 如果问题仍然存在，可以提供更多上下文信息帮助进一步排查

总结

焦点管理是构建无障碍 Web 应用的关键环节。Zag.js 团队快速响应并修复了这个受控弹出框的焦点问题，体现了对无障碍体验的重视。开发者在使用类似交互组件时，应当特别关注键盘操作场景下的行为是否符合预期。