ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 04:15:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
feat: translate elements in banner for accessibility
This commit is contained in:
Tim Jaeryang Baek 2025-08-05 20:02:49 +04:00 committed by GitHub
commit 40c525b7b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/lib/components/common/Banner.svelte
View file

@ -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);
}}