From dd0a77a5a20c772787fda3cdaf9e210264aa6dd3 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 8 May 2026 11:30:25 +0200 Subject: [PATCH] feat(documents): focus-visible ring on timeline controls (#385) Co-Authored-By: Claude Sonnet 4.6 --- .../src/lib/document/TimelineControls.svelte | 4 ++-- .../TimelineDensityFilter.svelte.spec.ts | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/document/TimelineControls.svelte b/frontend/src/lib/document/TimelineControls.svelte index 401d9098..0d06af92 100644 --- a/frontend/src/lib/document/TimelineControls.svelte +++ b/frontend/src/lib/document/TimelineControls.svelte @@ -22,7 +22,7 @@ let { aria-label={m.timeline_zoom_reset()} title={m.timeline_zoom_reset()} onclick={onresetzoom} - class="hover:text-ink-1 inline-flex h-11 min-w-[44px] items-center justify-center gap-1 rounded-sm px-3 text-xs text-ink-3 hover:bg-canvas" + class="hover:text-ink-1 inline-flex h-11 min-w-[44px] items-center justify-center gap-1 rounded-sm px-3 text-xs text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none" > ↩ @@ -33,7 +33,7 @@ let { data-testid="timeline-clear" aria-label={m.timeline_clear_selection()} onclick={onclearselection} - class="hover:text-ink-1 inline-flex h-11 w-11 items-center justify-center rounded-full text-ink-3 hover:bg-canvas" + class="hover:text-ink-1 inline-flex h-11 w-11 items-center justify-center rounded-full text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none" > × diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts index 05c9c84c..fb362065 100644 --- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts +++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts @@ -332,6 +332,22 @@ describe('TimelineDensityFilter — touch targets', () => { expect(bar.className).toMatch(/focus-visible:ring-brand-navy/); expect(bar.className).toMatch(/focus-visible:ring-offset-2/); }); + + it('reset-zoom button renders the same focus-visible ring as the bars', async () => { + render(TimelineDensityFilter, makeProps({ zoomFrom: '1915-08-01', zoomTo: '1915-09-30' })); + const resetBtn = document.querySelector('[data-testid="timeline-zoom-reset"]') as HTMLElement; + expect(resetBtn.className).toMatch(/focus-visible:ring-2/); + expect(resetBtn.className).toMatch(/focus-visible:ring-brand-navy/); + expect(resetBtn.className).toMatch(/focus-visible:ring-offset-2/); + }); + + it('clear-selection button renders the same focus-visible ring as the bars', async () => { + render(TimelineDensityFilter, makeProps({ from: '1915-08-01', to: '1915-09-30' })); + const clearBtn = document.querySelector('[data-testid="timeline-clear"]') as HTMLElement; + expect(clearBtn.className).toMatch(/focus-visible:ring-2/); + expect(clearBtn.className).toMatch(/focus-visible:ring-brand-navy/); + expect(clearBtn.className).toMatch(/focus-visible:ring-offset-2/); + }); }); describe('TimelineDensityFilter — accessibility', () => {