From 1d6016cb19571e765672abd22d38b6623751d4d9 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 11:03:19 +0200
Subject: [PATCH] fix(documents): pluralise timeline bar aria-label by count
 (#385)

The flat "{count} Dokumente / documents / documentos" keys read as
"1 Dokumente" / "1 documents" / "1 documentos" to a screen reader
when only one document falls in the month bucket. Splits each
locale into _singular + _plural keys and picks the form by count
in TimelineBars, mirroring the existing upload_banner_singular /
_plural pattern in this project.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  3 +-
 frontend/messages/en.json                     |  3 +-
 frontend/messages/es.json                     |  3 +-
 frontend/src/lib/document/TimelineBars.svelte | 10 ++++---
 .../TimelineDensityFilter.svelte.spec.ts      | 30 +++++++++++++++++++
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 4c4caeb3..e2a06192 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -1050,6 +1050,7 @@
 	"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_bar_aria_singular": "{when}, 1 Dokument",
+	"timeline_bar_aria_plural": "{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 536ca0fb..10c3bf2e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1050,6 +1050,7 @@
 	"timeline_aria_label": "Document density timeline",
 	"timeline_clear_selection": "Clear selection",
 	"timeline_zoom_reset": "Reset zoom",
-	"timeline_bar_aria": "{when}, {count} documents",
+	"timeline_bar_aria_singular": "{when}, 1 document",
+	"timeline_bar_aria_plural": "{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 f4677d90..ca2439d9 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -1050,6 +1050,7 @@
 	"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_bar_aria_singular": "{when}, 1 documento",
+	"timeline_bar_aria_plural": "{when}, {count} documentos",
 	"timeline_dragging_aria_live": "Rango {from} a {to} seleccionado"
 }
diff --git a/frontend/src/lib/document/TimelineBars.svelte b/frontend/src/lib/document/TimelineBars.svelte
index 56bc96ea..cac4c180 100644
--- a/frontend/src/lib/document/TimelineBars.svelte
+++ b/frontend/src/lib/document/TimelineBars.svelte
@@ -51,10 +51,12 @@ function barHeight(count: number): number {
 		<button
 			type="button"
 			data-testid="timeline-bar"
-			aria-label={m.timeline_bar_aria({
-				when: formatTickLabel(bucket.month, getLocale()),
-				count: bucket.count
-			})}
+			aria-label={bucket.count === 1
+				? m.timeline_bar_aria_singular({ when: formatTickLabel(bucket.month, getLocale()) })
+				: m.timeline_bar_aria_plural({
+						when: formatTickLabel(bucket.month, getLocale()),
+						count: bucket.count
+					})}
 			aria-pressed={isSelected(bucket.month)}
 			onpointerdown={(e) => onbarpointerdown(e, i)}
 			onpointerenter={() => onbarpointerenter(i)}
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
index c09c239c..05c9c84c 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
@@ -350,6 +350,36 @@ describe('TimelineDensityFilter — accessibility', () => {
 		expect(xAxis.className).not.toMatch(/text-\[10px\]/);
 	});
 
+	it('bar aria-label uses the singular noun form when count is 1', async () => {
+		render(
+			TimelineDensityFilter,
+			makeProps({
+				density: [{ month: '1915-08', count: 1 }],
+				minDate: '1915-08-01',
+				maxDate: '1915-08-31'
+			})
+		);
+		const bar = document.querySelector('[data-testid="timeline-bar"]') as HTMLElement;
+		const label = bar.getAttribute('aria-label') ?? '';
+		// "documents", "Dokumente", "documentos" are the plural-only forms in our 3 locales.
+		expect(label).not.toMatch(/\b(?:documents|Dokumente|documentos)\b/);
+		expect(label).toMatch(/\b1 (?:document|Dokument|documento)\b/);
+	});
+
+	it('bar aria-label uses the plural noun form when count is not 1', 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).toMatch(/\b5 (?:documents|Dokumente|documentos)\b/);
+	});
+
 	it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
 		render(
 			TimelineDensityFilter,