issue(a11y): the Valves and Disconnect OAuth buttons are nested inside their toggle in the Integrations menu

问题场景

在 Open WebUI 聊天界面打开 Integrations 菜单，进入 Tools（工具）或 Filters（过滤器）列表时触发。添加一个在代码中定义了 user valves 的工具后，该工具所在行会显示 Valves 按钮；若 MCP 工具通过 OAuth 登录，该行还会显示 Disconnect OAuth 按钮。这两类按钮都位于行内 toggle 按钮的内部。

报错原文

issue(a11y): the Valves and Disconnect OAuth buttons are nested inside their toggle in the Integrations menu

原因分析

最可能的原因是 MessageInput/IntegrationsMenu.svelte 中 Filters 行和 Tools 行把整行做成了 toggle 按钮，而 Valves 按钮与 Disconnect OAuth 按钮被渲染在该 toggle 元素内部，形成 HTML 中不合法的按钮嵌套。浏览器控制台中的这段检查可复现该结构：

JSON.stringify([...[...document.querySelectorAll('[role="menu"]')].pop().querySelectorAll('[role^="menuitem"]')].filter((m) => m.querySelector('button')).map((m) => m.textContent.trim()))

由于内层按钮嵌套在外层按钮中，屏幕阅读器可能跳过内层按钮，或把整行当作一个控件朗读，导致 Valves 设置无法用键盘或读屏软件正常到达。关联 Issue #32612 也报告了同一组 Integrations 菜单控件缺少可访问名称的问题，但侧重朗读文本，而非嵌套结构本身。

环境排查

• 确认 Open WebUI 版本：Issue 中为 dev 分支 faf16fa38，并已在最新 release 与 dev 分支上复现。
• 确认安装方式为 Docker，系统为 Linux，浏览器为 Firefox。
• 确认 Tools 列表中是否存在自定义了 user valves 的工具，以及是否有通过 OAuth 登录的 MCP 工具。
• 确认 Ollama 是否参与：本例未使用 Ollama，走 OpenAI 兼容连接。
• Issue 未提供 Python、CUDA、PyTorch、显卡或依赖版本，排查前端模板时无需以此为条件。

解决步骤

1. 打开 MessageInput/IntegrationsMenu.svelte，定位 Filters 和 Tools 各自的行渲染块。
2. 在浏览器开发者工具的 Console 中粘贴 Issue 提供的检查语句，确认哪些行包含内层 button；输出结果为带 Valves 按钮的行列表。
3. 调整模板结构，使整行的 toggle 与 Valves、Disconnect OAuth 按钮成为同级元素，而非父子嵌套；具体实现 Issue 未给出，可优先尝试把内层按钮移出 toggle 元素。
4. 重新构建并加载前端，再按上述检查语句复查控制台输出，确认不再列出嵌套按钮的行。

验证方法

在 Integrations 菜单的 Filters 和 Tools 列表中重新执行 Console 检查语句，若不再返回含内层 button 的菜单项，说明嵌套已解除；随后用纯键盘 Tab 导航和屏幕阅读器确认 Valves 与 Disconnect OAuth 可单独聚焦和朗读。注意 Issue 未记录该结构的修复后状态，验证需以自身环境实测为准。

参考来源

open-webui/open-webui #33059

AI 工具推荐

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

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

了解 GamsGo AI

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