frontend/src/lib/user/UserGroupsSection.svelte

@@ -7,10 +7,11 @@ let {
 	selectedGroupIds?: string[];
 } = $props();
 
-let selected = $derived([...selectedGroupIds]);
+let selected = $state<string[]>([...selectedGroupIds]);
 </script>
 
-<div class="flex flex-wrap gap-3">
+<fieldset class="flex flex-wrap gap-3 border-none p-0">
+	<legend class="sr-only">Gruppen</legend>
 	{#each groups as group (group.id)}
 		<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 			<input
@@ -23,4 +24,4 @@ let selected = $derived([...selectedGroupIds]);
 			{group.name}
 		</label>
 	{/each}
-</div>
+</fieldset>

frontend/src/routes/admin/invites/page.svelte.test.ts

@@ -299,4 +299,39 @@ describe('admin/invites page', () => {
 		await expect.element(page.getByRole('checkbox', { name: 'Administratoren' })).toBeVisible();
 		await expect.element(page.getByRole('checkbox', { name: 'Familie' })).toBeVisible();
 	});
+
+	it('group checkbox stays checked after being clicked', 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();
+
+		const checkbox = page.getByRole('checkbox', { name: 'Familie' });
+		await checkbox.click();
+		await expect.element(checkbox).toBeChecked();
+	});
+
+	it('amber warning banner has role="alert"', async () => {
+		render(AdminInvitesPage, {
+			props: { data: { ...baseData(), groups: [], groupsLoadError: 'INTERNAL_ERROR' } }
+		});
+
+		await page
+			.getByRole('button', { name: /neue einladung/i })
+			.first()
+			.click();
+
+		const alert = document.querySelector('[role="alert"]');
+		expect(alert).not.toBeNull();
+	});
 });