fix(bulk-upload): accessibility improvements and fetch comment
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m43s
CI / OCR Service Tests (push) Successful in 57s
CI / Backend Unit Tests (push) Failing after 3m21s
CI / Unit & Component Tests (pull_request) Failing after 3m5s
CI / OCR Service Tests (pull_request) Successful in 50s
CI / Backend Unit Tests (pull_request) Failing after 3m7s
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m43s
CI / OCR Service Tests (push) Successful in 57s
CI / Backend Unit Tests (push) Failing after 3m21s
CI / Unit & Component Tests (pull_request) Failing after 3m5s
CI / OCR Service Tests (pull_request) Successful in 50s
CI / Backend Unit Tests (pull_request) Failing after 3m7s
- 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>
This commit is contained in:
@@ -105,6 +105,9 @@ async function save() {
|
|||||||
tagNames: tags.map((t) => t.name)
|
tagNames: tags.map((t) => t.name)
|
||||||
};
|
};
|
||||||
formData.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
|
formData.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
|
||||||
|
// Raw fetch is intentional: SvelteKit form actions can't stream chunked
|
||||||
|
// FormData with per-chunk progress. Session cookie is sent automatically
|
||||||
|
// by the browser for same-origin requests.
|
||||||
const res = await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
|
const res = await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
hadErrors = true;
|
hadErrors = true;
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ let isDragging = $state(false);
|
|||||||
<div
|
<div
|
||||||
role="region"
|
role="region"
|
||||||
aria-label={m.bulk_drop_zone_label()}
|
aria-label={m.bulk_drop_zone_label()}
|
||||||
|
aria-describedby="bulk-drop-desc"
|
||||||
data-testid="bulk-drop-zone"
|
data-testid="bulk-drop-zone"
|
||||||
class="flex flex-1 flex-col items-center justify-center p-6"
|
class="flex flex-1 flex-col items-center justify-center p-6"
|
||||||
ondragover={(e) => {
|
ondragover={(e) => {
|
||||||
@@ -54,7 +55,7 @@ let isDragging = $state(false);
|
|||||||
<p class="font-serif text-base font-bold text-ink">{m.bulk_drop_hint()}</p>
|
<p class="font-serif text-base font-bold text-ink">{m.bulk_drop_hint()}</p>
|
||||||
|
|
||||||
<!-- Sub description -->
|
<!-- Sub description -->
|
||||||
<p class="text-sm leading-relaxed text-ink-2">{m.bulk_drop_desc()}</p>
|
<p id="bulk-drop-desc" class="text-sm leading-relaxed text-ink-2">{m.bulk_drop_desc()}</p>
|
||||||
|
|
||||||
<!-- CTA button -->
|
<!-- CTA button -->
|
||||||
<label
|
<label
|
||||||
|
|||||||
@@ -102,6 +102,9 @@ $effect(() => {
|
|||||||
>{i + 1}</span
|
>{i + 1}</span
|
||||||
>
|
>
|
||||||
<span class="max-w-[8rem] truncate" title={entry.title}>{entry.title}</span>
|
<span class="max-w-[8rem] truncate" title={entry.title}>{entry.title}</span>
|
||||||
|
{#if entry.status === 'error'}
|
||||||
|
<span aria-hidden="true" class="ml-0.5 font-extrabold text-red-600">!</span>
|
||||||
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -19,6 +19,9 @@ let {
|
|||||||
<progress
|
<progress
|
||||||
value={chunkProgress.done}
|
value={chunkProgress.done}
|
||||||
max={chunkProgress.total}
|
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 })}
|
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"
|
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>
|
></progress>
|
||||||
|
|||||||
Reference in New Issue
Block a user