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

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

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 11:00:15 +02:00
parent 153752a901
commit 48da819a54
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/document/TimelineBars.svelte
View File

@@ -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)}
>

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

@@ -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', () => {