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"> <script lang="ts">
import type { Banner } from '$lib/types'; import type { Banner } from '$lib/types';
import { onMount, createEventDispatcher } from 'svelte'; import { onMount, createEventDispatcher, getContext } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { marked } from 'marked'; import { marked } from 'marked';
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let banner: Banner = { export let banner: Banner = {
id: '', id: '',
@ -54,7 +55,15 @@
class=" text-xs font-bold {classNames[banner.type] ?? class=" text-xs font-bold {classNames[banner.type] ??
classNames['info']} w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5" 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> </div>
{#if banner.url} {#if banner.url}
@ -62,14 +71,17 @@
<a <a
class="text-gray-700 dark:text-white text-xs font-semibold underline" class="text-gray-700 dark:text-white text-xs font-semibold underline"
href="{WEBUI_BASE_URL}/assets/files/whitepaper.pdf" href="{WEBUI_BASE_URL}/assets/files/whitepaper.pdf"
target="_blank">Learn More</a target="_blank"
> >
{$i18n.t('Learn More')}
</a>
<div <div
class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white" class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white"
> >
<!-- --> <!-- -->
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="currentColor" fill="currentColor"
@ -95,12 +107,15 @@
<a <a
class="text-gray-700 dark:text-white text-xs font-semibold underline" class="text-gray-700 dark:text-white text-xs font-semibold underline"
href="/" 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"> <div class=" ml-1 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white">
<!-- --> <!-- -->
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="currentColor" fill="currentColor"
@ -117,6 +132,7 @@
{/if} {/if}
<div class="flex self-start"> <div class="flex self-start">
<button <button
aria-label={$i18n.t('Close Banner')}
on:click={() => { on:click={() => {
dismiss(banner.id); dismiss(banner.id);
}} }}