[fields/components] 全屏长文本对话框里的编辑控件没有可访问名(三个渲染面一致):inline 面读到「F」,对话框面读到空 #4832

做 #4824 的测量任务时实测发现,按 Prime Directive #10 立单(不认领、不扩围到 #4824)。与 #4824 相邻但不同:#4824 是对话框里的校验状态与错误文案,本条是对话框里那个控件的可访问名。

实测

真表单渲染器 + 注册 widget,字段 label: 'F'、mobile_fullscreen: true,点开展开按钮后同时读 inline 面与对话框面(happy-dom + jest-dom 7.0.0 的 accname 计算):

INLINE  richtext(field:markdown)   accName= F      accDescription= F is required
DIALOG  richtext(field:markdown)   accName=        accDescription=
INLINE  textarea(field:textarea)   accName= F      accDescription= F is required
DIALOG  textarea(field:textarea)   accName=        accDescription=
INLINE  builtin textarea           accName= F      accDescription= F is required
DIALOG  builtin textarea           accName=        accDescription=

三个渲染面完全一致:对话框里的编辑控件可访问名为空。

机理

对话框里的那份编辑控件是从零构造的,宿主的 id / aria-describedby 都不给它(这是三处都写了注释的、有理由的取舍 —— 宿主 id 唯一、宿主 describedby 指向模态外被 Radix aria-hidden 的节点):

• packages/fields/src/widgets/TextAreaField.tsx 对话框分支的 textarea
• packages/fields/src/widgets/RichTextField.tsx 对话框分支的 RichTextEditorSurface(其 domProps 注释明说只给 inline 面)
• packages/components/src/renderers/form/form.tsx 内置 FullscreenTextarea 的对话框 textarea

于是可见 label 的 for 指向 inline 面那个控件,对话框里的控件既没有 for 关联、也没有 aria-label / aria-labelledby。

这算不算缺陷:两面都说清楚

减轻的一面:对话框本身是有名字的 —— #3393 已经把字段 label 接进 DialogTitle,Radix 用它给 DialogContent 发 aria-labelledby。读屏进入对话框时会播报「F,对话框」。

仍然是缺口的一面:进入对话框之后,焦点落到那个 textarea 上,播报的是「编辑框,空」——没有字段名。按控件导航(表单元素列表、快捷键在控件间跳)时同样拿不到名字。同一个字段的 inline 面读得到「F」,对话框面读不到,这正是 #3417 / #4824 反复出现的那条分叉:同一件事在两个编辑面上不一致,而对话框面是移动端的主力路径。

形状问题(不自行裁定)

至少两种,改动面不同,且与 #4824 的裁决相互影响(同一批控件、同一处代码):

• A. aria-label={label} —— 三个落点各一行,最小。代价是名字来源多了一个作者,与「可见 label 是唯一命名通道」的纪律(fix(fields,components): 复合/分组 field widget 的组标签改用 IDREF 关联(#3961) #3978)相左。
• B. aria-labelledby 指向 DialogTitle 的 id —— 复用已有的可见文本,不新造名字。代价是那个 id 由 Radix 内部生成,拿到它需要 FullscreenEditor 把它交出来(render prop 多一个参数或换个形状),而「宿主必须记得用」正是 [fields] 非 group-labelled widget 的只读替换显示丢掉 host 下发的整份 plumbing —— label 的 for 悬空、description 零消费者(email / url / phone 实测) #4788 反复点名的那类易漏契约。
• C. 由 FullscreenEditor 一处负责 —— 与 [fields] 全屏长文本对话框不播报校验失败：richtext 的对话框编辑面恒 aria-invalid="false"(字段实为 invalid),textarea 的干脆没有该属性,两者都不指向错误信息 #4824 的「host 一处 vs 两 widget 各自」是同一个决策点,建议与 [fields] 全屏长文本对话框不播报校验失败：richtext 的对话框编辑面恒 aria-invalid="false"(字段实为 invalid),textarea 的干脆没有该属性,两者都不指向错误信息 #4824 一起裁,别让两次改动在同一段 JSX 上各走各的。

可达性

不是死代码:命中条件与 #4824 完全相同(mobile.fullscreenLongText 开启 + 长文本字段 + 读屏),而该 opt-in 已发布,手机端全屏编辑正是它的主力场景。

未打标签,交 PM triage 定级。建议与 #4824 同批考虑——两条改的是同一批对话框控件,分两次改会在同一段代码上撞车。

Generated by Claude Code