feat(document): explain auto-generated title under the edit title field (#726)

Adds the FR-TITLE-005 helper line under the title input in DescriptionSection, shown only
on the single-document edit form via a new showTitleHelp prop (off for the new-document and
bulk-edit forms). It is wired to the input with aria-describedby and uses text-ink-3 (WCAG AA
on bg-surface). New Paraglide key form_helper_title_autogenerated in de/en/es. Adds a
component test for the helper + aria wiring and an end-to-end pass: create an auto-titled doc,
edit its date, and see the title follow on the detail page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/document/DescriptionSection.svelte

@@ -17,6 +17,7 @@ let {
 	titleRequired = false,
 	suggestedTitle = '',
 	hideTitle = false,
+	showTitleHelp = false,
 	editMode = false
 }: {
 	tags?: Tag[];
@@ -31,6 +32,7 @@ let {
 	titleRequired?: boolean;
 	suggestedTitle?: string;
 	hideTitle?: boolean;
+	showTitleHelp?: boolean;
 	editMode?: boolean;
 } = $props();
 
@@ -72,8 +74,14 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
 						titleDirty = true;
 					}}
 					required={titleRequired}
+					aria-describedby={showTitleHelp ? 'title-help' : undefined}
 					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">
+						{m.form_helper_title_autogenerated()}
+					</p>
+				{/if}
 			</div>
 		{/if}
 

frontend/src/lib/document/DescriptionSection.svelte.spec.ts

@@ -55,3 +55,26 @@ describe('DescriptionSection — onMount seeding (Felix B1/B2 fix regression fen
 		expect(input.value).toBe('Parent Value');
 	});
 });
+
+describe('DescriptionSection — auto-generated title helper (FR-TITLE-005)', () => {
+	it('shows the helper 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);
+		const titleInput = document.querySelector('input#title') as HTMLInputElement;
+		expect(titleInput.getAttribute('aria-describedby')).toBe('title-help');
+	});
+
+	it('omits the helper by default (e.g. the new-document form)', async () => {
+		render(DescriptionSection, {});
+		expect(document.querySelector('#title-help')).toBeNull();
+		const titleInput = document.querySelector('input#title') as HTMLInputElement;
+		expect(titleInput.getAttribute('aria-describedby')).toBeNull();
+	});
+
+	it('omits the helper when the title field is hidden (bulk edit)', async () => {
+		render(DescriptionSection, { showTitleHelp: true, hideTitle: true });
+		expect(document.querySelector('#title-help')).toBeNull();
+	});
+});

frontend/src/lib/document/DocumentEditLayout.svelte

@@ -221,6 +221,7 @@ async function handleReplaceFile(e: Event) {
 					initialArchiveFolder={doc.archiveFolder ?? ''}
 					initialSummary={doc.summary ?? ''}
 					titleRequired={true}
+					showTitleHelp={true}
 				/>
 			</form>