feat(dashboard): add UploadSuccessBanner component
Transient post-upload banner for issue #296: singular/plural German copy, aria-live=polite for screen readers, manual X dismiss, 8s auto-dismiss. "Jetzt ergänzen →" CTA links directly to /enrich so seniors can continue straight into the enrichment flow after a batch upload. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
62
frontend/src/lib/components/UploadSuccessBanner.svelte
Normal file
62
frontend/src/lib/components/UploadSuccessBanner.svelte
Normal file
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
|
||||
interface Props {
|
||||
count: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { count, onClose }: Props = $props();
|
||||
|
||||
const message = $derived(
|
||||
count === 1 ? m.upload_banner_singular() : m.upload_banner_plural({ count })
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
const timer = setTimeout(onClose, 8000);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
class="flex items-center gap-3 rounded-sm border border-line bg-accent-bg/60 px-4 py-3 text-ink"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 shrink-0 text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<p class="flex-1 font-sans text-sm">
|
||||
<span>{message}</span>
|
||||
<a href="/enrich" class="ml-1 font-medium text-primary hover:underline">
|
||||
{m.upload_banner_cta()}
|
||||
</a>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="upload-banner-close"
|
||||
aria-label={m.upload_banner_close()}
|
||||
onclick={onClose}
|
||||
class="inline-flex h-6 w-6 items-center justify-center rounded-sm text-ink-3 hover:bg-ink/10 hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,57 @@
|
||||
import { describe, it, expect, afterEach, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
|
||||
import UploadSuccessBanner from './UploadSuccessBanner.svelte';
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
describe('UploadSuccessBanner', () => {
|
||||
it('renders singular copy for count of 1', async () => {
|
||||
render(UploadSuccessBanner, { count: 1, onClose: () => {} });
|
||||
const status = page.getByRole('status');
|
||||
await expect.element(status).toBeInTheDocument();
|
||||
await expect.element(status).toHaveTextContent(/1 Dokument/);
|
||||
});
|
||||
|
||||
it('renders plural copy for count greater than 1', async () => {
|
||||
render(UploadSuccessBanner, { count: 3, onClose: () => {} });
|
||||
await expect.element(page.getByRole('status')).toHaveTextContent(/3 Dokumente/);
|
||||
});
|
||||
|
||||
it('exposes role=status with aria-live polite', async () => {
|
||||
render(UploadSuccessBanner, { count: 1, onClose: () => {} });
|
||||
await expect.element(page.getByRole('status')).toHaveAttribute('aria-live', 'polite');
|
||||
});
|
||||
|
||||
it('renders a CTA link to /enrich', async () => {
|
||||
render(UploadSuccessBanner, { count: 2, onClose: () => {} });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /ergänzen/i }))
|
||||
.toHaveAttribute('href', '/enrich');
|
||||
});
|
||||
|
||||
it('invokes onClose when the close button is clicked', async () => {
|
||||
const onClose = vi.fn();
|
||||
render(UploadSuccessBanner, { count: 1, onClose });
|
||||
const button = document.querySelector(
|
||||
'[data-testid="upload-banner-close"]'
|
||||
) as HTMLButtonElement | null;
|
||||
expect(button).not.toBeNull();
|
||||
button?.click();
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('auto-dismisses after 8000ms', async () => {
|
||||
vi.useFakeTimers();
|
||||
const onClose = vi.fn();
|
||||
render(UploadSuccessBanner, { count: 1, onClose });
|
||||
vi.advanceTimersByTime(7999);
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
vi.advanceTimersByTime(2);
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user