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

fix(a11y): replace unicode glyphs with SVG icons in TrainingHistory status badges

Browse Source 
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>
This commit is contained in:
Marcel
2026-04-14 10:06:11 +02:00
parent 8f6e398af7
commit 99847980d2
1 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/lib/components/TrainingHistory.svelte
View File

@@ -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>