issue(a11y): tag and voice suggestions can’t be chosen from the keyboard

该问题出现在 Open WebUI 的标签、TTS Voice 以及模型编辑器中 Tools/Skills/Filters/Actions 等建议列表中:这些建议虽然以 role="listbox" 与 role="option" 渲染,但缺少方向键处理,因此 issue(a11y): tag an

快速结论:该问题出现在 Open WebUI 的标签、TTS Voice 以及模型编辑器中 Tools/Skills/Filters/Actions 等建议列表中:这些建议虽然以 role="listbox" 与 role="option" 渲染,但缺少方向键处理,因此 issue(a11y): tag and voice suggestions can't be chosen from the keyboard 只能靠鼠标点选。优先排查前端组件 common/Tags.svelte 和 workspace/Models/TTSVoiceInput.svelte 的键盘事件与 aria-activedescendant 实现。

适用环境:Issue 中已确认的环境为 Git Clone 安装、Open WebUI dev 分支(a6f999e77)、Linux、Firefox、Ollama v0.40.13,使用默认设置。Issue 未提供 Python、CUDA、显卡等环境信息,无法据此判断。

最快修复方案:暂无确认的一步修复方案。Issue 仅定位到源码层面的键盘事件处理缺失,未给出已验证的临时绕过方法或配置项;在修复合并前,可继续使用鼠标点选建议项。

注意事项:Issue 中描述的是前端可访问性缺陷,与 Ollama 模型推理、Python 或 CUDA 环境无关,调整这些环境不会改变该行为。由于报告基于 dev 分支,不同发布版本上的组件代码可能已有差异,修复前应先确认实际代码。

问题场景

用户在 Open WebUI 中编辑模型时,点击 Tags 字段(“Add a tag…”)会显示已有标签作为建议;点击 TTS Voice 字段,以及模型编辑器的 Tools(“Search tools”)、Skills、Filters、Actions 字段,也会以同样方式显示建议列表。此时只有鼠标点击才能选中建议项:按上下方向键无任何反应,也没有任何选项处于激活状态,屏幕阅读器无法播报当前选项。作为对比,消息输入框中的 @ 模型列表已经支持方向键移动、Enter 选中。

报错原文

issue(a11y): tag and voice suggestions can't be chosen from the keyboard

原因分析

根据 Issue 作者的排查,common/Tags.svelte 与 workspace/Models/TTSVoiceInput.svelte 把建议渲染为 role="listbox" 容器中的 role="option" 按钮,但键盘处理只覆盖了部分按键:Tags 组件仅处理 Enter、Space 和 Escape,TTS Voice 组件仅处理 Escape。两者都没有处理上下方向键,也没有设置 aria-activedescendant,因此无法表达“当前高亮项”,屏幕阅读器自然无法播报。此外 TTSVoiceInput 同时为 workspace/Models/TypeaheadSelector.svelte 提供支持,而模型编辑器的 Tools、Skills、Filters 和 Actions 字段都使用该组件,所以同一缺陷扩散到这些字段。

环境排查

  • 确认 Open WebUI 部署方式与版本:Issue 使用 Git Clone 与 dev 分支 a6f999e77;若使用 Docker 或稳定版,请先确认对应前端组件版本是否与报告一致。
  • 确认浏览器:Issue 在 Firefox 上复现;可交叉验证 Chromium 系浏览器,以判断是否为浏览器差异。
  • 确认复现位置:Workspace > Models 编辑界面中的 Tags、TTS Voice、Tools、Skills、Filters、Actions 字段。
  • 确认前置数据:至少一个模型带标签、至少安装一个工具,这样才能看到建议项。
  • 检查前端控制台是否有与键盘事件或组件报错相关的输出;Issue 未提供此类日志,不能据此推断。
  • Python、CUDA、PyTorch、显卡等信息在 Issue 中未涉及,与本次问题无直接关联。

解决步骤

  1. 在问题版本上按 Issue 的复现步骤确认现象:进入模型编辑器,点击 Tags 字段,按两次 Down 再按 Enter,观察是否无高亮、无标签被添加;再对 Tools 字段执行 Down + Enter 确认同样无响应。
  2. 定位 common/Tags.svelte 与 workspace/Models/TTSVoiceInput.svelte,检查其 keydown 处理逻辑:确认是否只包含 Enter/Space/Escape,且没有 Down/Up 分支。
  3. 确认 TTSVoiceInput 是否被 workspace/Models/TypeaheadSelector.svelte 复用,从而影响 Tools、Skills、Filters、Actions 字段。
  4. 在组件中补齐方向键导航与当前项状态,并通过 aria-activedescendant 指向激活的 option 元素;可优先尝试参照消息输入框中 @ 模型列表的已有实现,保持行为一致。
  5. 由于 Issue 未给出已合并的修复提交或官方补丁,上述代码改动属于依据原因分析的修复方向,需自行验证;修改前建议备份相关文件或基于独立分支测试。

验证方法

回到模型编辑器的 Tags 字段,输入内容后用 Down/Up 在建议间移动,确认有可见的高亮项且屏幕阅读器能播报当前选项,按 Enter 可选中该建议;再对 TTS Voice、Tools、Skills、Filters、Actions 字段重复相同操作。同时确认原有行为未回归:Escape 可关闭列表,Tags 字段中输入后按 Enter 仍可添加手动输入的文本。

参考来源

open-webui/open-webui #33451

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 31602

发表回复

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