Sample observation selector in evaluator testing uses checkboxes for a mutually exclusive selection

该问题发生在 Langfuse 评估器(Evaluator)设置页的“用样本观测值测试”面板中,选择器用复选框呈现单选行为,语义错误且误导辅助技术用户。优先修复方向是将复选框替换为单选按钮,官方已在 Cloud 版本修复,并将在下一个开源版本中发布。

快速结论:该问题发生在 Langfuse 评估器(Evaluator)设置页的“用样本观测值测试”面板中,选择器用复选框呈现单选行为,语义错误且误导辅助技术用户。优先修复方向是将复选框替换为单选按钮,官方已在 Cloud 版本修复,并将在下一个开源版本中发布。

适用环境:Langfuse 评估器 v2 功能模块(features/evals/v2),涉及共享组件 SampleObservationSelectorBase 与 EvaluatorSampleObservationSelector。

最快修复方案:暂无用户侧可执行的一步修复方案。该问题需代码层面修复,官方已通过 PR #17098 为共享组件新增 opt-in 的 selectionControl=”radio” 模式(默认仍为 checkbox 以兼容其他调用方),并已部署至 Langfuse Cloud。

注意事项:自托管用户需等待下一个开源版本发布才能获得修复。RadioGroup 的语义仅限定在控件范围内,而非包裹整个表格,以避免影响表格其他交互的无障碍分组。

问题场景

在 Langfuse 评估器配置界面的 “Test with sample observations” 面板中,用户需要从观测列表中选择一条样本进行测试。表格首列每行渲染一个 Checkbox 组件,但实际交互为单选——勾选新行会自动取消上一行的选中状态。

报错原文

Sample observation selector in evaluator testing uses checkboxes for a mutually exclusive selection

原因分析

可能原因:设计系统 Checkbox 组件并非纯视觉元素,其内部封装了 @radix-ui/react-checkbox,每行通过 role="checkbox"aria-checked 暴露给辅助技术。当选择逻辑是互斥单选(选中一行自动取消另一行)时,复选框语义会让屏幕阅读器用户误以为各行可独立多选。触发选择时并不支持取消操作(点击已选中行不会清除),同时存在匹配项时会自动默认选中首行,因此实际状态始终“恰好选中一项”,不存在复选框优于单选框的 0..1 场景。

环境排查

  • 确认 Langfuse 版本:检查是否为最新 Cloud 版本;自托管用户需确认当前版本是否已包含下一个开源发布。
  • 涉及组件:确认共享组件 SampleObservationSelectorBase 与 EvaluatorSampleObservationSelector 的实现位置。
  • 前端技术栈:项目基于 Radix UI 组件体系,存在 RadioGroup / RadioGroupItem 现成组件。

解决步骤

  1. 将共享组件 SampleObservationSelectorBase 中的 Checkbox 替换为单选控件,建议使用 Radix 的 RadioGroup / RadioGroupItem 组件。
  2. 为共享组件新增 opt-in 的 selectionControl="radio" 模式,默认保持 checkbox 以免影响其他调用方。
  3. 在 EvaluatorSampleObservationSelector 中启用该 radio 模式。
  4. 若采用 Radix RadioGroup,需将表格包裹在 RadioGroup.Root 上下文中。
  5. 注意保持 radio 语义限定在控件范围内,避免包装整个表格导致辅助技术将无关表格交互错误分组。

验证方法

在评估器配置界面的 “Test with sample observations” 面板中,确认首列呈现的控件为单选按钮样式,选中一行不会同时呈现多选状态;使用屏幕阅读器确认每行暴露的角色为 radio 而非 checkbox;同时确认表格其余交互(展开行、查看详情等快捷键操作)与修复前保持一致,未受干扰。

参考来源

langfuse/langfuse #17055

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 22259

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注