From 48da819a54752862468594dd9564445d4d93f434 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 8 May 2026 11:00:15 +0200 Subject: [PATCH] feat(documents): focus-visible ring on timeline bar buttons (#385) Bar buttons rendered with bg-transparent + p-0 fell back to the default browser outline, which is invisible against bg-surface for keyboard users. Adds the project-standard focus ring (ring-2/brand-navy/offset-2) so the focused bar reads as focused. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/document/TimelineBars.svelte | 2 +- .../src/lib/document/TimelineDensityFilter.svelte.spec.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) 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', () => {