marcel/familienarchiv
1
0
Fork 0
Code Issues 113 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(documents): pluralise timeline bar aria-label by count (#385)

Browse Source 
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>
This commit is contained in:
Marcel
2026-05-08 11:03:19 +02:00
parent 48da819a54
commit 1d6016cb19
5 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/document/TimelineBars.svelte
View File

@@ -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)}

30
frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
View File

@@ -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,