[PR #21706] [MERGED] fix(a11y): improve model selector accessibility with proper listbox/option pattern #26224

New Issue

GiteaMirror · 2026-04-20T06:23:50-05:00

GiteaMirror commented

2026-04-20 06:23:50 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21706
Author: @Classic298
Created: 2/21/2026
Status: ✅ Merged
Merged: 2/21/2026
Merged by: @tjbck

Base: dev ← Head: a11y/model-selector-combobox

📝 Commits (1)

78705c5 fix(a11y): improve model selector accessibility with proper listbox/option pattern

📊 Changes

2 files changed (+9 additions, -4 deletions)

View changed files

📝 src/lib/components/chat/ModelSelector/ModelItem.svelte (+5 -3)
📝 src/lib/components/chat/ModelSelector/Selector.svelte (+4 -1)

📄 Description

Replace incorrect aria-roledescription='model-item' with role='option' and aria-selected on ModelItem.svelte. The previous attribute was not a valid ARIA role description and provided no useful information to screen readers.
Add contextual aria-label to each model item button (e.g. 'Select GPT-4 model') instead of just the raw model name, making the action clear to screen reader users.
Add role='listbox' and aria-label='Available models' to the scrollable model list container in Selector.svelte so screen readers announce the container's purpose and navigate items correctly.
Make the model selector trigger button's aria-label dynamic: it now announces 'Selected model: GPT-4' when a model is selected, falling back to 'Select a model' when nothing is selected.
Add aria-label to the eject (unload) button in ModelItem.svelte so screen readers announce its purpose.
Add aria-label to the cancel download button in Selector.svelte with the specific model name being canceled.
Improve model profile image alt text from generic 'Model' to contextual '{{modelName}} profile image'.

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/21706 **Author:** [@Classic298](https://github.com/Classic298) **Created:** 2/21/2026 **Status:** ✅ Merged **Merged:** 2/21/2026 **Merged by:** [@tjbck](https://github.com/tjbck) **Base:** `dev` ← **Head:** `a11y/model-selector-combobox` --- ### 📝 Commits (1) - [`78705c5`](https://github.com/open-webui/open-webui/commit/78705c56117f60925bd507438774575c800bb1f9) fix(a11y): improve model selector accessibility with proper listbox/option pattern ### 📊 Changes **2 files changed** (+9 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/ModelSelector/ModelItem.svelte` (+5 -3) 📝 `src/lib/components/chat/ModelSelector/Selector.svelte` (+4 -1) </details> ### 📄 Description - Replace incorrect aria-roledescription='model-item' with role='option' and aria-selected on ModelItem.svelte. The previous attribute was not a valid ARIA role description and provided no useful information to screen readers. - Add contextual aria-label to each model item button (e.g. 'Select GPT-4 model') instead of just the raw model name, making the action clear to screen reader users. - Add role='listbox' and aria-label='Available models' to the scrollable model list container in Selector.svelte so screen readers announce the container's purpose and navigate items correctly. - Make the model selector trigger button's aria-label dynamic: it now announces 'Selected model: GPT-4' when a model is selected, falling back to 'Select a model' when nothing is selected. - Add aria-label to the eject (unload) button in ModelItem.svelte so screen readers announce its purpose. - Add aria-label to the cancel download button in Selector.svelte with the specific model name being canceled. - Improve model profile image alt text from generic 'Model' to contextual '{{modelName}} profile image'. ### Contributor License Agreement  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-20 06:23:50 -05:00

GiteaMirror closed this issue

2026-04-20 06:23:50 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#26224