fix(a11y): add htmlFor/id label associations in login and token input forms\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

This commit is contained in:
Lotus Bot
2026-05-21 13:49:49 -04:00
parent 7784f4358d
commit 13e22d7c47
2 changed files with 7 additions and 4 deletions
@@ -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
@@ -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 && (
<>