refactor(persons): extract inputCls/labelCls and PersonFormData type

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/PersonTypeSelector.svelte

@@ -32,6 +32,7 @@ function select(type: PersonType) {
 
 <div
 	role="radiogroup"
+	aria-label={m.form_label_person_type()}
 	class="grid grid-cols-2 gap-2 sm:grid-cols-4"
 	use:radioGroupNav={(v) => { if (TYPES.includes(v as PersonType)) select(v as PersonType); }}
 >

frontend/src/lib/components/PersonTypeSelector.svelte.spec.ts

@@ -7,6 +7,13 @@ import PersonTypeSelector from './PersonTypeSelector.svelte';
 afterEach(() => cleanup());
 
 describe('PersonTypeSelector', () => {
+	it('radiogroup has an accessible name via aria-label', () => {
+		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
+		const radiogroup = container.querySelector('[role="radiogroup"]');
+		expect(radiogroup).not.toBeNull();
+		expect(radiogroup!.getAttribute('aria-label')).toBeTruthy();
+	});
+
 	it('hidden input value updates when user navigates with ArrowRight', async () => {
 		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
 		const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement;
@@ -18,32 +25,47 @@ describe('PersonTypeSelector', () => {
 
 		expect(hiddenInput.value).toBe('INSTITUTION');
 	});
-	it('selected button uses semantic bg-primary and text-primary-fg classes', () => {
+
+	it('hidden input value updates when user navigates with ArrowLeft (wraps around)', async () => {
 		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
-		const buttons = container.querySelectorAll('[role="radio"]');
+		const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement;
-		const selected = Array.from(buttons).find((b) => b.getAttribute('aria-checked') === 'true');
+		expect(hiddenInput.value).toBe('PERSON');
-		expect(selected).not.toBeNull();
+
-		expect(selected!.className).toContain('bg-primary');
+		const personButton = container.querySelector('[aria-checked="true"]') as HTMLElement;
-		expect(selected!.className).toContain('text-primary-fg');
+		personButton.focus();
+		await userEvent.keyboard('{ArrowLeft}');
+
+		expect(hiddenInput.value).toBe('UNKNOWN');
+	});
+	it('exactly one button is aria-checked=true for the initial value', () => {
+		const { container } = render(PersonTypeSelector, { value: 'INSTITUTION' });
+		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
+		const checked = buttons.filter((b) => b.getAttribute('aria-checked') === 'true');
+		const unchecked = buttons.filter((b) => b.getAttribute('aria-checked') === 'false');
+		expect(checked).toHaveLength(1);
+		expect(unchecked).toHaveLength(3);
 	});
 
-	it('unselected buttons use semantic bg-surface, text-ink, border-line classes', () => {
+	it('aria-checked=true moves to clicked button on click', async () => {
 		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
-		const buttons = container.querySelectorAll('[role="radio"]');
+		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
-		const unselected = Array.from(buttons).filter((b) => b.getAttribute('aria-checked') !== 'true');
+		const groupButton = buttons.find((b) => b.getAttribute('value') === 'GROUP') as HTMLElement;
-		expect(unselected.length).toBeGreaterThan(0);
+		await userEvent.click(groupButton);
-		for (const btn of unselected) {
+		expect(groupButton.getAttribute('aria-checked')).toBe('true');
-			expect(btn.className).toContain('bg-surface');
+		const others = buttons.filter((b) => b !== groupButton);
-			expect(btn.className).toContain('text-ink');
+		for (const btn of others) {
-			expect(btn.className).toContain('border-line');
+			expect(btn.getAttribute('aria-checked')).toBe('false');
 		}
 	});
 
-	it('focus ring uses semantic ring-focus-ring class', () => {
+	it('selected button has tabindex=0, unselected buttons have tabindex=-1', () => {
 		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
-		const buttons = container.querySelectorAll('[role="radio"]');
+		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
-		for (const btn of buttons) {
+		const selected = buttons.find((b) => b.getAttribute('aria-checked') === 'true');
-			expect(btn.className).toContain('ring-focus-ring');
+		const unselected = buttons.filter((b) => b.getAttribute('aria-checked') !== 'true');
+		expect(selected!.getAttribute('tabindex')).toBe('0');
+		for (const btn of unselected) {
+			expect(btn.getAttribute('tabindex')).toBe('-1');
 		}
 	});
 });

frontend/src/lib/person-validation.ts

@@ -3,6 +3,17 @@ import { m } from '$lib/paraglide/messages.js';
 export const PERSON_TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
 export type PersonType = (typeof PERSON_TYPES)[number];
 
+export type PersonFormData = {
+	personType?: string | null;
+	title?: string | null;
+	firstName?: string | null;
+	lastName: string;
+	alias?: string | null;
+	birthYear?: number | null;
+	deathYear?: number | null;
+	notes?: string | null;
+};
+
 export function normalizePersonType(raw: string | undefined | null): PersonType {
 	return raw === 'SKIP' ? 'UNKNOWN' : ((raw ?? 'PERSON') as PersonType);
 }

frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte

@@ -2,22 +2,13 @@
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import PersonTypeSelector from '$lib/components/PersonTypeSelector.svelte';
-import { PERSON_TYPES as TYPES, type PersonType } from '$lib/person-validation';
+import {
+	PERSON_TYPES as TYPES,
+	type PersonType,
+	type PersonFormData
+} from '$lib/person-validation';
 
-let {
+let { person }: { person: PersonFormData } = $props();
-	person
-}: {
-	person: {
-		personType?: string | null;
-		title?: string | null;
-		firstName?: string | null;
-		lastName: string;
-		alias?: string | null;
-		birthYear?: number | null;
-		deathYear?: number | null;
-		notes?: string | null;
-	};
-} = $props();
 
 let selectedType = $state<PersonType>(
 	untrack(() =>
@@ -31,11 +22,15 @@ const lastNameLabel = $derived(
 		? m.form_label_name()
 		: m.form_label_last_name()
 );
+
+const labelCls = 'mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase';
+const inputCls =
+	'block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
 </script>
 
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 	<div class="md:col-span-2">
-		<p class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
+		<p class={labelCls}>
 			{m.form_label_person_type()}
 		</p>
 		<PersonTypeSelector
@@ -47,68 +42,48 @@ const lastNameLabel = $derived(
 
 	{#if isPerson}
 		<div>
-			<label for="title" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
+			<label for="title" class={labelCls}>{m.form_label_title()}</label>
-				>{m.form_label_title()}</label
-			>
 			<input
 				id="title"
 				name="title"
 				type="text"
 				maxlength="50"
 				value={person.title ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 		<div>
-			<label
+			<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
-				for="firstName"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.form_label_first_name()} *</label
-			>
 			<input
 				id="firstName"
 				name="firstName"
 				type="text"
 				required
 				value={person.firstName ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 	{/if}
 
 	<div class={!isPerson ? 'md:col-span-2' : ''}>
-		<label for="lastName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
+		<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
-			>{lastNameLabel} *</label
-		>
 		<input
 			id="lastName"
 			name="lastName"
 			type="text"
 			required
 			value={person.lastName}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class={inputCls}
 		/>
 	</div>
 
 	{#if isPerson}
 		<div class="md:col-span-2">
-			<label for="alias" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
+			<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
-				>{m.form_label_alias()}</label
+			<input id="alias" name="alias" type="text" value={person.alias ?? ''} class={inputCls} />
-			>
-			<input
-				id="alias"
-				name="alias"
-				type="text"
-				value={person.alias ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-			/>
 		</div>
 		<div>
-			<label
+			<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
-				for="birthYear"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.person_label_birth_year()}</label
-			>
 			<input
 				id="birthYear"
 				name="birthYear"
@@ -117,15 +92,11 @@ const lastNameLabel = $derived(
 				max="2100"
 				placeholder={m.person_placeholder_year()}
 				value={person.birthYear ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 		<div>
-			<label
+			<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
-				for="deathYear"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.person_label_death_year()}</label
-			>
 			<input
 				id="deathYear"
 				name="deathYear"
@@ -134,15 +105,13 @@ const lastNameLabel = $derived(
 				max="2100"
 				placeholder={m.person_placeholder_year()}
 				value={person.deathYear ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 	{/if}
 
 	<div class="md:col-span-2">
-		<label for="notes" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
+		<label for="notes" class={labelCls}>{m.person_label_notes()}</label>
-			>{m.person_label_notes()}</label
-		>
 		<textarea
 			id="notes"
 			name="notes"