immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-21 01:11:16 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat(web): announce notifications to screen readers (#12071)

Browse Source
This commit is contained in:
Ben
2024-08-27 18:13:17 -04:00
committed by GitHub
parent 98b3441cb1
commit 72ab664936
7 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/lib/components/shared-components/notification/notification-list.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { notificationController } from './notification';
import { fade } from 'svelte/transition';
import { t } from 'svelte-i18n';
import NotificationCard from './notification-card.svelte';
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';
@@ -9,12 +9,14 @@
const { notificationList } = notificationController;
</script>
{#if $notificationList.length > 0}
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed right-5 top-[80px] z-[99999999]">
{#each $notificationList as notification (notification.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<NotificationCard {notification} />
</div>
{/each}
</section>
{/if}
<div role="status" aria-relevant="additions" aria-label={$t('notifications')}>
{#if $notificationList.length > 0}
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed right-5 top-[80px] z-[99999999]">
{#each $notificationList as notification (notification.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<NotificationCard {notification} />
</div>
{/each}
</section>
{/if}
</div>