From a67f581c52cb1771a0d77e089c41052bf080647b Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Thu, 21 May 2026 13:49:49 -0400
Subject: [PATCH] fix(a11y): add htmlFor/id label associations in login and
 token input forms\n\nCo-Authored-By: Claude Sonnet 4.6
 <noreply@anthropic.com>

---
 src/app/components/uia-stages/RegistrationTokenStage.tsx | 4 +++-
 src/app/pages/auth/login/PasswordLoginForm.tsx           | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/components/uia-stages/RegistrationTokenStage.tsx b/src/app/components/uia-stages/RegistrationTokenStage.tsx
index ed8a30458..4593d5805 100644
--- a/src/app/components/uia-stages/RegistrationTokenStage.tsx
+++ b/src/app/components/uia-stages/RegistrationTokenStage.tsx
@@ -37,11 +37,13 @@ function RegistrationTokenErrorDialog({
         <Box direction="Column" gap="100">
           <Text size="H4">{title}</Text>
           <Text>{message}</Text>
-          <Text as="label" size="L400" style={{ paddingTop: config.space.S400 }}>
+          <Text as="label" htmlFor="retryTokenInput" size="L400" style={{ paddingTop: config.space.S400 }}>
             Registration Token
           </Text>
           <Input
+            id="retryTokenInput"
             name="retryTokenInput"
+            aria-label="Registration token"
             variant="Background"
             size="500"
             outlined
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 89da68d18..c802fe714 100644
--- a/src/app/pages/auth/login/PasswordLoginForm.tsx
+++ b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -200,12 +200,13 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
   return (
     <Box as="form" onSubmit={handleSubmit} direction="Inherit" gap="400">
       <Box direction="Column" gap="100">
-        <Text as="label" size="L400" priority="300">
+        <Text as="label" htmlFor="usernameInput" size="L400" priority="300">
           Username
         </Text>
         <Input
           defaultValue={defaultUsername ?? defaultEmail}
           style={{ paddingRight: config.space.S300 }}
+          id="usernameInput"
           name="usernameInput"
           aria-label="Username or email"
           variant="Background"
@@ -226,10 +227,10 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         )}
       </Box>
       <Box direction="Column" gap="100">
-        <Text as="label" size="L400" priority="300">
+        <Text as="label" htmlFor="passwordInput" size="L400" priority="300">
           Password
         </Text>
-        <PasswordInput name="passwordInput" aria-label="Password" variant="Background" size="500" outlined required />
+        <PasswordInput id="passwordInput" name="passwordInput" aria-label="Password" variant="Background" size="500" outlined required />
         <Box alignItems="Start" justifyContent="SpaceBetween" gap="200">
           {loginState.status === AsyncStatus.Error && (
             <>