From dfdcacdb852c79c804f53607617f8e37275072bb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 09:53:18 +0200
Subject: [PATCH] feat(documents): localise timeline bar aria-label (#385)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the raw "1915-08 · 5" aria-label, which a screen reader
announces as "1915 dash 08 middle dot 5", with the i18n template
timeline_bar_aria("{when}, {count} ...") and a getLocale-formatted
month/year string. Closes Leonie's WCAG 1.3.1 / 4.1.2 finding and
Felix's localisation flag.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  1 +
 frontend/messages/en.json                     |  1 +
 frontend/messages/es.json                     |  1 +
 .../lib/document/TimelineDensityFilter.svelte |  5 ++-
 .../TimelineDensityFilter.svelte.spec.ts      | 37 +++++++++++++++++--
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index ee79f59f..4c4caeb3 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -1050,5 +1050,6 @@
 	"timeline_aria_label": "Zeitachse Dokumentdichte",
 	"timeline_clear_selection": "Auswahl zurücksetzen",
 	"timeline_zoom_reset": "Zurück zur Übersicht",
+	"timeline_bar_aria": "{when}, {count} Dokumente",
 	"timeline_dragging_aria_live": "Zeitraum {from} bis {to} ausgewählt"
 }
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index f0f2abfe..536ca0fb 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1050,5 +1050,6 @@
 	"timeline_aria_label": "Document density timeline",
 	"timeline_clear_selection": "Clear selection",
 	"timeline_zoom_reset": "Reset zoom",
+	"timeline_bar_aria": "{when}, {count} documents",
 	"timeline_dragging_aria_live": "Range {from} to {to} selected"
 }
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 5e507972..f4677d90 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -1050,5 +1050,6 @@
 	"timeline_aria_label": "Cronología de densidad de documentos",
 	"timeline_clear_selection": "Borrar selección",
 	"timeline_zoom_reset": "Restablecer zoom",
+	"timeline_bar_aria": "{when}, {count} documentos",
 	"timeline_dragging_aria_live": "Rango {from} a {to} seleccionado"
 }
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 6b32cbd1..9a775080 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -260,7 +260,10 @@ const omitTickYear = $derived.by(() => {
 						<button
 							type="button"
 							data-testid="timeline-bar"
-							aria-label="{bucket.month} · {bucket.count}"
+							aria-label={m.timeline_bar_aria({
+								when: formatTickLabel(bucket.month, getLocale()),
+								count: bucket.count
+							})}
 							aria-pressed={isSelected(bucket.month)}
 							onpointerdown={(e) => handlePointerDown(e, i)}
 							onpointerenter={() => handlePointerEnter(i)}
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
index db424dd8..3521b788 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
@@ -3,6 +3,8 @@ import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import { tick } from 'svelte';
 import TimelineDensityFilter from './TimelineDensityFilter.svelte';
+import { formatTickLabel } from './timeline';
+import { getLocale } from '$lib/paraglide/runtime';
 import type { components } from '$lib/generated/api';
 
 type MonthBucket = components['schemas']['MonthBucket'];
@@ -206,8 +208,11 @@ describe('TimelineDensityFilter — year-granularity fallback', () => {
 
 		const bars = document.querySelectorAll('[data-testid="timeline-bar"]');
 		expect(bars.length).toBe(21);
-		const firstLabel = bars[0].getAttribute('aria-label');
-		expect(firstLabel?.startsWith('1900 ·')).toBe(true);
+		const firstLabel = bars[0].getAttribute('aria-label') ?? '';
+		// Localised, not the raw machine string "1900 · 1".
+		expect(firstLabel).not.toMatch(/^\d{4} · \d+$/);
+		expect(firstLabel).toContain('1900');
+		expect(firstLabel).toContain('1');
 	});
 
 	it('clicking a year bar zooms into that year (filter + zoom atomic)', async () => {
@@ -293,8 +298,32 @@ describe('TimelineDensityFilter — zoom', () => {
 		const bars = document.querySelectorAll('[data-testid="timeline-bar"]');
 		// 3 months in zoom range
 		expect(bars.length).toBe(3);
-		expect(bars[0].getAttribute('aria-label')?.startsWith('1910-06 ·')).toBe(true);
-		expect(bars[2].getAttribute('aria-label')?.startsWith('1910-08 ·')).toBe(true);
+		const firstLabel = bars[0].getAttribute('aria-label') ?? '';
+		const lastLabel = bars[2].getAttribute('aria-label') ?? '';
+		// Localised — must NOT contain the raw "YYYY-MM" machine string.
+		expect(firstLabel).not.toMatch(/\d{4}-\d{2}/);
+		expect(lastLabel).not.toMatch(/\d{4}-\d{2}/);
+		expect(firstLabel).toContain(formatTickLabel('1910-06', getLocale()));
+		expect(lastLabel).toContain(formatTickLabel('1910-08', getLocale()));
+	});
+});
+
+describe('TimelineDensityFilter — accessibility', () => {
+	it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
+		render(
+			TimelineDensityFilter,
+			makeProps({
+				density: [{ month: '1915-08', count: 5 }],
+				minDate: '1915-08-01',
+				maxDate: '1915-08-31'
+			})
+		);
+
+		const bar = document.querySelector('[data-testid="timeline-bar"]') as HTMLElement;
+		const label = bar.getAttribute('aria-label') ?? '';
+		expect(label).not.toMatch(/1915-08/);
+		expect(label).toContain(formatTickLabel('1915-08', getLocale()));
+		expect(label).toContain('5');
 	});
 });