FloatingUI模态对话框中的焦点管理问题解析

问题现象

在使用FloatingUI创建抽屉式组件(Drawer)时，开发者遇到了一个关于焦点管理的警告提示。当用户点击"显示"按钮打开抽屉后，控制台会显示"aria-hidden on descendant retained focus"的警告信息。

问题本质

这个警告表明了一个重要的无障碍访问问题：虽然抽屉组件通过aria-hidden属性标记为隐藏状态，但某些子元素仍然保持着焦点。这种情况通常发生在模态对话框或抽屉组件中，当组件处于打开状态时，理论上应该阻止焦点逃逸到组件外部。

技术背景

FloatingUI是一个用于构建浮动UI元素（如工具提示、弹出框、模态框等）的JavaScript库。它提供了FloatingFocusManager组件来管理焦点，确保在模态状态下焦点被正确地限制在浮动元素内部。

解决方案

1. 使用FloatingOverlay组件：这是一个专门设计的覆盖层，可以阻止与底层元素的交互，实现真正的模态效果。

2. 调整FloatingFocusManager的modal属性：对于没有明确关闭按钮的抽屉组件，将modal属性设置为false可能是更好的选择。

3. 启用outsideElementsInert属性：在FloatingFocusManager中使用这个属性可以有效地使外部元素变为不可交互状态，从而解决焦点逃逸问题。

最佳实践建议

1. 对于全屏模态对话框，建议组合使用FloatingOverlay和FloatingFocusManager。

2. 对于简单的抽屉组件，考虑使用outsideElementsInert属性来简化实现。

3. 始终进行无障碍测试，确保焦点管理符合WCAG标准。

4. 注意动画过渡期间可能出现的焦点状态问题，必要时添加适当的延迟处理。

总结

FloatingUI提供了强大的工具来管理浮动元素的焦点行为，但需要开发者根据具体场景选择合适的配置。理解这些配置选项的工作原理，可以帮助开发者构建既美观又符合无障碍标准的用户界面。