Aria labels on image

This commit is contained in:
Sine Jespersen 2025-07-01 10:10:37 +02:00
parent a463ef3c03
commit 00e2ad1a9f

View file

@ -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={() => {