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

feat(person): render precise life dates on cards, hover card, and mention dropdown

Browse Source 
Cards compose aria-hidden * / † glyphs in markup so screen readers only
announce the dates; PersonSummaryDTO list card stays year-shaped by
design (ADR-039). MentionDropdown subtitle wraps instead of truncating
so DAY-precision ranges fit at 320px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-12 18:14:20 +02:00
parent c41c69d0d1
commit 4dcf8e2242
10 changed files with 254 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/routes/persons/[id]/PersonCard.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatLifeDateRange } from '$lib/person/personLifeDates';
import { formatLifeDate } from '$lib/person/personLifeDates';
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
import type { DatePrecision } from '$lib/shared/utils/documentDate';
let {
person,
@@ -15,12 +16,17 @@ let {
personType?: string | null;
title?: string | null;
alias?: string | null;
birthYear?: number | null;
deathYear?: number | null;
birthDate?: string | null;
birthDatePrecision?: DatePrecision | null;
deathDate?: string | null;
deathDatePrecision?: DatePrecision | null;
notes?: string | null;
};
canWrite: boolean;
} = $props();
const birthText = $derived(formatLifeDate(person.birthDate, person.birthDatePrecision));
const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrecision));
</script>
<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
@@ -91,10 +97,16 @@ let {
<p class="mb-1 text-center font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
{/if}
<!-- Life dates — centered -->
{#if person.birthYear || person.deathYear}
<!-- Life dates — centered; glyphs aria-hidden so screen readers only hear the dates -->
{#if birthText || deathText}
<p class="mb-4 text-center font-sans text-sm text-ink-3">
{formatLifeDateRange(person.birthYear, person.deathYear)}
{#if birthText}
<span aria-hidden="true">*</span> {birthText}
{/if}
{#if birthText && deathText}–{/if}
{#if deathText}
<span aria-hidden="true">†</span> {deathText}
{/if}
</p>
{:else}
<div class="mb-4"></div>

75
frontend/src/routes/persons/[id]/PersonCard.svelte.test.ts
View File

@@ -82,15 +82,84 @@ describe('PersonCard', () => {
await expect.element(page.getByText(/Annerl/)).toBeVisible();
});
it('renders the life-date range when birthYear or deathYear are present', async () => {
it('renders DAY-precision life dates as full localized dates', async () => {
render(PersonCard, {
props: {
person: { ...basePerson, birthYear: 1899, deathYear: 1972 },
person: {
...basePerson,
birthDate: '1901-03-14',
birthDatePrecision: 'DAY' as const,
deathDate: '1944-11-02',
deathDatePrecision: 'DAY' as const
},
canWrite: false
}
});
await expect.element(page.getByText(/1899/)).toBeVisible();
await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
await expect.element(page.getByText(/2\. November 1944/)).toBeVisible();
});
it('wraps the * and † glyphs in aria-hidden spans', async () => {
const { container } = render(PersonCard, {
props: {
person: {
...basePerson,
birthDate: '1901-03-14',
birthDatePrecision: 'DAY' as const,
deathDate: '1944-11-02',
deathDatePrecision: 'DAY' as const
},
canWrite: false
}
});
const hidden = [...container.querySelectorAll('span[aria-hidden="true"]')].map((el) =>
el.textContent?.trim()
);
expect(hidden).toContain('*');
expect(hidden).toContain('†');
});
it('renders birth-only without dash or dagger', async () => {
const { container } = render(PersonCard, {
props: {
person: {
...basePerson,
birthDate: '1901-03-14',
birthDatePrecision: 'DAY' as const
},
canWrite: false
}
});
await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
expect(container.textContent).not.toContain('–');
expect(container.textContent).not.toContain('†');
});
it('renders APPROX-precision legacy dates with the ca. prefix', async () => {
render(PersonCard, {
props: {
person: {
...basePerson,
birthDate: '1882-01-01',
birthDatePrecision: 'APPROX' as const
},
canWrite: false
}
});
await expect.element(page.getByText(/ca\. 1882/)).toBeVisible();
});
it('renders no life-date line when both dates are missing', async () => {
const { container } = render(PersonCard, {
props: { person: basePerson, canWrite: false }
});
expect(container.textContent).not.toContain('*');
expect(container.textContent).not.toContain('†');
});
it('renders the notes section when notes are provided', async () => {