58545876cd
- BulkDropZone: link description <p> to drop zone region via aria-describedby - UploadSaveBar: add explicit aria-valuenow/aria-valuemin/aria-valuemax to <progress> element for consistent screen reader support across browsers - FileSwitcherStrip: add non-color error indicator (red !) to error chips so error state is not communicated by color alone (WCAG 1.4.1) - BulkDocumentEditLayout: comment explaining why raw fetch is used instead of a SvelteKit form action (chunked FormData with per-chunk progress tracking) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.4 KiB
Svelte
44 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let {
|
|
fileCount,
|
|
chunkProgress,
|
|
onSave,
|
|
onDiscard
|
|
}: {
|
|
fileCount: number;
|
|
chunkProgress?: { done: number; total: number };
|
|
onSave: () => void;
|
|
onDiscard: () => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
|
|
{#if chunkProgress}
|
|
<progress
|
|
value={chunkProgress.done}
|
|
max={chunkProgress.total}
|
|
aria-valuenow={chunkProgress.done}
|
|
aria-valuemin={0}
|
|
aria-valuemax={chunkProgress.total}
|
|
aria-label={m.bulk_upload_progress({ done: chunkProgress.done, total: chunkProgress.total })}
|
|
class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
|
|
></progress>
|
|
{/if}
|
|
<div class="flex items-center justify-between gap-3">
|
|
<button type="button" onclick={onDiscard} class="text-sm text-red-600/70 hover:text-red-700">
|
|
{m.bulk_discard_all()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid="bulk-save-btn"
|
|
disabled={fileCount === 0}
|
|
onclick={onSave}
|
|
class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
|
|
>
|
|
{fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount })}
|
|
</button>
|
|
</div>
|
|
</div>
|