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');
 	});
 });