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"> <Box direction="Column" gap="100">
<Text size="H4">{title}</Text> <Text size="H4">{title}</Text>
<Text>{message}</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 Registration Token
</Text> </Text>
<Input <Input
id="retryTokenInput"
name="retryTokenInput" name="retryTokenInput"
aria-label="Registration token"
variant="Background" variant="Background"
size="500" size="500"
outlined outlined
@@ -200,12 +200,13 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
return ( return (
<Box as="form" onSubmit={handleSubmit} direction="Inherit" gap="400"> <Box as="form" onSubmit={handleSubmit} direction="Inherit" gap="400">
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text as="label" size="L400" priority="300"> <Text as="label" htmlFor="usernameInput" size="L400" priority="300">
Username Username
</Text> </Text>
<Input <Input
defaultValue={defaultUsername ?? defaultEmail} defaultValue={defaultUsername ?? defaultEmail}
style={{ paddingRight: config.space.S300 }} style={{ paddingRight: config.space.S300 }}
id="usernameInput"
name="usernameInput" name="usernameInput"
aria-label="Username or email" aria-label="Username or email"
variant="Background" variant="Background"
@@ -226,10 +227,10 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
)} )}
</Box> </Box>
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text as="label" size="L400" priority="300"> <Text as="label" htmlFor="passwordInput" size="L400" priority="300">
Password Password
</Text> </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"> <Box alignItems="Start" justifyContent="SpaceBetween" gap="200">
{loginState.status === AsyncStatus.Error && ( {loginState.status === AsyncStatus.Error && (
<> <>