Elastic EUI 项目中 SearchBar 组件的无障碍优化实践

背景概述

在 Elastic EUI 项目中的 SearchBar 组件里，存在一个关于过滤器交互的无障碍访问问题。当用户通过屏幕阅读器操作过滤器时，当前实现无法有效告知用户即将发生的上下文变化，这违反了 WCAG 3.2.2 准则。

问题分析

SearchBar 组件中的过滤器表现为可交互按钮，例如标记为"Level"的过滤器。当前实现存在以下技术缺陷：

1. 语义信息不足：屏幕阅读器仅朗读"Button Level"，缺乏对交互后行为的描述
2. 上下文变化未预告：激活按钮会打开对话框并转移焦点，但用户无法预知这一行为
3. 一致性缺失：同组件中其他类似元素（如日期选择器）已有更好的实现模式

WCAG 3.2.2 准则解读

该准则要求当用户界面组件的设置改变时，若会导致上下文变化，必须提前告知用户。上下文变化包括但不限于：

• 焦点转移
• 新内容层出现
• 视图切换
• 表单提交

在 SearchBar 过滤器场景中，点击按钮会打开弹出对话框并转移焦点，属于典型的上下文变化场景。

技术解决方案

方案设计

1. ARIA 属性增强：

   • 为按钮添加 aria-haspopup="dialog" 属性
   • 使用 aria-expanded 动态指示展开状态

2. 标签文本优化：

   • 将按钮文本从"Level"改为"Level Select"
   • 确保屏幕阅读器朗读为"Level Select Button"

3. 键盘交互优化：

   • 确保对话框可通过 Esc 键关闭
   • 实现合理的焦点管理

实现示例

<EuiFilterButton
  iconType="arrowDown"
  onClick={togglePopover}
  aria-haspopup="dialog"
  aria-expanded={isPopoverOpen}
>
  Level Select
</EuiFilterButton>

开发注意事项

1. 国际化支持：确保翻译后的文本仍保持语义完整性
2. 状态同步：实时更新 aria-expanded 属性反映组件状态
3. 测试验证：
   • 屏幕阅读器实际朗读效果测试
   • 键盘导航流程测试
   • 焦点管理测试

最佳实践扩展

对于类似的可交互组件，建议采用以下通用模式：

1. 行为指示：在标签中包含动作动词（如"Select"、"Open"等）
2. 状态反馈：使用 ARIA 属性明确指示组件状态
3. 上下文预告：对会产生重大变化的操作提供明确警告

总结

通过本次优化，Elastic EUI 的 SearchBar 组件不仅解决了特定的无障碍问题，更建立了一套可复用的交互模式。这种改进既符合 WCAG 标准，也提升了所有用户的使用体验，体现了"设计为所有人"的前端开发理念。