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:
Lotus Bot
2026-05-21 15:36:59 -04:00
parent 220245dba5
commit 0d3eabb884
24 changed files with 37 additions and 33 deletions
+1 -1
View File
@@ -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"