#6329·astryx

[Markdown] 任务列表的复选框具有通用可访问名称"复选框"

作者: yosefadi创建于 2026年9月15日更新于 2026年9月15日

描述错误 Markdown 通过 CheckboxList/CheckboxListItem 渲染任务列表,但每个复选框的可访问名称都是通用字符串"复选框",而不是项的文本。 重现(0.5.2, 0.6.1 相同):

typescript
import { Markdown } from "@astryxdesign/core/Markdown";

<Markdown>{"- [ ] first task\n- [x] second task"}</Markdown>

检查两个 input[type="checkbox"] 元素。每个元素都有一个关联的 <label>,其文本是"复选框"(默认值为t('@astryx.checkboxList.item.checkbox')) ,而不是"first task" /"second task"。屏幕阅读器两次宣布"复选框,未勾选"。CheckboxListItem 已经文档说明,丰富的 label 需要 aria-label:

一个字符串 label 会自动命名复选框。一个丰富的(ReactNode) label 不能这样做,因此需要通过标准的 aria-label 传递简洁的字符串等价值 - 否则复选框将回退到通用名称"复选框",并且列表中的每个富格式标签项都会以相同方式向屏幕阅读器宣布。 Markdown 在构建富格式标签(内联 Markdown) 时没有传递 aria-label,因此它总是触发回退。 预期: 每个复选框的可访问名称等于项的文本(例如"first task"),从项的 Markdown 中作为纯文本导出,而可见标签保留了丰富的格式(粗体/链接)。 建议的修复:packages/core/src/Markdown/Markdown.tsx 的列表渲染中,在 label 是 ReactNode 时,将 aria-label={plainText(itemText)} 传递给 CheckboxListItemCheckboxListItem 中的开发警告已经标记了此模式 - 修复大约为 5 行,没有视觉上的变化。 上下文: 在构建消费者应用程序中的读路径工作绕过时发现的。应用程序现在通过将任务块分割并自己设置 aria-label 来在本地解决此问题,但更好地将其上游修复。我很乐意开发一个 PR(仅限于 aria-label - 混合列表渲染是一个单独的问题)。

内容来源: facebook/astryx