From 9b6561562d485a5c3e731d0e783180ef4d47c643 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 22:20:16 +0200
Subject: [PATCH] a11y(transcription): announce @mention empty state via
 aria-live
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collapse the two empty-state branches into a single p[aria-live=polite]
whose text derives from the search query. Screen readers now hear the
transition between "Namen eingeben…" and "Keine Personen gefunden".
Leonie FINDING-MENTION-002 on PR #629.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../shared/discussion/MentionDropdown.svelte  | 19 ++++++++++---------
 .../discussion/MentionDropdown.svelte.test.ts | 10 ++++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
index 500b9ada..39b115cf 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
@@ -178,15 +178,16 @@ function selectItem(item: Person) {
 		</div>
 	</div>
 	{#if model.items.length === 0}
-		{#if searchQuery.trim() === ''}
-			<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
-				{m.person_mention_search_prompt()}
-			</p>
-		{:else}
-			<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
-				{m.person_mention_popup_empty()}
-			</p>
-		{/if}
+		<!--
+			Single live region so screen readers announce the transition between
+			"Namen eingeben…" (empty search) and "Keine Personen gefunden"
+			(searched but empty). Leonie FINDING-MENTION-002 on PR #629.
+		-->
+		<p class="px-3 py-2.5 font-sans text-sm text-ink-3" aria-live="polite">
+			{searchQuery.trim() === ''
+				? m.person_mention_search_prompt()
+				: m.person_mention_popup_empty()}
+		</p>
 		<!--
 			Empty-state escape hatch — without it the transcriber has to close
 			the dropdown, navigate to /persons/new, come back, and re-type the
diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
index f194f54f..8fed26d2 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
@@ -154,6 +154,16 @@ describe('MentionDropdown — search input', () => {
 		expect(input.className).toContain('min-h-[44px]');
 	});
 
+	it('announces empty-state copy via aria-live="polite" (Leonie FINDING-MENTION-002 on PR #629)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const listbox = document.querySelector('[role="listbox"]');
+		expect(listbox).not.toBeNull();
+		const live = listbox!.querySelector('p[aria-live="polite"]');
+		expect(live).not.toBeNull();
+		expect(live!.textContent ?? '').toContain(m.person_mention_search_prompt());
+	});
+
 	it('renders the magnifier icon at h-5 w-5 with text-ink-2 (Leonie BLOCKER on PR #629)', async () => {
 		render(MentionDropdown, { props: { model: baseModel() } });