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

25
frontend/src/lib/components/DistributionBar.svelte.spec.ts
View File

@@ -1,5 +1,6 @@
import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import * as m from '$lib/paraglide/messages.js';
import DistributionBar from './DistributionBar.svelte';
@@ -8,7 +9,7 @@ afterEach(() => {
});
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 () => {