WordPress Gutenberg 组件中字体大小选择器的无障碍交互问题分析

问题背景

在WordPress的Gutenberg编辑器组件库中，字体大小选择器(Font size picker)存在一个值得关注的无障碍交互问题。当字体预设超过5个时，组件会呈现为下拉选择框(CustomSelectControl)而非按钮组(ToggleGroup)，其中最后一个选项是"自定义(Custom)"选项。

问题现象

这个"自定义"选项实际上并非一个简单的选择项，而是一个会触发界面切换的交互控制。当用户使用键盘操作时：

1. 通过上下箭头键在下拉选项中导航
2. 当选中"自定义"选项时
3. 整个UI会突然切换到单位输入框(UnitControl)加范围滑块(RangeControl)的组合形式
4. 焦点在此过程中丢失

这种设计违反了WCAG的无障碍准则，特别是关于"意外上下文变化"的规定。

技术分析

设计缺陷

1. 语义不匹配：下拉选择框(Listbox)的预期是包含可选值，而不应包含会触发界面变化的交互控制
2. 键盘交互问题：在下拉框未展开状态下通过箭头键切换选项时，到达最后一个选项会触发不可预期的界面切换
3. 焦点管理缺失：界面切换后没有妥善处理焦点位置，导致焦点丢失

潜在解决方案

1. 移除下拉框中的自定义选项：

   • 避免在下拉框中放置非标准交互元素
   • 消除意外的界面切换风险
   • 简化组件逻辑

2. 改进切换机制：

   • 保持"设置自定义大小"的切换按钮独立
   • 确保按钮状态通过aria-pressed属性明确指示
   • 避免动态改变按钮标签带来的混淆

最佳实践建议

1. 保持组件功能单一性：选择控件应专注于选择操作，避免混合其他交互模式
2. 确保可预测性：任何可能改变界面的操作都应明确提示用户
3. 完善焦点管理：界面变化时必须妥善处理焦点位置
4. 标签一致性：避免动态改变控件标签，保持稳定的用户体验

总结

这个案例展示了在复杂UI组件设计中常见的无障碍陷阱。开发者在设计多功能控件时，需要特别注意不同交互方式(鼠标/键盘)下的行为一致性，以及组件语义的准确性。通过简化组件结构、分离不同功能模块，可以显著提升组件的可访问性和用户体验。