ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 20:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

aria labels and high contrast mode for accessibility

Browse source
This commit is contained in:
Sine Jespersen 2025-07-01 12:39:35 +02:00
parent 00e2ad1a9f
commit ab3c19dd36
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/lib/components/chat/MessageInput.svelte
View file

@ -659,7 +659,7 @@
<div class="relative flex items-center">
<Image
src={file.url}
alt="input"
alt=""
imageClassName=" size-14 rounded-xl object-cover"
/>
{#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length}
@ -677,6 +677,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="size-4 fill-yellow-300"
>
<path
@ -690,8 +691,12 @@
</div>
<div class=" absolute -top-1 -right-1">
<button
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'outline-hidden focus:outline-hidden group-hover:visible invisible transition'}"
type="button"
aria-label={$i18n.t('Remove file')}
on:click={() => {
files.splice(fileIdx, 1);
files = files;
@ -701,6 +706,7 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="size-4"
>
<path
@ -1253,11 +1259,12 @@
<button
class="bg-transparent hover:bg-gray-100 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden"
type="button"
aria-label="More"
aria-label={$i18n.t('More Available Tools')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
aria-hidden="true"
fill="currentColor"
class="size-5"
>
@ -1379,6 +1386,10 @@
{#if showCodeInterpreterButton}
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
<button
aria-label={codeInterpreterEnabled
? $i18n.t('Disable Code Interpreter')
: $i18n.t('Enable Code Interpreter')}
aria-pressed={codeInterpreterEnabled}
on:click|preventDefault={() =>
(codeInterpreterEnabled = !codeInterpreterEnabled)}
type="button"
@ -1530,7 +1541,7 @@
);
}
}}
aria-label="Call"
aria-label={$i18n.t('Voice mode')}
>
<Headphone className="size-5" />
</button>

4
src/lib/components/common/Image.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { WEBUI_BASE_URL } from '$lib/constants';
import { settings } from '$lib/stores';
import ImagePreview from './ImagePreview.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import { getContext } from 'svelte';
@ -8,7 +9,8 @@
export let src = '';
export let alt = '';
export let className = ' w-full outline-hidden focus:outline-hidden';
export let className = ` w-full ${($settings?.highContrastMode ?? false) ? '' : 'outline-hidden focus:outline-hidden'}`;
export let imageClassName = 'rounded-lg';
export let dismissible = false;