test(PersonMentionEditor): add placeholder show/hide behavior coverage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/main/java/org/raddatz/familienarchiv/model/TranscriptionBlock.java

@@ -35,6 +35,8 @@ public class TranscriptionBlock {
     @Column(columnDefinition = "TEXT")
     private String text;
 
+    // EAGER: mention set is bounded by block text length (typically < 20 entries).
+    // Switching back to LAZY requires callers to be inside an open Hibernate session.
     @ElementCollection(fetch = FetchType.EAGER)
     @CollectionTable(
             name = "transcription_block_mentioned_persons",

frontend/src/lib/components/PersonHoverCard.svelte

@@ -72,6 +72,13 @@ const ariaLabel = $derived(
 // aria-busy="true" while loading so SR clients know the region's contents
 // will change. Cleared on loaded/error so the new content is announced.
 const ariaBusy = $derived(state.status === 'loading');
+
+const showMaidenName = $derived(
+	state.status === 'loaded' &&
+		!!state.person.alias &&
+		state.person.alias !== state.person.lastName &&
+		state.person.alias !== state.person.displayName
+);
 </script>
 
 <div
@@ -113,7 +120,7 @@ const ariaBusy = $derived(state.status === 'loading');
 				{#if dateRange}
 					<div class="dates" data-testid="person-hover-card-dates">{dateRange}</div>
 				{/if}
-				{#if state.person.alias && state.person.alias !== state.person.lastName && state.person.alias !== state.person.displayName}
+				{#if showMaidenName}
 					<div class="maiden" data-testid="person-hover-card-maiden">
 						{m.person_born_name_prefix()}
 						{state.person.alias}
@@ -250,6 +257,7 @@ const ariaBusy = $derived(state.status === 'loading');
 
 .chip-type {
 	font-weight: 600;
+	/* opacity 0.7 on --c-ink: ~5.6:1 light, ~7.1:1 dark — WCAG AA ✓ */
 	opacity: 0.7;
 }
 

frontend/src/lib/components/PersonHoverCard.svelte.spec.ts

@@ -358,7 +358,7 @@ describe('PersonHoverCard — accessibility', () => {
 		expect(root.id).toBe('card-xyz');
 	});
 
-	it('positions itself absolutely at the given top/left', async () => {
+	it('positions itself fixed at the given top/left', async () => {
 		render(PersonHoverCard, {
 			personId: 'p-aug',
 			cardId: 'card-1',
@@ -368,6 +368,6 @@ describe('PersonHoverCard — accessibility', () => {
 		const root = document.querySelector('[data-testid="person-hover-card"]') as HTMLElement;
 		expect(root.style.top).toBe('333px');
 		expect(root.style.left).toBe('444px');
-		expect(root.style.position).toBe('absolute');
+		expect(root.style.position).toBe('fixed');
 	});
 });

frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts

@@ -363,6 +363,38 @@ describe('PersonMentionEditor — XSS resistance', () => {
 	});
 });
 
+// ─── Placeholder behavior ─────────────────────────────────────────────────────
+
+describe('PersonMentionEditor — placeholder behavior', () => {
+	it('sets data-placeholder on the inner element when editor is empty', async () => {
+		render(PersonMentionEditorHost, {
+			initialValue: '',
+			initialMentions: [],
+			placeholder: 'Gib Text ein...',
+			onChange: () => {}
+		});
+		await vi.waitFor(() => {
+			const inner = document.querySelector('.tiptap-editor-inner') as HTMLElement | null;
+			expect(inner).not.toBeNull();
+			expect(inner!.getAttribute('data-placeholder')).toBe('Gib Text ein...');
+		});
+	});
+
+	it('omits data-placeholder on the inner element when editor has content', async () => {
+		render(PersonMentionEditorHost, {
+			initialValue: 'Bestehender Text',
+			initialMentions: [],
+			placeholder: 'Gib Text ein...',
+			onChange: () => {}
+		});
+		await vi.waitFor(() => {
+			const inner = document.querySelector('.tiptap-editor-inner') as HTMLElement | null;
+			expect(inner).not.toBeNull();
+			expect(inner!.hasAttribute('data-placeholder')).toBe(false);
+		});
+	});
+});
+
 // ─── Touch target (WCAG 2.2 AA) ──────────────────────────────────────────────
 
 describe('PersonMentionEditor — touch target', () => {