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

feat(documents): focus-visible ring on timeline controls (#385)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 11:30:25 +02:00
parent f68d16ef58
commit dd0a77a5a2
2 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/document/TimelineControls.svelte
View File

@@ -22,7 +22,7 @@ let {
aria-label={m.timeline_zoom_reset()} aria-label={m.timeline_zoom_reset()}
title={m.timeline_zoom_reset()} title={m.timeline_zoom_reset()}
onclick={onresetzoom} 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"
> >
↩ ↩
</button> </button>
@@ -33,7 +33,7 @@ let {
data-testid="timeline-clear" data-testid="timeline-clear"
aria-label={m.timeline_clear_selection()} aria-label={m.timeline_clear_selection()}
onclick={onclearselection} 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"
> >
× ×
</button> </button>

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

@@ -332,6 +332,22 @@ describe('TimelineDensityFilter — touch targets', () => {
expect(bar.className).toMatch(/focus-visible:ring-brand-navy/); expect(bar.className).toMatch(/focus-visible:ring-brand-navy/);
expect(bar.className).toMatch(/focus-visible:ring-offset-2/); 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', () => { describe('TimelineDensityFilter — accessibility', () => {