mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
Aria labels on image
This commit is contained in:
parent
a463ef3c03
commit
00e2ad1a9f
1 changed files with 6 additions and 0 deletions
|
|
@ -1,7 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||||
|
|
||||||
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';
|
||||||
|
|
||||||
export let src = '';
|
export let src = '';
|
||||||
export let alt = '';
|
export let alt = '';
|
||||||
|
|
@ -12,6 +14,8 @@
|
||||||
export let dismissible = false;
|
export let dismissible = false;
|
||||||
export let onDismiss = () => {};
|
export let onDismiss = () => {};
|
||||||
|
|
||||||
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
let _src = '';
|
let _src = '';
|
||||||
$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
|
$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
|
||||||
|
|
||||||
|
|
@ -26,6 +30,7 @@
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
showImagePreview = true;
|
showImagePreview = true;
|
||||||
}}
|
}}
|
||||||
|
aria-label={$i18n.t('Show image preview')}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<img src={_src} {alt} class={imageClassName} draggable="false" data-cy="image" />
|
<img src={_src} {alt} class={imageClassName} draggable="false" data-cy="image" />
|
||||||
|
|
@ -34,6 +39,7 @@
|
||||||
{#if dismissible}
|
{#if dismissible}
|
||||||
<div class=" absolute -top-1 -right-1">
|
<div class=" absolute -top-1 -right-1">
|
||||||
<button
|
<button
|
||||||
|
aria-label={$i18n.t('Remove image')}
|
||||||
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 group-hover:visible invisible transition"
|
||||||
type="button"
|
type="button"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue