d4617a96d1
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>
61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
interface Props {
|
|
outCount: number;
|
|
inCount: number;
|
|
senderName: string;
|
|
receiverName: string;
|
|
}
|
|
|
|
let { outCount, inCount, senderName, receiverName }: Props = $props();
|
|
|
|
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={ariaLabel}
|
|
>
|
|
<div class="flex justify-between text-sm font-bold">
|
|
<span class="inline-flex items-center gap-1 text-primary"
|
|
>{outSegmentText}
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="inline h-3.5 w-3.5 opacity-60"
|
|
/></span
|
|
>
|
|
<span class="inline-flex items-center gap-1 text-accent"
|
|
>{inSegmentText}
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="inline h-3.5 w-3.5 opacity-60"
|
|
/></span
|
|
>
|
|
</div>
|
|
<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
|
|
<div
|
|
data-testid="dist-bar-segment"
|
|
class="h-full bg-primary transition-all"
|
|
style="width: {outPct}%"
|
|
></div>
|
|
<div
|
|
data-testid="dist-bar-segment"
|
|
class="h-full bg-accent transition-all"
|
|
style="width: {100 - outPct}%"
|
|
></div>
|
|
</div>
|
|
</div>
|