diff --git a/frontend/src/lib/document/TimelineBars.svelte b/frontend/src/lib/document/TimelineBars.svelte
index 6e288820..56bc96ea 100644
--- a/frontend/src/lib/document/TimelineBars.svelte
+++ b/frontend/src/lib/document/TimelineBars.svelte
@@ -59,7 +59,7 @@ function barHeight(count: number): number {
 			onpointerdown={(e) => onbarpointerdown(e, i)}
 			onpointerenter={() => onbarpointerenter(i)}
 			onclick={() => onbarclick(i)}
-			class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors"
+			class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
 			class:selected={isSelected(bucket.month)}
 			class:in-drag-preview={isInDragPreview(i)}
 		>
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
index aaa7de58..c09c239c 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
@@ -324,6 +324,14 @@ describe('TimelineDensityFilter — touch targets', () => {
 		expect(clearBtn.classList.contains('w-11')).toBe(true);
 		expect(clearBtn.className).not.toMatch(/(?:^|\s)h-6(?:$|\s)/);
 	});
+
+	it('bar buttons render a focus-visible ring so keyboard users can see focus', async () => {
+		render(TimelineDensityFilter, makeProps());
+		const bar = document.querySelector('[data-testid="timeline-bar"]') as HTMLElement;
+		expect(bar.className).toMatch(/focus-visible:ring-2/);
+		expect(bar.className).toMatch(/focus-visible:ring-brand-navy/);
+		expect(bar.className).toMatch(/focus-visible:ring-offset-2/);
+	});
 });
 
 describe('TimelineDensityFilter — accessibility', () => {