From e2b722deb208a9f5534d7e74de6fc048a1844ea0 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Tue, 5 Aug 2025 11:18:56 +0200
Subject: [PATCH 1/2] translate elements in banner for accessibility

---
 src/lib/components/common/Banner.svelte | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/common/Banner.svelte b/src/lib/components/common/Banner.svelte
index a54ea02d0e..66630407d3 100644
--- a/src/lib/components/common/Banner.svelte
+++ b/src/lib/components/common/Banner.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { Banner } from '$lib/types';
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount, createEventDispatcher, getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import DOMPurify from 'dompurify';
 	import { marked } from 'marked';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	const dispatch = createEventDispatcher();
+	const i18n = getContext('i18n');
 
 	export let banner: Banner = {
 		id: '',
@@ -54,7 +55,15 @@
 						class=" text-xs font-bold {classNames[banner.type] ??
 							classNames['info']}  w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5"
 					>
-						{banner.type}
+						{#if banner.type.toLowerCase() === 'info'}
+							{$i18n.t('Info')}
+						{/if}
+						{#if banner.type.toLowerCase() === 'warning'}
+							{$i18n.t('Warning')}
+						{/if}
+						{#if banner.type.toLowerCase() === 'error'}
+							{$i18n.t('Error')}
+						{/if}
 					</div>
 
 					{#if banner.url}
@@ -62,8 +71,10 @@
 							<a
 								class="text-gray-700 dark:text-white text-xs font-semibold underline"
 								href="{WEBUI_BASE_URL}/assets/files/whitepaper.pdf"
-								target="_blank">Learn More</a
+								target="_blank"
 							>
+								{$i18n.t('Learn More')}
+							</a>
 
 							<div
 								class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white"
@@ -95,8 +106,10 @@
 					<a
 						class="text-gray-700 dark:text-white text-xs font-semibold underline"
 						href="/"
-						target="_blank">Learn More</a
+						target="_blank"
 					>
+						{$i18n.t('Learn More')}
+					</a>
 
 					<div class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white">
 						<!--  -->
@@ -117,6 +130,7 @@
 			{/if}
 			<div class="flex self-start">
 				<button
+					aria-label={$i18n.t('Close Banner')}
 					on:click={() => {
 						dismiss(banner.id);
 					}}

From 3494fa87075fe5a0fafc821c0bc5b7350ebd1fec Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Tue, 5 Aug 2025 12:15:55 +0200
Subject: [PATCH 2/2] aria hidden on svgs to hide them from assistive tech

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

diff --git a/src/lib/components/common/Banner.svelte b/src/lib/components/common/Banner.svelte
index 66630407d3..765b57cc36 100644
--- a/src/lib/components/common/Banner.svelte
+++ b/src/lib/components/common/Banner.svelte
@@ -81,6 +81,7 @@
 							>
 								<!--  -->
 								<svg
+									aria-hidden="true"
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 16 16"
 									fill="currentColor"
@@ -114,6 +115,7 @@
 					<div class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white">
 						<!--  -->
 						<svg
+							aria-hidden="true"
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 16 16"
 							fill="currentColor"