From 0693cfddd1a140386fb72aa3cffebe2257d7406a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 4 Jun 2026 17:15:46 +0200
Subject: [PATCH] fix(document): enlarge auto-title helper to 14px and assert
 its localized text (#726)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps the title helper from text-xs (12px) to text-sm (14px) for the 60+ audience (FR-005
prefers a larger size than the field hints) and tightens the component test to assert the
actual localized string and the 14px class — addresses Leonie's and Sara's review notes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/document/DescriptionSection.svelte        | 2 +-
 .../src/lib/document/DescriptionSection.svelte.spec.ts     | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/document/DescriptionSection.svelte b/frontend/src/lib/document/DescriptionSection.svelte
index 3e4f12b3..59584959 100644
--- a/frontend/src/lib/document/DescriptionSection.svelte
+++ b/frontend/src/lib/document/DescriptionSection.svelte
@@ -78,7 +78,7 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
 					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 				{#if showTitleHelp}
-					<p id="title-help" class="mt-1 text-xs text-ink-3">
+					<p id="title-help" class="mt-1 text-sm text-ink-3">
 						{m.form_helper_title_autogenerated()}
 					</p>
 				{/if}
diff --git a/frontend/src/lib/document/DescriptionSection.svelte.spec.ts b/frontend/src/lib/document/DescriptionSection.svelte.spec.ts
index bc47a98a..a2754a76 100644
--- a/frontend/src/lib/document/DescriptionSection.svelte.spec.ts
+++ b/frontend/src/lib/document/DescriptionSection.svelte.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import DescriptionSection from './DescriptionSection.svelte';
+import { m } from '$lib/paraglide/messages.js';
 
 afterEach(() => cleanup());
 
@@ -57,11 +58,13 @@ describe('DescriptionSection — onMount seeding (Felix B1/B2 fix regression fen
 });
 
 describe('DescriptionSection — auto-generated title helper (FR-TITLE-005)', () => {
-	it('shows the helper and wires aria-describedby when showTitleHelp is set', async () => {
+	it('shows the helper with the localized text and wires aria-describedby when showTitleHelp is set', async () => {
 		render(DescriptionSection, { showTitleHelp: true });
 		const help = document.querySelector('#title-help') as HTMLElement;
 		expect(help).not.toBeNull();
-		expect(help.textContent?.trim().length ?? 0).toBeGreaterThan(0);
+		expect(help.textContent?.trim()).toBe(m.form_helper_title_autogenerated());
+		// ≥14px for the 60+ audience (FR-005 prefers a larger size than the 12px field hints).
+		expect(help.classList.contains('text-sm')).toBe(true);
 		const titleInput = document.querySelector('input#title') as HTMLInputElement;
 		expect(titleInput.getAttribute('aria-describedby')).toBe('title-help');
 	});