Floating-UI 模态框焦点管理问题解析与解决方案

问题背景

在使用Floating-UI构建向导式流程时，开发者发现当模态框中的当前聚焦元素被从DOM中移除时，焦点会意外地跳转到页面body元素上，而不是保持在模态框内部。这是一个典型的无障碍访问问题，会影响屏幕阅读器用户的体验。

问题现象

当用户在一个模态框中执行操作导致当前聚焦元素被移除时（例如点击确认按钮后切换到下一个向导步骤），焦点管理出现了异常行为：

1. 屏幕阅读器无法正确识别新的模态框内容
2. 焦点意外转移到body元素
3. 用户无法通过键盘继续与模态框交互

技术原理分析

Floating-UI的FloatingFocusManager组件负责管理模态框内的焦点行为。理想情况下，当模态框内的元素被移除时，组件应该：

1. 检测到焦点丢失事件
2. 自动将焦点重新定位到模态框容器或下一个可聚焦元素
3. 保持焦点被正确约束在模态框内部

解决方案

目前开发者可以通过以下两种方式解决这个问题：

临时解决方案（Workaround）

在元素被移除时，手动将焦点设置回模态框容器：

useEffect(() => {
  // 手动将焦点设置回模态框
  dialogRef.current?.focus();
}, [dialogRef]);

长期建议

1. 检查FloatingFocusManager的配置选项，确保正确处理焦点丢失情况
2. 考虑在元素移除前预先设置下一个焦点目标
3. 在复杂场景中实现自定义的焦点管理逻辑

最佳实践建议

1. 在构建向导式流程时，预先规划焦点转移路径
2. 对每个模态框状态变化进行焦点管理测试
3. 结合屏幕阅读器进行无障碍测试
4. 考虑使用React的useEffect依赖项来监控焦点状态变化

总结

Floating-UI作为现代UI工具库，在大多数情况下提供了优秀的焦点管理能力。但在某些动态内容变化的场景中，开发者需要特别注意焦点管理问题。通过理解底层原理并实施适当的解决方案，可以确保应用的无障碍访问性和用户体验的一致性。