From 794000cbd1162dbcbf033bb72c54b26d08828e30 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 09:23:39 +0200
Subject: [PATCH] fix(admin): locale-agnostic OcrHealthBar tests, focus rings
 on all OCR links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OcrHealthBar spec used /online/i and /offline/i text matchers that would fail
in Spanish locale — replaced with CSS class assertions on role="img" dot.

Added focus-visible:ring-2/ring-brand-navy/rounded-sm to all links in OCR
admin pages (OcrModelsTable person+details, global history link, back-links
in global and personId detail pages) to satisfy WCAG 2.4.7.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/ocr/+page.svelte                | 2 +-
 frontend/src/routes/admin/ocr/OcrHealthBar.svelte.spec.ts | 7 ++++---
 frontend/src/routes/admin/ocr/OcrModelsTable.svelte       | 8 ++++++--
 frontend/src/routes/admin/ocr/[personId]/+page.svelte     | 2 +-
 frontend/src/routes/admin/ocr/global/+page.svelte         | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/admin/ocr/+page.svelte b/frontend/src/routes/admin/ocr/+page.svelte
index a068f01f..f352a030 100644
--- a/frontend/src/routes/admin/ocr/+page.svelte
+++ b/frontend/src/routes/admin/ocr/+page.svelte
@@ -34,7 +34,7 @@ const { trainingInfo } = $derived(data);
 			</h2>
 			<a
 				href="/admin/ocr/global"
-				class="text-xs font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+				class="text-xs font-medium text-brand-navy/60 transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 			>
 				{m.ocr_global_history_link()}
 			</a>
diff --git a/frontend/src/routes/admin/ocr/OcrHealthBar.svelte.spec.ts b/frontend/src/routes/admin/ocr/OcrHealthBar.svelte.spec.ts
index 5e0a561b..486cfa05 100644
--- a/frontend/src/routes/admin/ocr/OcrHealthBar.svelte.spec.ts
+++ b/frontend/src/routes/admin/ocr/OcrHealthBar.svelte.spec.ts
@@ -1,6 +1,5 @@
 import { afterEach, describe, it, expect } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
 import OcrHealthBar from './OcrHealthBar.svelte';
 
 afterEach(cleanup);
@@ -8,11 +7,13 @@ afterEach(cleanup);
 describe('OcrHealthBar', () => {
 	it('shows online status when OCR service is available', async () => {
 		render(OcrHealthBar, { ocrServiceAvailable: true });
-		await expect.element(page.getByText(/online/i)).toBeInTheDocument();
+		const dot = document.querySelector('[role="img"]');
+		expect(dot?.className).toContain('bg-green-500');
 	});
 
 	it('shows offline status when OCR service is unavailable', async () => {
 		render(OcrHealthBar, { ocrServiceAvailable: false });
-		await expect.element(page.getByText(/offline/i)).toBeInTheDocument();
+		const dot = document.querySelector('[role="img"]');
+		expect(dot?.className).toContain('bg-red-500');
 	});
 });
diff --git a/frontend/src/routes/admin/ocr/OcrModelsTable.svelte b/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
index da14705f..8da78b5e 100644
--- a/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
+++ b/frontend/src/routes/admin/ocr/OcrModelsTable.svelte
@@ -42,7 +42,10 @@ let {
 			{#each senderModels as model (model.id)}
 				<tr>
 					<td class="border-brand-sand/50 border-b py-3">
-						<a href="/admin/ocr/{model.personId}" class="text-brand-navy hover:underline">
+						<a
+							href="/admin/ocr/{model.personId}"
+							class="text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+						>
 							{personNames[model.personId] ?? model.personId}
 						</a>
 					</td>
@@ -58,7 +61,8 @@ let {
 					<td class="border-brand-sand/50 border-b py-3">
 						<a
 							href="/admin/ocr/{model.personId}"
-							class="font-medium text-brand-navy hover:underline">{m.ocr_table_details()}</a
+							class="font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+							>{m.ocr_table_details()}</a
 						>
 					</td>
 				</tr>
diff --git a/frontend/src/routes/admin/ocr/[personId]/+page.svelte b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
index 9447b6f6..d7302d52 100644
--- a/frontend/src/routes/admin/ocr/[personId]/+page.svelte
+++ b/frontend/src/routes/admin/ocr/[personId]/+page.svelte
@@ -11,7 +11,7 @@ const personName = $derived(data.history.personNames?.[params.personId] ?? 'Unkn
 	<div class="flex items-center gap-4">
 		<a
 			href="/admin/ocr"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 		>
 			<svg
 				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
diff --git a/frontend/src/routes/admin/ocr/global/+page.svelte b/frontend/src/routes/admin/ocr/global/+page.svelte
index fa22fe53..a6ed04b5 100644
--- a/frontend/src/routes/admin/ocr/global/+page.svelte
+++ b/frontend/src/routes/admin/ocr/global/+page.svelte
@@ -10,7 +10,7 @@ let { data }: { data: PageData } = $props();
 	<div class="flex items-center gap-4">
 		<a
 			href="/admin/ocr"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 		>
 			<svg
 				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"