marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(document): make the PDF error state accessible (alert + larger link)
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m45s
Details
CI / OCR Service Tests (pull_request) Successful in 23s
Details
CI / Backend Unit Tests (pull_request) Successful in 3m35s
Details
CI / fail2ban Regex (pull_request) Successful in 44s
Details
CI / Semgrep Security Scan (pull_request) Successful in 22s
Details
CI / Compose Bucket Idempotency (pull_request) Successful in 1m6s
Details

Browse Source 
The error block was a colour-only, visually-small dead end. Add
role="alert" so screen readers announce the failure, bump the message to
text-base and the recovery download link to text-sm with a py-2 tap
target — the only escape hatch, sized for the archive's older readers.

Addresses re-review: Leonie (a11y of the error state).

Refs #708

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-01 20:44:56 +02:00
parent 1d2c529436
commit 2c96752330
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/lib/document/viewer/PdfViewer.svelte
View File

@@ -170,13 +170,20 @@ function handleAnnotationClick(id: string) {
<p class="font-sans text-sm">Keine Datei vorhanden</p>
</div>
{:else if renderer.error}
<div class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg text-ink-3">
<p class="font-sans text-sm text-red-400">{m.doc_render_failed()}</p>
<!-- role="alert" announces the failure to screen readers; the message text
(not colour alone) carries the meaning. The download link is the only
recovery action, so it is sized as a comfortable tap/focus target for
the archive's older readers. -->
<div
role="alert"
class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg px-4 text-center text-ink-3"
>
<p class="font-sans text-base text-red-400">{m.doc_render_failed()}</p>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
class="font-sans text-xs text-primary underline hover:text-ink-2"
class="inline-block py-2 font-sans text-sm text-primary underline hover:text-ink-2"
>
{m.doc_download_link()}
</a>

2
frontend/src/lib/document/viewer/PdfViewer.svelte.test.ts
View File

@@ -44,6 +44,8 @@ describe('PdfViewer — render failure', () => {
await expect.element(page.getByText(m.doc_render_failed())).toBeVisible();
await expect.element(page.getByRole('link', { name: m.doc_download_link() })).toBeVisible();
// Announced to assistive tech, not a silent visual-only failure.
await expect.element(page.getByRole('alert')).toBeVisible();
});
it('does not show the failure message when the page renders successfully', async () => {