From 689805ca6ef5c8ff1020901bdd4e5ffeed1b07a2 Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Thu, 21 May 2026 15:36:59 -0400
Subject: [PATCH] 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>
---
 src/app/components/DeviceVerification.tsx         |  2 +-
 src/app/components/DeviceVerificationSetup.tsx    |  4 ++--
 src/app/components/LogoutDialog.tsx               |  2 +-
 .../join-address-prompt/JoinAddressPrompt.tsx     |  2 +-
 .../leave-room-prompt/LeaveRoomPrompt.tsx         |  2 +-
 .../leave-space-prompt/LeaveSpacePrompt.tsx       |  2 +-
 .../room-topic-viewer/RoomTopicViewer.tsx         |  2 +-
 src/app/components/uia-stages/DummyStage.tsx      |  2 +-
 src/app/components/uia-stages/EmailStage.tsx      |  4 ++--
 src/app/components/uia-stages/PasswordStage.tsx   |  2 +-
 .../uia-stages/RegistrationTokenStage.tsx         |  2 +-
 src/app/components/uia-stages/SSOStage.tsx        |  2 +-
 src/app/components/uia-stages/TermsStage.tsx      |  2 +-
 src/app/components/user-profile/PowerChip.tsx     |  4 ++--
 src/app/features/add-existing/AddExisting.tsx     |  2 +-
 src/app/features/call/Controls.tsx                |  1 -
 .../common-settings/general/RoomEncryption.tsx    |  2 +-
 .../common-settings/general/RoomUpgrade.tsx       |  2 +-
 .../features/common-settings/members/Members.tsx  |  1 -
 src/app/features/room/MembersDrawer.tsx           |  1 -
 src/app/features/room/RoomInput.tsx               |  1 -
 src/app/pages/auth/login/Login.tsx                |  2 +-
 .../pages/auth/register/PasswordRegisterForm.tsx  | 15 ++++++++++-----
 .../auth/reset-password/PasswordResetForm.tsx     |  9 ++++++---
 24 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx
index 53875f9fc..5db4aa2e7 100644
--- a/src/app/components/DeviceVerification.tsx
+++ b/src/app/components/DeviceVerification.tsx
@@ -259,7 +259,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
           <Dialog variant="Surface">
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
-                <Text size="H4">Device Verification</Text>
+                <Text as="h2" size="H4">Device Verification</Text>
               </Box>
               <IconButton size="300" radii="300" onClick={handleCancel} aria-label="Cancel verification">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx
index 4f0be6b1f..e782ce69c 100644
--- a/src/app/components/DeviceVerificationSetup.tsx
+++ b/src/app/components/DeviceVerificationSetup.tsx
@@ -299,7 +299,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text size="H4">Setup Device Verification</Text>
+            <Text as="h2" size="H4">Setup Device Verification</Text>
           </Box>
           <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
@@ -334,7 +334,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text size="H4">Reset Device Verification</Text>
+            <Text as="h2" size="H4">Reset Device Verification</Text>
           </Box>
           <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
diff --git a/src/app/components/LogoutDialog.tsx b/src/app/components/LogoutDialog.tsx
index cc9bf067d..3cba32f80 100644
--- a/src/app/components/LogoutDialog.tsx
+++ b/src/app/components/LogoutDialog.tsx
@@ -43,7 +43,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           size="500"
         >
           <Box grow="Yes">
-            <Text size="H4">Logout</Text>
+            <Text as="h2" size="H4">Logout</Text>
           </Box>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
index bceaa5543..1a5d7c3f0 100644
--- a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
+++ b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
@@ -80,7 +80,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Join with Address</Text>
+                <Text as="h2" size="H4">Join with Address</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
index b7f0473be..2573b6345 100644
--- a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
+++ b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
@@ -66,7 +66,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4" id="leave-room-dialog-title">Leave Room</Text>
+                <Text as="h2" size="H4" id="leave-room-dialog-title">Leave Room</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
index ee8deeeca..612c41117 100644
--- a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
+++ b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
@@ -66,7 +66,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Leave Space</Text>
+                <Text as="h2" size="H4">Leave Space</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
index 0b0927ac8..dfef32dd7 100644
--- a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
+++ b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
@@ -23,7 +23,7 @@ export const RoomTopicViewer = as<
   >
     <Header className={css.ModalHeader} variant="Surface" size="500">
       <Box grow="Yes">
-        <Text size="H4" truncate id="room-topic-title">
+        <Text as="h2" size="H4" truncate id="room-topic-title">
           {name}
         </Text>
       </Box>
diff --git a/src/app/components/uia-stages/DummyStage.tsx b/src/app/components/uia-stages/DummyStage.tsx
index 7e0f85861..97a79803c 100644
--- a/src/app/components/uia-stages/DummyStage.tsx
+++ b/src/app/components/uia-stages/DummyStage.tsx
@@ -18,7 +18,7 @@ function DummyErrorDialog({
     <Dialog>
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
           <Text>{message}</Text>
         </Box>
         <Button variant="Critical" onClick={onRetry}>
diff --git a/src/app/components/uia-stages/EmailStage.tsx b/src/app/components/uia-stages/EmailStage.tsx
index 0d286c072..6211d2725 100644
--- a/src/app/components/uia-stages/EmailStage.tsx
+++ b/src/app/components/uia-stages/EmailStage.tsx
@@ -37,7 +37,7 @@ function EmailErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
           <Text>{message}</Text>
           <Text as="label" htmlFor="retryEmailInput" size="L400" style={{ paddingTop: config.space.S400 }}>
             Email
@@ -141,7 +141,7 @@ export function EmailStageDialog({
       <Dialog>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
           <Box direction="Column" gap="100">
-            <Text size="H4">Verification Request Sent</Text>
+            <Text as="h2" size="H4">Verification Request Sent</Text>
             <Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>
 
             {errorCode && (
diff --git a/src/app/components/uia-stages/PasswordStage.tsx b/src/app/components/uia-stages/PasswordStage.tsx
index 41954a6cf..6cfe05ed5 100644
--- a/src/app/components/uia-stages/PasswordStage.tsx
+++ b/src/app/components/uia-stages/PasswordStage.tsx
@@ -43,7 +43,7 @@ export function PasswordStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text size="H4">Account Password</Text>
+          <Text as="h2" size="H4">Account Password</Text>
         </Box>
         <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
           <Icon src={Icons.Cross} />
diff --git a/src/app/components/uia-stages/RegistrationTokenStage.tsx b/src/app/components/uia-stages/RegistrationTokenStage.tsx
index 4593d5805..9ec8cb7f7 100644
--- a/src/app/components/uia-stages/RegistrationTokenStage.tsx
+++ b/src/app/components/uia-stages/RegistrationTokenStage.tsx
@@ -35,7 +35,7 @@ function RegistrationTokenErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
           <Text>{message}</Text>
           <Text as="label" htmlFor="retryTokenInput" size="L400" style={{ paddingTop: config.space.S400 }}>
             Registration Token
diff --git a/src/app/components/uia-stages/SSOStage.tsx b/src/app/components/uia-stages/SSOStage.tsx
index 2548d1e04..187b18ed1 100644
--- a/src/app/components/uia-stages/SSOStage.tsx
+++ b/src/app/components/uia-stages/SSOStage.tsx
@@ -54,7 +54,7 @@ export function SSOStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text size="H4">SSO Login</Text>
+          <Text as="h2" size="H4">SSO Login</Text>
         </Box>
         <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
           <Icon src={Icons.Cross} />
diff --git a/src/app/components/uia-stages/TermsStage.tsx b/src/app/components/uia-stages/TermsStage.tsx
index f69770534..ef8a5a38b 100644
--- a/src/app/components/uia-stages/TermsStage.tsx
+++ b/src/app/components/uia-stages/TermsStage.tsx
@@ -18,7 +18,7 @@ function TermsErrorDialog({
     <Dialog>
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
           <Text>{message}</Text>
         </Box>
         <Button variant="Critical" onClick={onRetry}>
diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx
index ce3875927..cbbc05774 100644
--- a/src/app/components/user-profile/PowerChip.tsx
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -68,7 +68,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Self Demotion</Text>
+                <Text as="h2" size="H4">Self Demotion</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
@@ -118,7 +118,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Shared Power</Text>
+                <Text as="h2" size="H4">Shared Power</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx
index 8fb037aac..3f34c65c5 100644
--- a/src/app/features/add-existing/AddExisting.tsx
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -198,7 +198,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                 }}
               >
                 <Box grow="Yes">
-                  <Text size="H4">Add Existing</Text>
+                  <Text as="h2" size="H4">Add Existing</Text>
                 </Box>
                 <Box shrink="No">
                   <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx
index 9bf179a92..0ce3af8b1 100644
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@@ -146,7 +146,6 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
           radii="400"
           size="400"
           onClick={() => onToggle()}
-          aria-label={enabled ? 'Stop Video' : 'Start Video'}
           aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
           outlined
         >
diff --git a/src/app/features/common-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx
index 7ddb019c1..4c6ca6274 100644
--- a/src/app/features/common-settings/general/RoomEncryption.tsx
+++ b/src/app/features/common-settings/general/RoomEncryption.tsx
@@ -121,7 +121,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                     size="500"
                   >
                     <Box grow="Yes">
-                      <Text size="H4">Enable Encryption</Text>
+                      <Text as="h2" size="H4">Enable Encryption</Text>
                     </Box>
                     <IconButton size="300" onClick={() => setPrompt(false)} radii="300" aria-label="Cancel">
                       <Icon src={Icons.Cross} />
diff --git a/src/app/features/common-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx
index 754b5e6f4..c397e51c0 100644
--- a/src/app/features/common-settings/general/RoomUpgrade.tsx
+++ b/src/app/features/common-settings/general/RoomUpgrade.tsx
@@ -103,7 +103,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
+                <Text as="h2" size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
               </Box>
               <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 15dca312f..580453827 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -283,7 +283,6 @@ export function Members({ requestClose }: MembersProps) {
                   radii="Pill"
                   outlined
                   size="300"
-                  aria-label="Scroll to Top"
                 >
                   <Icon src={Icons.ChevronTop} size="300" />
                 </IconButton>
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 85a265e5a..19727c019 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -366,7 +366,6 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                 radii="Pill"
                 outlined
                 size="300"
-                aria-label="Scroll to Top"
               >
                 <Icon src={Icons.ChevronTop} size="300" />
               </IconButton>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 4aacf392d..1021e0953 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -808,7 +808,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 variant="SurfaceVariant"
                 size="300"
                 radii="300"
-                aria-label="Share location"
                 title="Share location"
               >
                 {locating ? (
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index 2f04a7337..437cf1495 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -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 && (
diff --git a/src/app/pages/auth/register/PasswordRegisterForm.tsx b/src/app/pages/auth/register/PasswordRegisterForm.tsx
index c560e90c5..de03a2942 100644
--- a/src/app/pages/auth/register/PasswordRegisterForm.tsx
+++ b/src/app/pages/auth/register/PasswordRegisterForm.tsx
@@ -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"
diff --git a/src/app/pages/auth/reset-password/PasswordResetForm.tsx b/src/app/pages/auth/reset-password/PasswordResetForm.tsx
index fa2128cf1..e33b757a5 100644
--- a/src/app/pages/auth/reset-password/PasswordResetForm.tsx
+++ b/src/app/pages/auth/reset-password/PasswordResetForm.tsx
@@ -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"