Merge pull request #16296 from itk-dev/feature/accessible-banner

feat: translate elements in banner for accessibility

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,14 +71,17 @@
 							<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"
 							>
 								<!--  -->
 								<svg
+									aria-hidden="true"
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 16 16"
 									fill="currentColor"
@@ -95,12 +107,15 @@
 					<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">
 						<!--  -->
 						<svg
+							aria-hidden="true"
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 16 16"
 							fill="currentColor"
@@ -117,6 +132,7 @@
 			{/if}
 			<div class="flex self-start">
 				<button
+					aria-label={$i18n.t('Close Banner')}
 					on:click={() => {
 						dismiss(banner.id);
 					}}