fix(a11y): semantic headings, htmlFor/id associations, remove duplicate aria-labels
H-tag: add as=h1/h2 to dialog/UIA/auth headings (21 components) Label: add htmlFor/id to PasswordRegisterForm (5 pairs) and PasswordResetForm (3 pairs) Dupe: remove duplicate aria-label from Controls.tsx screenshare button, MembersDrawer, Members, RoomInput Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -56,7 +56,7 @@ export function Login() {
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="500">
|
||||
<Text size="H2" priority="400">
|
||||
<Text as="h1" size="H2" priority="400">
|
||||
Login
|
||||
</Text>
|
||||
{parsedFlows.token && loginSearchParams.loginToken && (
|
||||
|
||||
@@ -258,12 +258,13 @@ export function PasswordRegisterForm({
|
||||
<>
|
||||
<Box as="form" onSubmit={handleSubmit} direction="Inherit" gap="400">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="usernameInput">
|
||||
Username
|
||||
</Text>
|
||||
<Input
|
||||
variant="Background"
|
||||
defaultValue={defaultUsername}
|
||||
id="usernameInput"
|
||||
name="usernameInput"
|
||||
aria-label="Username"
|
||||
size="500"
|
||||
@@ -284,12 +285,13 @@ export function PasswordRegisterForm({
|
||||
{(match, doMatch, passRef, confPassRef) => (
|
||||
<>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="passwordInput">
|
||||
Password
|
||||
</Text>
|
||||
<PasswordInput
|
||||
ref={passRef}
|
||||
onChange={doMatch}
|
||||
id="passwordInput"
|
||||
name="passwordInput"
|
||||
aria-label="Password"
|
||||
variant="Background"
|
||||
@@ -315,12 +317,13 @@ export function PasswordRegisterForm({
|
||||
)}
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="confirmPasswordInput">
|
||||
Confirm Password
|
||||
</Text>
|
||||
<PasswordInput
|
||||
ref={confPassRef}
|
||||
onChange={doMatch}
|
||||
id="confirmPasswordInput"
|
||||
name="confirmPasswordInput"
|
||||
aria-label="Confirm password"
|
||||
variant="Background"
|
||||
@@ -335,7 +338,7 @@ export function PasswordRegisterForm({
|
||||
</ConfirmPasswordMatch>
|
||||
{hasStageInFlows(uiaFlows, AuthType.RegistrationToken) && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="tokenInput">
|
||||
{requiredStageInFlows(uiaFlows, AuthType.RegistrationToken)
|
||||
? 'Registration Token'
|
||||
: 'Registration Token (Optional)'}
|
||||
@@ -343,6 +346,7 @@ export function PasswordRegisterForm({
|
||||
<Input
|
||||
variant="Background"
|
||||
defaultValue={defaultRegisterToken}
|
||||
id="tokenInput"
|
||||
name="tokenInput"
|
||||
aria-label="Registration token"
|
||||
size="500"
|
||||
@@ -353,12 +357,13 @@ export function PasswordRegisterForm({
|
||||
)}
|
||||
{hasStageInFlows(uiaFlows, AuthType.Email) && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="emailInput">
|
||||
{requiredStageInFlows(uiaFlows, AuthType.Email) ? 'Email' : 'Email (Optional)'}
|
||||
</Text>
|
||||
<Input
|
||||
variant="Background"
|
||||
defaultValue={defaultEmail}
|
||||
id="emailInput"
|
||||
name="emailInput"
|
||||
aria-label="Email address"
|
||||
type="email"
|
||||
|
||||
@@ -170,12 +170,13 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
Homeserver <strong>{server}</strong> will send you an email to let you reset your password.
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="emailInput">
|
||||
Email
|
||||
</Text>
|
||||
<Input
|
||||
defaultValue={defaultEmail}
|
||||
type="email"
|
||||
id="emailInput"
|
||||
name="emailInput"
|
||||
aria-label="Email address"
|
||||
variant="Background"
|
||||
@@ -193,12 +194,13 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
{(match, doMatch, passRef, confPassRef) => (
|
||||
<>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="passwordInput">
|
||||
New Password
|
||||
</Text>
|
||||
<PasswordInput
|
||||
ref={passRef}
|
||||
onChange={doMatch}
|
||||
id="passwordInput"
|
||||
name="passwordInput"
|
||||
aria-label="New password"
|
||||
variant="Background"
|
||||
@@ -208,12 +210,13 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
/>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text as="label" size="L400" priority="300">
|
||||
<Text as="label" size="L400" priority="300" htmlFor="confirmPasswordInput">
|
||||
Confirm Password
|
||||
</Text>
|
||||
<PasswordInput
|
||||
ref={confPassRef}
|
||||
onChange={doMatch}
|
||||
id="confirmPasswordInput"
|
||||
name="confirmPasswordInput"
|
||||
aria-label="Confirm new password"
|
||||
variant="Background"
|
||||
|
||||
Reference in New Issue
Block a user