[PR #21711] [CLOSED] fix(a11y): add aria-labels to message input components and enhance accessibility across MessageInput components #41859

Closed
opened 2026-04-25 13:57:44 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21711
Author: @Classic298
Created: 2/21/2026
Status: Closed

Base: devHead: a11y/aria-labels-message-input


📝 Commits (2)

  • 81c68e4 fix(a11y): add aria-labels to message input components
  • 8aae7aa fix(a11y): enhance accessibility across MessageInput components

📊 Changes

17 files changed (+85 additions, -10 deletions)

View changed files

📝 src/lib/components/chat/MessageInput.svelte (+17 -4)
📝 src/lib/components/chat/MessageInput/AttachWebpageModal.svelte (+1 -0)
📝 src/lib/components/chat/MessageInput/CallOverlay.svelte (+4 -1)
📝 src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte (+1 -0)
📝 src/lib/components/chat/MessageInput/CommandSuggestionList.svelte (+2 -0)
📝 src/lib/components/chat/MessageInput/Commands/Knowledge.svelte (+9 -0)
📝 src/lib/components/chat/MessageInput/Commands/Models.svelte (+5 -1)
📝 src/lib/components/chat/MessageInput/Commands/Prompts.svelte (+5 -1)
📝 src/lib/components/chat/MessageInput/Commands/Skills.svelte (+5 -1)
📝 src/lib/components/chat/MessageInput/FilesOverlay.svelte (+2 -1)
📝 src/lib/components/chat/MessageInput/InputMenu.svelte (+11 -0)
📝 src/lib/components/chat/MessageInput/InputMenu/Chats.svelte (+3 -0)
📝 src/lib/components/chat/MessageInput/InputMenu/Knowledge.svelte (+4 -0)
📝 src/lib/components/chat/MessageInput/InputMenu/Notes.svelte (+3 -0)
📝 src/lib/components/chat/MessageInput/InputVariablesModal.svelte (+1 -0)
📝 src/lib/components/chat/MessageInput/IntegrationsMenu.svelte (+10 -1)
📝 src/lib/components/chat/MessageInput/VoiceRecording.svelte (+2 -0)

📄 Description

Add aria-labels to interactive buttons in message input area:

  • VoiceRecording: cancel and confirm recording buttons
  • InputVariablesModal: close button
  • CallOverlay: close camera, switch camera, camera toggle, end call buttons

WCAG: 4.1.2 (Name, Role, Value)

  • FilesOverlay: improve aria-label, add aria-live
  • CommandSuggestionList: add role listbox
  • IntegrationsMenu: add role switch and aria-checked
  • InputMenu: add aria-labels to back buttons, add aria-disabled
  • Commands, Inputs: add keyboard focus sync, proper ARIA roles
  • MessageInput: Add aria labels pointing to buttons
  • AttachWebpageModal: add aria-label to submit button
  • VideoInputMenu: add aria-labels to dropdown items

WCAG: 4.1.2 (Name, Role, Value), 2.1.1 (Keyboard), 3.3.2 (Labels)

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

Note

Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/21711 **Author:** [@Classic298](https://github.com/Classic298) **Created:** 2/21/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `a11y/aria-labels-message-input` --- ### 📝 Commits (2) - [`81c68e4`](https://github.com/open-webui/open-webui/commit/81c68e4b0b1b2b09e3b6c7e41d63b1a230a3b959) fix(a11y): add aria-labels to message input components - [`8aae7aa`](https://github.com/open-webui/open-webui/commit/8aae7aa38b38428476c15bb72a36e88d61f7f9fe) fix(a11y): enhance accessibility across MessageInput components ### 📊 Changes **17 files changed** (+85 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/MessageInput.svelte` (+17 -4) 📝 `src/lib/components/chat/MessageInput/AttachWebpageModal.svelte` (+1 -0) 📝 `src/lib/components/chat/MessageInput/CallOverlay.svelte` (+4 -1) 📝 `src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte` (+1 -0) 📝 `src/lib/components/chat/MessageInput/CommandSuggestionList.svelte` (+2 -0) 📝 `src/lib/components/chat/MessageInput/Commands/Knowledge.svelte` (+9 -0) 📝 `src/lib/components/chat/MessageInput/Commands/Models.svelte` (+5 -1) 📝 `src/lib/components/chat/MessageInput/Commands/Prompts.svelte` (+5 -1) 📝 `src/lib/components/chat/MessageInput/Commands/Skills.svelte` (+5 -1) 📝 `src/lib/components/chat/MessageInput/FilesOverlay.svelte` (+2 -1) 📝 `src/lib/components/chat/MessageInput/InputMenu.svelte` (+11 -0) 📝 `src/lib/components/chat/MessageInput/InputMenu/Chats.svelte` (+3 -0) 📝 `src/lib/components/chat/MessageInput/InputMenu/Knowledge.svelte` (+4 -0) 📝 `src/lib/components/chat/MessageInput/InputMenu/Notes.svelte` (+3 -0) 📝 `src/lib/components/chat/MessageInput/InputVariablesModal.svelte` (+1 -0) 📝 `src/lib/components/chat/MessageInput/IntegrationsMenu.svelte` (+10 -1) 📝 `src/lib/components/chat/MessageInput/VoiceRecording.svelte` (+2 -0) </details> ### 📄 Description Add aria-labels to interactive buttons in message input area: - VoiceRecording: cancel and confirm recording buttons - InputVariablesModal: close button - CallOverlay: close camera, switch camera, camera toggle, end call buttons WCAG: 4.1.2 (Name, Role, Value) - FilesOverlay: improve aria-label, add aria-live - CommandSuggestionList: add role listbox - IntegrationsMenu: add role switch and aria-checked - InputMenu: add aria-labels to back buttons, add aria-disabled - Commands, Inputs: add keyboard focus sync, proper ARIA roles - MessageInput: Add aria labels pointing to buttons - AttachWebpageModal: add aria-label to submit button - VideoInputMenu: add aria-labels to dropdown items WCAG: 4.1.2 (Name, Role, Value), 2.1.1 (Keyboard), 3.3.2 (Labels) ### Contributor License Agreement <!-- 🚨 DO NOT DELETE THE TEXT BELOW 🚨 Keep the "Contributor License Agreement" confirmation text intact. Deleting it will trigger the CLA-Bot to INVALIDATE your PR. --> By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. > [!NOTE] > Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-25 13:57:44 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#41859