Aria labels on image

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