MUI Base UI 中 Tablist 组件焦点同步问题解析

问题背景

在 MUI Base UI 的 Tablist 组件实现中，存在一个关于键盘焦点与选中状态同步的边界情况问题。当用户通过键盘操作聚焦到某个标签页后，如果通过外部控制方式改变了当前选中的标签页，会导致组件内部的活动项状态与实际的键盘焦点不同步。

问题现象

具体表现为：

1. 用户使用键盘导航（如方向键）聚焦到某个标签页
2. 应用通过受控方式更新当前选中的标签页
3. 此时组件内部的活动项状态会更新为新选中的标签页
4. 但键盘焦点仍保留在原标签页上
5. 导致后续键盘操作出现不符合预期的行为

技术原理分析

这个问题本质上源于复合组件(Composite Widget)中活动项状态管理的不足。在 WAI-ARIA 规范中，标签页组件需要同时处理两种状态：

1. 焦点状态：表示当前获得键盘焦点的元素
2. 选中状态：表示当前激活的内容面板对应的标签页

理想情况下，当选中状态通过程序控制改变时，应该同步更新焦点状态以保持一致性。MUI Base UI 当前实现中缺少这种同步机制。

解决方案

参考 WordPress 组件的实现方式，正确的处理逻辑应该包括：

1. 在受控更新选中状态时，检查当前是否存在键盘焦点
2. 如果存在焦点元素，将内部活动项状态同步到焦点元素
3. 确保后续键盘操作基于最新的焦点状态

这种处理方式符合 WAI-ARIA 的预期行为，能够提供更一致的无障碍体验。

影响范围

该问题主要影响：

• 使用键盘导航的用户
• 动态更新标签页选中状态的场景
• 需要严格遵循无障碍标准的应用

修复状态

MUI 团队已经确认该问题并在最新版本中修复。开发者可以通过更新到最新版本来解决这个问题。对于暂时无法升级的项目，可以参考 WordPress 的实现方式添加类似的同步逻辑。

最佳实践建议

在使用标签页组件时，建议开发者：

1. 始终考虑键盘用户的体验
2. 在动态更新选中状态后，检查焦点状态是否一致
3. 进行充分的无障碍测试，确保键盘操作符合预期
4. 关注组件库的更新，及时获取最新的无障碍改进

这个问题提醒我们在开发交互式组件时，需要特别注意程序控制更新和用户交互之间的状态同步，这是实现良好无障碍体验的关键所在。