FluentUI Blazor评分组件键盘交互优化方案

背景分析

在FluentUI Blazor组件库中，Rating评分组件存在一个重要的无障碍访问缺陷：当启用重置功能(AllowReset=true)时，键盘用户无法通过任何按键操作来触发重置行为。这给依赖键盘操作的用户（特别是视障人士）带来了使用障碍。

技术现状

当前实现存在以下关键行为特征：

1. 组件值会随着Tab键聚焦或方向键导航自动改变，无需用户额外确认
2. 空格键和回车键在当前版本中不执行任何操作
3. 重置功能仅支持鼠标点击操作

问题根源

这种交互方式与Web标准控件存在差异：

• 传统单选按钮组(RadioGroup)通常需要显式确认（如按空格键）才会改变值
• 现有实现可能导致意外值变更，特别是在表单场景中

解决方案设计

经过技术评估，建议采用以下优化方案：

1. 键盘重置机制：

   • 当焦点位于已选评分项时，按空格键触发重置
   • 不采用回车键作为触发方式，避免与表单提交冲突

2. 交互流程优化：

   用户操作流：
   Tab聚焦 → 方向键导航 → 空格键重置 → Tab离开
   

3. 屏幕阅读器适配：

   • 保持当前"checked"状态朗读机制
   • 重置后应明确播报状态变更

实现考量

• 向后兼容性：不改变现有值变更的即时响应特性
• 焦点管理：重置后需保持焦点位置不变
• 表单集成：确保不会干扰常规表单操作流程

临时解决方案

在官方修复发布前，开发者可通过以下方式实现类似功能：

// 通过外部按钮重置评分值
<FluentButton @onclick="() => ratingValue = 0">重置评分</FluentButton>

最佳实践建议

1. 在关键表单中使用时，应提供明确的重置操作指引
2. 考虑为视障用户提供替代输入方案（如滑块控件）
3. 进行全面的键盘操作测试，确保交互符合WCAG标准

该优化方案在保持现有功能特性的同时，显著提升了组件的无障碍访问能力，特别有利于依赖键盘操作的特殊用户群体。