From ccfc72ab38c94d68c8b7b75358a658469357d606 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 22:26:16 +0200
Subject: [PATCH] fix(join): update password toggle aria-label with state

Static aria-label "Passwort anzeigen" stayed unchanged after the password
became visible, giving screen readers wrong information. Bind label to
showPassword state: "Passwort anzeigen" / "Passwort verbergen".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/(public)/join/[token]/JoinForm.svelte     | 2 +-
 .../src/routes/(public)/join/[token]/JoinForm.test.ts    | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/(public)/join/[token]/JoinForm.svelte b/frontend/src/routes/(public)/join/[token]/JoinForm.svelte
index 059602c..57f5c2c 100644
--- a/frontend/src/routes/(public)/join/[token]/JoinForm.svelte
+++ b/frontend/src/routes/(public)/join/[token]/JoinForm.svelte
@@ -90,7 +90,7 @@
 			<button
 				type="button"
 				onclick={() => (showPassword = !showPassword)}
-				aria-label="Passwort anzeigen"
+				aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
 				class="absolute top-1/2 right-[12px] -translate-y-1/2 cursor-pointer bg-transparent p-0 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]"
 			>
 				{showPassword ? 'Verbergen' : 'Anzeigen'}
diff --git a/frontend/src/routes/(public)/join/[token]/JoinForm.test.ts b/frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
index 7fbae6c..2a55f62 100644
--- a/frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
+++ b/frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
@@ -34,6 +34,15 @@ describe('JoinForm', () => {
 		expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'text');
 	});
 
+	it('password toggle aria-label updates to "Passwort verbergen" when visible', async () => {
+		const user = userEvent.setup();
+		render(JoinForm);
+
+		const toggle = screen.getByRole('button', { name: /passwort anzeigen/i });
+		await user.click(toggle);
+		expect(screen.getByRole('button', { name: /passwort verbergen/i })).toBeInTheDocument();
+	});
+
 	it('shows form-level error from form prop', () => {
 		render(JoinForm, {
 			props: {