scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-30 06:43:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

fix(a11y): screen readers read the model the arrow keys are on in the model picker (#32886)

Browse source
This commit is contained in:
G30 2026-10-21 18:25:28 -04:00 • committed by GitHub
parent 4d70ed07ff
commit da2780b240
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/chat/ModelSelector/ModelItem.svelte
View file

@ -55,6 +55,7 @@
</script>
<button
id="model-option-{index}"
role="option"
aria-selected={isSelected}
aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}

10
src/lib/components/chat/ModelSelector/Selector.svelte
View file

@ -944,6 +944,13 @@
placeholder={searchPlaceholder ?? $i18n.t('Search a model')}
autocomplete="off"
aria-label={$i18n.t('Search In Models')}
role="combobox"
aria-autocomplete="list"
aria-expanded={filteredItems.length + downloadTargets.length > 0}
aria-controls="model-selector-list"
aria-activedescendant={filteredItems.length + downloadTargets.length > 0
? `model-option-${selectedModelIdx}`
: undefined}
on:keydown={(e) => {
if (e.code === 'Enter') {
if (selectedModelIdx >= filteredItems.length) {
@ -1064,6 +1071,7 @@
<div
class="min-h-0 flex-1 overflow-y-auto"
style="max-height: 18rem;"
id="model-selector-list"
role="listbox"
aria-label={$i18n.t('Available models')}
bind:this={listContainer}
@ -1107,6 +1115,7 @@
placement="top-start"
>
<div
id="model-option-{filteredItems.length + targetIndex}"
role="option"
aria-selected={selectedModelIdx === filteredItems.length + targetIndex}
data-arrow-selected={selectedModelIdx === filteredItems.length + targetIndex}
@ -1159,6 +1168,7 @@
<Tooltip content={target.actionLabel} placement="top-start">
<button
type="button"
id="model-option-{filteredItems.length + targetIndex}"
role="option"
aria-selected={selectedModelIdx === filteredItems.length + targetIndex}
data-arrow-selected={selectedModelIdx === filteredItems.length + targetIndex}