From 00e2ad1a9f8eb534fa8ecde3c4ad123c187fd8c5 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Tue, 1 Jul 2025 10:10:37 +0200
Subject: [PATCH] Aria labels on image

---
 src/lib/components/common/Image.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/components/common/Image.svelte b/src/lib/components/common/Image.svelte
index 588743d3df..9048bd8ee2 100644
--- a/src/lib/components/common/Image.svelte
+++ b/src/lib/components/common/Image.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { WEBUI_BASE_URL } from '$lib/constants';
+
 	import ImagePreview from './ImagePreview.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import { getContext } from 'svelte';
 
 	export let src = '';
 	export let alt = '';
@@ -12,6 +14,8 @@
 	export let dismissible = false;
 	export let onDismiss = () => {};
 
+	const i18n = getContext('i18n');
+
 	let _src = '';
 	$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
 
@@ -26,6 +30,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 +39,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={() => {