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

feat(documents): timeline date-range filter with density bars (#385) #478

Merged
marcel merged 52 commits from feat/issue-385-timeline-density-filter into main 2026-05-08 12:27:17 +02:00
Conversation 31 Commits 52 Files Changed 28 +17 -2
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ea106e9414 - Show all commits

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

@@ -241,7 +241,7 @@ const omitTickYear = $derived.by(() => {
>
<div class="flex">
<div
class="flex flex-col justify-between pr-1.5 text-right font-sans text-[10px] leading-none text-ink-3"
class="flex flex-col justify-between pr-1.5 text-right font-sans text-xs leading-none text-ink-3"
style="height: {BAR_AREA_HEIGHT}px;"
aria-hidden="true"
data-testid="timeline-y-axis"
@@ -288,7 +288,7 @@ const omitTickYear = $derived.by(() => {
</div>
<div
class="relative mt-1 h-3 font-sans text-[10px] leading-none text-ink-3"
class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
aria-hidden="true"
data-testid="timeline-x-axis"
>

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

@@ -309,6 +309,21 @@ describe('TimelineDensityFilter — zoom', () => {
});
describe('TimelineDensityFilter — accessibility', () => {
it('Y-axis labels meet the 12px minimum font floor (Tailwind text-xs)', async () => {
render(TimelineDensityFilter, makeProps());
const yAxis = document.querySelector('[data-testid="timeline-y-axis"]') as HTMLElement;
expect(yAxis.classList.contains('text-xs')).toBe(true);
expect(yAxis.className).not.toMatch(/text-\[10px\]/);
});
it('X-axis row uses text-xs and h-4 to fit the 12px line height', async () => {
render(TimelineDensityFilter, makeProps());
const xAxis = document.querySelector('[data-testid="timeline-x-axis"]') as HTMLElement;
expect(xAxis.classList.contains('text-xs')).toBe(true);
expect(xAxis.classList.contains('h-4')).toBe(true);
expect(xAxis.className).not.toMatch(/text-\[10px\]/);
});
it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
render(
TimelineDensityFilter,