marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(join): update password toggle aria-label with state

Browse Source 
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>
This commit is contained in:
Marcel Raddatz
2026-04-10 22:26:16 +02:00
parent 230ee5a067
commit ccfc72ab38
2 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/routes/(public)/join/[token]/JoinForm.svelte
View File

@@ -90,7 +90,7 @@
<button <button
type="button" type="button"
onclick={() => (showPassword = !showPassword)} 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)]" 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'} {showPassword ? 'Verbergen' : 'Anzeigen'}

9
frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
View File

@@ -34,6 +34,15 @@ describe('JoinForm', () => {
expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'text'); 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', () => { it('shows form-level error from form prop', () => {
render(JoinForm, { render(JoinForm, {
props: { props: {