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

i18n(briefwechsel): DistributionBar reads text + aria-label via Paraglide

Browse Source 
Drops the hardcoded German strings ("Briefverteilung in diesem Zeitraum",
"{n} von {name}") and routes every visible + assistive-tech string
through dist_bar_aria and dist_bar_segment message keys. An English
or Spanish user now sees "from" / "de" instead of "von" both on
screen and in the aria-label their screen reader announces.

Refs #305
Fixes @leonievoss i18n concern from PR review

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-23 20:28:32 +02:00
committed by marcel
parent b9dda9a938
commit d4617a96d1
5 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/components/DistributionBar.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
interface Props {
outCount: number;
inCount: number;
@@ -12,16 +14,20 @@ const total = $derived(outCount + inCount);
const outPct = $derived(total > 0 ? (outCount / total) * 100 : 0);
const shortSenderName = $derived(senderName.split(' ')[0] ?? senderName);
const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
const ariaLabel = $derived(m.dist_bar_aria({ outCount, senderName, inCount, receiverName }));
const outSegmentText = $derived(m.dist_bar_segment({ count: outCount, name: shortSenderName }));
const inSegmentText = $derived(m.dist_bar_segment({ count: inCount, name: shortReceiverName }));
</script>
<div
class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
role="img"
aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName}, {inCount} von {receiverName}"
aria-label={ariaLabel}
>
<div class="flex justify-between text-sm font-bold">
<span class="inline-flex items-center gap-1 text-primary"
>{outCount} von {shortSenderName}
>{outSegmentText}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
alt=""
@@ -30,7 +36,7 @@ const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
/></span
>
<span class="inline-flex items-center gap-1 text-accent"
>{inCount} von {shortReceiverName}
>{inSegmentText}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
alt=""