From 96d9ff5db15db84daad279011e8d4755af01602f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 20:32:21 +0200
Subject: [PATCH] fix(PersonHoverCard): move chip colon into DOM for consistent
 screen reader announcement

Replaces CSS ::after { content: ':' } with literal colon inside the
chip-type span. CSS-generated content is announced inconsistently
across NVDA+Chrome and VoiceOver+Safari; a real text node is always
reliable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/PersonHoverCard.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/PersonHoverCard.svelte b/frontend/src/lib/components/PersonHoverCard.svelte
index 95a94699..ac599120 100644
--- a/frontend/src/lib/components/PersonHoverCard.svelte
+++ b/frontend/src/lib/components/PersonHoverCard.svelte
@@ -131,7 +131,7 @@ const showMaidenName = $derived(
 				<div class="chips" data-testid="person-hover-card-chips">
 					{#each familyChips as chip (chip.id)}
 						<span class="chip">
-							<span class="chip-type">{chipLabel(chip, personId)}</span>
+							<span class="chip-type">{chipLabel(chip, personId)}:</span>
 							{otherName(chip, personId)}
 						</span>
 					{/each}
@@ -261,10 +261,6 @@ const showMaidenName = $derived(
 	opacity: 0.7;
 }
 
-.chip-type::after {
-	content: ':';
-}
-
 .notes {
 	font-size: 13px;
 	color: var(--c-ink-2);