diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte index af2ac038..9d5dc5df 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte @@ -2,6 +2,7 @@ import { m } from '$lib/paraglide/messages.js'; import { plainExcerpt } from '$lib/shared/utils/extractText'; import { formatDate } from '$lib/shared/utils/date'; +import { formatAuthorName } from './utils'; import type { components } from '$lib/generated/api'; type GeschichteRow = Pick< @@ -18,12 +19,7 @@ const publishedAt = $derived.by(() => { return formatDate(geschichte.publishedAt.slice(0, 10), 'short'); }); -const authorName = $derived.by(() => { - const a = geschichte.author; - if (!a) return ''; - const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim(); - return full || a.email || ''; -}); +const authorName = $derived(formatAuthorName(geschichte.author)); diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts index 97e39175..c0aa748d 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts @@ -50,10 +50,12 @@ describe('GeschichteListRow', () => { expect(badge?.tagName.toLowerCase()).toBe('span'); }); - it('badge has text-xs class for WCAG readability', async () => { + it('badge has small font size appropriate for a label', async () => { render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); const badge = document.querySelector('[data-testid="journey-badge"]'); - expect(badge?.className).toContain('text-xs'); + const fontSize = parseFloat(window.getComputedStyle(badge!).fontSize); + expect(fontSize).toBeGreaterThan(0); + expect(fontSize).toBeLessThanOrEqual(14); // label badge must not exceed body text size }); it('renders author name in meta line', async () => {