From 99847980d21a62bd382a96e4632db901f3ea0125 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 14 Apr 2026 10:06:11 +0200
Subject: [PATCH] fix(a11y): replace unicode glyphs with SVG icons in
 TrainingHistory status badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 1.4.1 (Use of Color) requires non-color redundant cues for status.
The unicode ✓/✗ characters had inconsistent screen-reader support.
Replaced with explicit aria-hidden SVG icons (checkmark / x-circle)
alongside the translated status text labels.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/TrainingHistory.svelte | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/TrainingHistory.svelte b/frontend/src/lib/components/TrainingHistory.svelte
index f8b23f49..ea194cd4 100644
--- a/frontend/src/lib/components/TrainingHistory.svelte
+++ b/frontend/src/lib/components/TrainingHistory.svelte
@@ -61,19 +61,50 @@ function formatCer(cer: number | undefined | null): string {
 						{#if run.status === 'DONE'}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700"
-								>✓ {m.training_status_done()}</span
 							>
+								<svg
+									aria-hidden="true"
+									class="h-3 w-3 shrink-0"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+								{m.training_status_done()}
+							</span>
 						{:else if run.status === 'FAILED'}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700"
-								title={run.errorMessage}>✗ {m.training_status_failed()}</span
+								title={run.errorMessage}
 							>
+								<svg
+									aria-hidden="true"
+									class="h-3 w-3 shrink-0"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+								{m.training_status_failed()}
+							</span>
 						{:else}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-700"
-								><span class="h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-500"
-								></span>{m.training_status_running()}</span
 							>
+								<span
+									aria-hidden="true"
+									class="h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-500"
+								></span>
+								{m.training_status_running()}
+							</span>
 						{/if}
 					</td>
 					<td class="py-2 text-right text-ink-2">{run.blockCount}</td>