35303831f7
- UploadSuccessBanner dismiss button: 24×24 → 40×40 hit area (icon stays at 16px). Matches senior-first baseline Leonie flagged. - DashboardNeedsMetadata chevron: adds motion-reduce:transition-none and motion-reduce:group-hover:translate-x-0 so users with prefers-reduced- motion do not see the hover translate. - Row title prefixed with an sr-only "PDF: " span so assistive tech announces the document affordance alongside the title. Addresses Leonie's review concerns #2, #3, and the sr-only nit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
63 lines
1.5 KiB
Svelte
63 lines
1.5 KiB
Svelte
<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-10 w-10 shrink-0 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>
|