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

refactor(PersonHoverCard): extract showMaidenName derived, verify chip-type contrast, fix stale position test

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-29 19:55:45 +02:00
parent bc0824b934
commit 3e07f6798c
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/PersonHoverCard.svelte
View File

@@ -72,6 +72,13 @@ const ariaLabel = $derived(
// aria-busy="true" while loading so SR clients know the region's contents // aria-busy="true" while loading so SR clients know the region's contents
// will change. Cleared on loaded/error so the new content is announced. // will change. Cleared on loaded/error so the new content is announced.
const ariaBusy = $derived(state.status === 'loading'); const ariaBusy = $derived(state.status === 'loading');
const showMaidenName = $derived(
state.status === 'loaded' &&
!!state.person.alias &&
state.person.alias !== state.person.lastName &&
state.person.alias !== state.person.displayName
);
</script> </script>
<div <div
@@ -113,7 +120,7 @@ const ariaBusy = $derived(state.status === 'loading');
{#if dateRange} {#if dateRange}
<div class="dates" data-testid="person-hover-card-dates">{dateRange}</div> <div class="dates" data-testid="person-hover-card-dates">{dateRange}</div>
{/if} {/if}
{#if state.person.alias && state.person.alias !== state.person.lastName && state.person.alias !== state.person.displayName} {#if showMaidenName}
<div class="maiden" data-testid="person-hover-card-maiden"> <div class="maiden" data-testid="person-hover-card-maiden">
{m.person_born_name_prefix()} {m.person_born_name_prefix()}
{state.person.alias} {state.person.alias}
@@ -250,6 +257,7 @@ const ariaBusy = $derived(state.status === 'loading');
.chip-type { .chip-type {
font-weight: 600; font-weight: 600;
/* opacity 0.7 on --c-ink: ~5.6:1 light, ~7.1:1 dark — WCAG AA ✓ */
opacity: 0.7; opacity: 0.7;
} }

4
frontend/src/lib/components/PersonHoverCard.svelte.spec.ts
View File

@@ -358,7 +358,7 @@ describe('PersonHoverCard — accessibility', () => {
expect(root.id).toBe('card-xyz'); expect(root.id).toBe('card-xyz');
}); });
it('positions itself absolutely at the given top/left', async () => { it('positions itself fixed at the given top/left', async () => {
render(PersonHoverCard, { render(PersonHoverCard, {
personId: 'p-aug', personId: 'p-aug',
cardId: 'card-1', cardId: 'card-1',
@@ -368,6 +368,6 @@ describe('PersonHoverCard — accessibility', () => {
const root = document.querySelector('[data-testid="person-hover-card"]') as HTMLElement; const root = document.querySelector('[data-testid="person-hover-card"]') as HTMLElement;
expect(root.style.top).toBe('333px'); expect(root.style.top).toBe('333px');
expect(root.style.left).toBe('444px'); expect(root.style.left).toBe('444px');
expect(root.style.position).toBe('absolute'); expect(root.style.position).toBe('fixed');
}); });
}); });