From 6a5083f9bccfa5c42f1d877817fe30f22cc2fa60 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 22:18:42 +0200
Subject: [PATCH] a11y(transcription): enlarge @mention magnifier and darken
 contrast

Bump h-4 w-4 to h-5 w-5 and text-ink-3 to text-ink-2 so the icon
carries enough visual weight to identify the input region without a
visible text label. Leonie FINDING-MENTION-001 on PR #629.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/shared/discussion/MentionDropdown.svelte |  2 +-
 .../shared/discussion/MentionDropdown.svelte.test.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
index 4da12b59..500b9ada 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
@@ -157,7 +157,7 @@ function selectItem(item: Person) {
 				fill="none"
 				stroke="currentColor"
 				stroke-width="2"
-				class="h-4 w-4 shrink-0 text-ink-3"
+				class="h-5 w-5 shrink-0 text-ink-2"
 			>
 				<circle cx="11" cy="11" r="7" />
 				<path d="m20 20-3.5-3.5" stroke-linecap="round" />
diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
index a6a10dac..f194f54f 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
@@ -154,6 +154,18 @@ describe('MentionDropdown — search input', () => {
 		expect(input.className).toContain('min-h-[44px]');
 	});
 
+	it('renders the magnifier icon at h-5 w-5 with text-ink-2 (Leonie BLOCKER on PR #629)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const icon = document.querySelector('[data-test-search-input]')
+			?.previousElementSibling as SVGElement | null;
+		expect(icon).not.toBeNull();
+		expect(icon!.tagName.toLowerCase()).toBe('svg');
+		expect(icon!.getAttribute('class') ?? '').toContain('h-5');
+		expect(icon!.getAttribute('class') ?? '').toContain('w-5');
+		expect(icon!.getAttribute('class') ?? '').toContain('text-ink-2');
+	});
+
 	it('caps the search input at maxlength=100 (CWE-400 amplification — Nora on PR #629)', async () => {
 		render(MentionDropdown, { props: { model: baseModel() } });