diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 7df88f45..9f8c71b8 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -165,6 +165,8 @@
"conv_hero_divider": "oder",
"conv_empty_recent_label": "Zuletzt geöffnet",
"conv_no_party": "—",
+ "dist_bar_segment": "{count} von {name}",
+ "dist_bar_aria": "Briefverteilung in diesem Zeitraum: {outCount} von {senderName}, {inCount} von {receiverName}",
"admin_heading": "Admin Dashboard",
"admin_tab_users": "Benutzer",
"admin_tab_groups": "Gruppen",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index dc5cbc93..f93f2a4e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -165,6 +165,8 @@
"conv_hero_divider": "or",
"conv_empty_recent_label": "Recently opened",
"conv_no_party": "—",
+ "dist_bar_segment": "{count} from {name}",
+ "dist_bar_aria": "Letter distribution in this period: {outCount} from {senderName}, {inCount} from {receiverName}",
"admin_heading": "Admin Dashboard",
"admin_tab_users": "Users",
"admin_tab_groups": "Groups",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 80ea31a0..7d976d46 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -165,6 +165,8 @@
"conv_hero_divider": "o",
"conv_empty_recent_label": "Recientemente abiertos",
"conv_no_party": "—",
+ "dist_bar_segment": "{count} de {name}",
+ "dist_bar_aria": "Distribución de cartas en este período: {outCount} de {senderName}, {inCount} de {receiverName}",
"admin_heading": "Panel de administración",
"admin_tab_users": "Usuarios",
"admin_tab_groups": "Grupos",
diff --git a/frontend/src/lib/components/DistributionBar.svelte b/frontend/src/lib/components/DistributionBar.svelte
index d0e52292..4b9a09ad 100644
--- a/frontend/src/lib/components/DistributionBar.svelte
+++ b/frontend/src/lib/components/DistributionBar.svelte
@@ -1,4 +1,6 @@
{outCount} von {shortSenderName}
+ >{outSegmentText}
{inCount} von {shortReceiverName}
+ >{inSegmentText}
{
});
describe('DistributionBar', () => {
- it('renders both counts and short names, and the two-tone fill bar', async () => {
+ it('renders the Paraglide aria-label and visible segments', async () => {
render(DistributionBar, {
outCount: 3,
inCount: 7,
@@ -18,11 +19,22 @@ describe('DistributionBar', () => {
const container = document.querySelector('[role="img"]') as HTMLElement;
expect(container).toBeTruthy();
- expect(container.getAttribute('aria-label')).toContain('3 von Hans Müller');
- expect(container.getAttribute('aria-label')).toContain('7 von Anna Schmidt');
- expect(container.textContent).toContain('3 von Hans');
- expect(container.textContent).toContain('7 von Anna');
+ // The aria-label must come from Paraglide, not a hardcoded German string,
+ // so the EN / ES users aren't served "Briefverteilung in diesem Zeitraum".
+ const expectedAria = m.dist_bar_aria({
+ outCount: 3,
+ senderName: 'Hans Müller',
+ inCount: 7,
+ receiverName: 'Anna Schmidt'
+ });
+ expect(container.getAttribute('aria-label')).toBe(expectedAria);
+
+ // The visible "{count} from/von {name}" spans must also come from Paraglide.
+ const outText = m.dist_bar_segment({ count: 3, name: 'Hans' });
+ const inText = m.dist_bar_segment({ count: 7, name: 'Anna' });
+ expect(container.textContent).toContain(outText);
+ expect(container.textContent).toContain(inText);
// 3/10 → 30% / 70% split on the two segments
const segments = container.querySelectorAll('[data-testid="dist-bar-segment"]');
@@ -40,7 +52,8 @@ describe('DistributionBar', () => {
});
const container = document.querySelector('[role="img"]') as HTMLElement;
- expect(container.textContent).toContain('1 von SingleWord');
+ const expected = m.dist_bar_segment({ count: 1, name: 'SingleWord' });
+ expect(container.textContent).toContain(expected);
});
it('renders a zero-percent left segment when outCount is zero', async () => {