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

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

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

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import { settings } from '$lib/stores';
import ImagePreview from './ImagePreview.svelte'; import ImagePreview from './ImagePreview.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -8,7 +9,8 @@
export let src = ''; export let src = '';
export let alt = ''; 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 imageClassName = 'rounded-lg';
export let dismissible = false; export let dismissible = false;