[Markdown] 任务列表的复选框具有通用可访问名称"复选框"
描述错误 Markdown 通过 CheckboxList/CheckboxListItem 渲染任务列表,但每个复选框的可访问名称都是通用字符串"复选框",而不是项的文本。 重现(0.5.2, 0.6.1 相同):
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)}传递给CheckboxListItem。CheckboxListItem中的开发警告已经标记了此模式 - 修复大约为 5 行,没有视觉上的变化。 上下文: 在构建消费者应用程序中的读路径工作绕过时发现的。应用程序现在通过将任务块分割并自己设置aria-label来在本地解决此问题,但更好地将其上游修复。我很乐意开发一个 PR(仅限于aria-label- 混合列表渲染是一个单独的问题)。
内容来源: facebook/astryx