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:
@@ -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 && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
Reference in New Issue
Block a user