diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 9a775080..973d3c1b 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -241,7 +241,7 @@ const omitTickYear = $derived.by(() => {
>
{
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
index 3521b788..5dab3d63 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
@@ -309,6 +309,21 @@ describe('TimelineDensityFilter — zoom', () => {
});
describe('TimelineDensityFilter — accessibility', () => {
+ it('Y-axis labels meet the 12px minimum font floor (Tailwind text-xs)', async () => {
+ render(TimelineDensityFilter, makeProps());
+ const yAxis = document.querySelector('[data-testid="timeline-y-axis"]') as HTMLElement;
+ expect(yAxis.classList.contains('text-xs')).toBe(true);
+ expect(yAxis.className).not.toMatch(/text-\[10px\]/);
+ });
+
+ it('X-axis row uses text-xs and h-4 to fit the 12px line height', async () => {
+ render(TimelineDensityFilter, makeProps());
+ const xAxis = document.querySelector('[data-testid="timeline-x-axis"]') as HTMLElement;
+ expect(xAxis.classList.contains('text-xs')).toBe(true);
+ expect(xAxis.classList.contains('h-4')).toBe(true);
+ expect(xAxis.className).not.toMatch(/text-\[10px\]/);
+ });
+
it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
render(
TimelineDensityFilter,