From 9230e4a5310678bc2315a0a18cd13c5e1f2b4817 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 14 May 2026 16:43:53 +0200
Subject: [PATCH] fix(invites): i18n legend + touch target in UserGroupsSection

- legend uses m.admin_new_invite_groups() instead of hardcoded "Gruppen"
  so screen readers announce the correct string in en/es locales
- label gets min-h-[44px] for WCAG 2.2 touch target compliance
- add test asserting fieldset accessible name comes from i18n key
- add test documenting empty-groups-no-error renders no checkboxes/banner

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/user/UserGroupsSection.svelte     |  6 ++--
 .../routes/admin/invites/page.svelte.test.ts  | 35 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/user/UserGroupsSection.svelte b/frontend/src/lib/user/UserGroupsSection.svelte
index e9b2cd5c..2b3444eb 100644
--- a/frontend/src/lib/user/UserGroupsSection.svelte
+++ b/frontend/src/lib/user/UserGroupsSection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 let {
 	groups,
 	selectedGroupIds = []
@@ -11,9 +13,9 @@ let selected = $state<string[]>([...selectedGroupIds]);
 </script>
 
 <fieldset class="flex flex-wrap gap-3 border-none p-0">
-	<legend class="sr-only">Gruppen</legend>
+	<legend class="sr-only">{m.admin_new_invite_groups()}</legend>
 	{#each groups as group (group.id)}
-		<label class="inline-flex items-center gap-2 text-sm text-ink-2">
+		<label class="inline-flex min-h-[44px] items-center gap-2 text-sm text-ink-2">
 			<input
 				type="checkbox"
 				name="groupIds"
diff --git a/frontend/src/routes/admin/invites/page.svelte.test.ts b/frontend/src/routes/admin/invites/page.svelte.test.ts
index 84304006..4c42f868 100644
--- a/frontend/src/routes/admin/invites/page.svelte.test.ts
+++ b/frontend/src/routes/admin/invites/page.svelte.test.ts
@@ -334,4 +334,39 @@ describe('admin/invites page', () => {
 		const alert = document.querySelector('[role="alert"]');
 		expect(alert).not.toBeNull();
 	});
+
+	it('checkbox group fieldset has accessible name from i18n key (not hardcoded German)', async () => {
+		render(AdminInvitesPage, {
+			props: {
+				data: {
+					...baseData(),
+					groups: [{ id: 'g-1', name: 'Familie', permissions: ['READ_ALL'] }],
+					groupsLoadError: null
+				}
+			}
+		});
+
+		await page
+			.getByRole('button', { name: /neue einladung/i })
+			.first()
+			.click();
+
+		// m.admin_new_invite_groups() returns "Gruppen (optional)" in de locale
+		// The hardcoded legend "Gruppen" would not match this accessible name
+		await expect.element(page.getByRole('group', { name: 'Gruppen (optional)' })).toBeVisible();
+	});
+
+	it('shows no checkboxes and no warning when groups list is empty and no error', async () => {
+		render(AdminInvitesPage, {
+			props: { data: { ...baseData(), groups: [], groupsLoadError: null } }
+		});
+
+		await page
+			.getByRole('button', { name: /neue einladung/i })
+			.first()
+			.click();
+
+		expect(document.querySelectorAll('input[name="groupIds"]')).toHaveLength(0);
+		expect(document.querySelector('.bg-amber-50')).toBeNull();
+	});
 });