marcel/familienarchiv
1
0
Fork 0
Code Issues 105 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

a11y(transcription): persistent aria-live region for @mention dropdown

Browse Source 
The aria-live region previously lived inside {#if items.length === 0} so
it remounted whenever items transitioned between empty and populated —
VoiceOver in particular swallows announcements from freshly-mounted live
regions, and the "N persons found" announcement was missing entirely on
the populated branch. Move the live region above the conditional so the
element persists, and announce a localized "1 person found" / "N persons
found" count on the populated branch. The visible empty-state <p> stays
as a visual cue (no aria-live). Leonie #3 on PR #629 round 3.

Adds person_mention_results_count_singular / _plural in de/en/es.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-20 00:13:47 +02:00
parent 021a0c6cb3
commit 1757b01af1
6 changed files with 106 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/lib/shared/discussion/MentionDropdown.svelte
View File

@@ -193,13 +193,31 @@ function selectItem(item: Person) {
/>
</div>
</div>
<!--
Persistent aria-live region — lives ABOVE the conditional branches so the
element never unmounts when items transition between empty and populated.
VoiceOver in particular swallows announcements from freshly-mounted live
regions, and the previous (conditional-inside) markup silently dropped
the "N persons found" announcement when results populated. Leonie #3 on
PR #629 round 3.
-->
<p class="sr-only" aria-live="polite">
{#if model.items.length === 0}
{searchQuery.trim() === ''
? m.person_mention_search_prompt()
: m.person_mention_popup_empty()}
{:else if model.items.length === 1}
{m.person_mention_results_count_singular()}
{:else}
{m.person_mention_results_count_plural({ count: model.items.length })}
{/if}
</p>
{#if model.items.length === 0}
<!--
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.
Visible empty-state copy — visual-only. The persistent sr-only <p>
above is the announcer. Leonie #3 on PR #629 round 3.
-->
<p class="px-3 py-2.5 font-sans text-sm text-ink-3" aria-live="polite">
<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
{searchQuery.trim() === ''
? m.person_mention_search_prompt()
: m.person_mention_popup_empty()}