Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): enhance accessibility for chat settings components (#21715)

Browse Source 
This commit adds aria-labels to the text inputs and textareas that previously lacked them, applies role=switch to inputs, and adds accessible titles to floating quick actions.
This commit is contained in:
Classic298
2026-02-22 14:33:07 -06:00
committed by GitHub
parent 1542dad51a
commit 16e567df57
8 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Settings/Audio.svelte
+12
View File
@@ -186,6 +186,7 @@
<select
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={STTEngine}
aria-label={$i18n.t('Speech-to-Text Engine')}
placeholder={$i18n.t('Select an engine')}
>
<option value="">{$i18n.t('Default')}</option>
@@ -207,6 +208,7 @@
<input
type="text"
bind:value={STTLanguage}
aria-label={$i18n.t('Speech-to-Text Language')}
placeholder={$i18n.t('e.g. en')}
class=" text-sm text-right bg-transparent dark:text-gray-300 outline-hidden"
/>
@@ -226,6 +228,8 @@
toggleSpeechAutoSend();
}}
type="button"
role="switch"
aria-checked={speechAutoSend}
>
{#if speechAutoSend === true}
<span class="ml-2 self-center">{$i18n.t('On')}</span>
@@ -245,6 +249,7 @@
<select
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={TTSEngine}
aria-label={$i18n.t('Text-to-Speech Engine')}
placeholder={$i18n.t('Select an engine')}
>
<option value="">{$i18n.t('Default')}</option>
@@ -260,6 +265,7 @@
<select
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={TTSEngineConfig.dtype}
aria-label={$i18n.t('Kokoro.js Dtype')}
placeholder={$i18n.t('Select dtype')}
>
<option value="" disabled selected>{$i18n.t('Select dtype')}</option>
@@ -281,6 +287,8 @@
toggleResponseAutoPlayback();
}}
type="button"
role="switch"
aria-checked={responseAutoPlayback}
>
{#if responseAutoPlayback === true}
<span class="ml-2 self-center">{$i18n.t('On')}</span>
@@ -299,6 +307,7 @@
min="0"
step="0.01"
bind:value={playbackRate}
aria-label={$i18n.t('Speech Playback Speed')}
class=" text-sm text-right bg-transparent dark:text-gray-300 outline-hidden"
/>
x
@@ -318,6 +327,7 @@
list="voice-list"
class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
bind:value={voice}
aria-label={$i18n.t('Voice')}
placeholder={$i18n.t('Select a voice')}
/>
@@ -355,6 +365,7 @@
<select
class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
bind:value={voice}
aria-label={$i18n.t('Voice')}
>
<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
{#each voices.filter((v) => nonLocalVoices || v.localService === true) as _voice}
@@ -386,6 +397,7 @@
list="voice-list"
class="w-full text-sm bg-transparent dark:text-gray-300 outline-hidden"
bind:value={voice}
aria-label={$i18n.t('Voice')}
placeholder={$i18n.t('Select a voice')}
/>