mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-13 12:55:19 +00:00
Merge pull request #15445 from itk-dev/feature/chat-page-accessibility
Feat: chat page accessibility
This commit is contained in:
Tim Jaeryang Baek
GitHub
commit
6d0bd226c1
7 changed files with 29 additions and 5 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,23 @@
|
|||
<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';
|
||||
|
||||
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;
|
||||
export let onDismiss = () => {};
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
let _src = '';
|
||||
$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
|
||||
|
||||
|
|
@ -26,6 +32,7 @@
|
|||
on:click={() => {
|
||||
showImagePreview = true;
|
||||
}}
|
||||
aria-label={$i18n.t('Show image preview')}
|
||||
type="button"
|
||||
>
|
||||
<img src={_src} {alt} class={imageClassName} draggable="false" data-cy="image" />
|
||||
|
|
@ -34,6 +41,7 @@
|
|||
{#if dismissible}
|
||||
<div class=" absolute -top-1 -right-1">
|
||||
<button
|
||||
aria-label={$i18n.t('Remove image')}
|
||||
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
aria-hidden="true"
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue