refactor: move lib-root files to lib/shared/ and finalize domain structure
- Move api.server.ts, errors.ts, types.ts, utils.ts, relativeTime.ts to lib/shared/ - Move person relationship components to lib/person/relationship/ - Move Stammbaum components to lib/person/genealogy/ - Move HelpPopover to lib/shared/primitives/ - Update all import paths across routes, specs, and lib files - Update vi.mock() paths in server-project test files - Remove now-empty legacy directories (components/, hooks/, server/, etc.) - Update vite.config.ts coverage include paths for new structure - Update frontend/CLAUDE.md to reflect domain-based lib/ layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
101
frontend/src/lib/shared/primitives/HelpPopover.svelte
Normal file
101
frontend/src/lib/shared/primitives/HelpPopover.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script module>
|
||||
// Module-level counter produces stable, predictable IDs across SSR + hydration.
|
||||
// Math.random() would generate different values server-side vs client-side,
|
||||
// causing a hydration mismatch on first render.
|
||||
let _counter = 0;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Placement = 'bottom' | 'top' | 'left' | 'right';
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
placement?: Placement;
|
||||
children?: Snippet;
|
||||
};
|
||||
|
||||
let { label, placement = 'bottom', children }: Props = $props();
|
||||
|
||||
const popoverId = `help-popover-${_counter++}`;
|
||||
|
||||
let open = $state(false);
|
||||
let triggerEl: HTMLButtonElement | null = $state(null);
|
||||
|
||||
function toggle() {
|
||||
open = !open;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
triggerEl?.focus();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (triggerEl && (e.target === triggerEl || triggerEl.contains(e.target as Node))) return;
|
||||
const popoverEl = document.getElementById(popoverId);
|
||||
if (popoverEl && popoverEl.contains(e.target as Node)) return;
|
||||
open = false;
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
document.addEventListener('pointerdown', onPointerDown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
document.removeEventListener('pointerdown', onPointerDown);
|
||||
};
|
||||
});
|
||||
|
||||
const placementClass: Record<Placement, string> = {
|
||||
bottom: 'top-full mt-1.5 left-1/2 -translate-x-1/2',
|
||||
top: 'bottom-full mb-1.5 left-1/2 -translate-x-1/2',
|
||||
left: 'right-full mr-1.5 top-1/2 -translate-y-1/2',
|
||||
right: 'left-full ml-1.5 top-1/2 -translate-y-1/2'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="relative inline-block">
|
||||
<!--
|
||||
Outer button is 44×44px for WCAG 2.5.8 touch-target compliance (our transcriber
|
||||
audience is 60+). The inner <span> carries the visual 20×20px circle.
|
||||
-->
|
||||
<button
|
||||
bind:this={triggerEl}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
aria-expanded={open}
|
||||
aria-controls={popoverId}
|
||||
onclick={toggle}
|
||||
class="group flex h-[44px] w-[44px] items-center justify-center rounded-full focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
<span
|
||||
class="flex h-5 w-5 items-center justify-center rounded-full border border-line bg-muted font-sans text-[10px] font-bold text-ink-3 transition-colors group-hover:border-brand-navy group-hover:text-brand-navy"
|
||||
>
|
||||
?
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
id={popoverId}
|
||||
role="region"
|
||||
aria-label={label}
|
||||
class="absolute z-50 w-64 rounded-sm border border-line bg-white p-3 font-sans text-sm text-ink shadow-md {placementClass[placement]}"
|
||||
>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
114
frontend/src/lib/shared/primitives/HelpPopover.svelte.spec.ts
Normal file
114
frontend/src/lib/shared/primitives/HelpPopover.svelte.spec.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { describe, it, expect, afterEach, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page, userEvent } from 'vitest/browser';
|
||||
import HelpPopover from './HelpPopover.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
function renderPopover(label = 'Help') {
|
||||
return render(HelpPopover, { props: { label } });
|
||||
}
|
||||
|
||||
describe('HelpPopover — initial state', () => {
|
||||
it('renders a trigger button with the given label', async () => {
|
||||
renderPopover();
|
||||
const btn = page.getByRole('button', { name: /Help/ });
|
||||
await expect.element(btn).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('starts closed: aria-expanded is false, popover not in DOM', async () => {
|
||||
renderPopover();
|
||||
const btn = page.getByRole('button', { name: /Help/ });
|
||||
await expect.element(btn).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(document.querySelector('[role="region"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('HelpPopover — open / close interactions', () => {
|
||||
it('opens on click: aria-expanded true, popover in DOM', async () => {
|
||||
renderPopover();
|
||||
await page.getByRole('button', { name: /Help/ }).click();
|
||||
const btn = page.getByRole('button', { name: /Help/ });
|
||||
await expect.element(btn).toHaveAttribute('aria-expanded', 'true');
|
||||
expect(document.querySelector('[role="region"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('closes on Esc key', async () => {
|
||||
renderPopover();
|
||||
await page.getByRole('button', { name: /Help/ }).click();
|
||||
expect(document.querySelector('[role="region"]')).not.toBeNull();
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
||||
await vi.waitFor(() => expect(document.querySelector('[role="region"]')).toBeNull());
|
||||
});
|
||||
|
||||
it('closes on outside click', async () => {
|
||||
renderPopover();
|
||||
await page.getByRole('button', { name: /Help/ }).click();
|
||||
expect(document.querySelector('[role="region"]')).not.toBeNull();
|
||||
|
||||
document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
|
||||
await vi.waitFor(() => expect(document.querySelector('[role="region"]')).toBeNull());
|
||||
});
|
||||
|
||||
it('opens on Enter key', async () => {
|
||||
renderPopover();
|
||||
(document.querySelector('button[aria-expanded]') as HTMLButtonElement).focus();
|
||||
await userEvent.keyboard('{Enter}');
|
||||
await vi.waitFor(() => expect(document.querySelector('[role="region"]')).not.toBeNull());
|
||||
});
|
||||
|
||||
it('opens on Space key', async () => {
|
||||
renderPopover();
|
||||
(document.querySelector('button[aria-expanded]') as HTMLButtonElement).focus();
|
||||
await userEvent.keyboard('{Space}');
|
||||
await vi.waitFor(() => expect(document.querySelector('[role="region"]')).not.toBeNull());
|
||||
});
|
||||
});
|
||||
|
||||
describe('HelpPopover — hover-target', () => {
|
||||
it('hover styles propagate from 44px button group to inner span, not from span itself', () => {
|
||||
const { container } = renderPopover();
|
||||
const btn = container.querySelector('button[aria-expanded]')!;
|
||||
const span = btn.querySelector('span')!;
|
||||
const btnClasses = btn.className.split(/\s+/);
|
||||
const spanClasses = span.className.split(/\s+/);
|
||||
expect(btnClasses).toContain('group');
|
||||
expect(spanClasses).not.toContain('hover:border-brand-navy');
|
||||
expect(spanClasses).toContain('group-hover:border-brand-navy');
|
||||
expect(spanClasses).not.toContain('hover:text-brand-navy');
|
||||
expect(spanClasses).toContain('group-hover:text-brand-navy');
|
||||
});
|
||||
|
||||
it('outer button has focus-visible ring for keyboard users', () => {
|
||||
const { container } = renderPopover();
|
||||
const btn = container.querySelector('button[aria-expanded]')!;
|
||||
expect(btn.className).toContain('focus-visible:ring-2');
|
||||
expect(btn.className).toContain('focus-visible:ring-brand-navy');
|
||||
});
|
||||
});
|
||||
|
||||
describe('HelpPopover — aria wiring', () => {
|
||||
it('trigger aria-controls matches popover element id', async () => {
|
||||
renderPopover();
|
||||
await page.getByRole('button', { name: /Help/ }).click();
|
||||
const btn = document.querySelector('button[aria-expanded]') as HTMLButtonElement;
|
||||
const controls = btn.getAttribute('aria-controls');
|
||||
expect(controls).toBeTruthy();
|
||||
const popover = document.getElementById(controls!);
|
||||
expect(popover).not.toBeNull();
|
||||
});
|
||||
|
||||
it('two renders produce different, predictable IDs (no Math.random — SSR safe)', async () => {
|
||||
const { container: c1 } = render(HelpPopover, { props: { label: 'A' } });
|
||||
const { container: c2 } = render(HelpPopover, { props: { label: 'B' } });
|
||||
const id1 = c1.querySelector('button[aria-controls]')?.getAttribute('aria-controls');
|
||||
const id2 = c2.querySelector('button[aria-controls]')?.getAttribute('aria-controls');
|
||||
expect(id1).toBeTruthy();
|
||||
expect(id2).toBeTruthy();
|
||||
expect(id1).not.toBe(id2);
|
||||
// IDs must be deterministic (counter-based), not random hex
|
||||
expect(id1).toMatch(/^help-popover-\d+$/);
|
||||
expect(id2).toMatch(/^help-popover-\d+$/);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user