feat(a11y): form input labels (H-6), remaining button labels (C-1)

H-6: aria-label on all form inputs missing accessible names:
  - Login: username, password (already done)
  - Register: username, password, confirm, token, email
  - Password reset: email, new password, confirm password
  - Settings: display name, user ID to ignore, keyword, page zoom,
    date format, device name, backup passwords (new/confirm/restore)
  - Auth: server URL picker input
C-1: additional icon buttons:
  - RoomInput: toolbar toggle (aria-pressed + label)
  - Lobby/Members: scroll to top, toggle member list
  - UIAFlowOverlay: cancel authentication
  - BackupRestore: backup options menu
  - UrlPreview: previous/next preview buttons
  - RoomPacks: undo remove/remove pack buttons
  - RoomViewHeader: start call, member list toggle
  - ServerPicker: change server button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/BackupRestore.tsx

@@ -178,6 +178,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
           )}
           <IconButton
             aria-pressed={!!menuCords}
+            aria-label="Backup options"
             size="300"
             variant="Surface"
             radii="300"

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -108,7 +108,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
         <Header className={css.PdfViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/UIAFlowOverlay.tsx

@@ -55,6 +55,7 @@ export function UIAFlowOverlay({
                 <IconButton
                   ref={anchorRef}
                   variant="Critical"
+                  aria-label="Cancel authentication"
                   size="300"
                   onClick={onCancel}
                   radii="Pill"

src/app/components/image-editor/ImageEditor.tsx

@@ -24,7 +24,7 @@ export const ImageEditor = as<'div', ImageEditorProps>(
       >
         <Header className={css.ImageEditorHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/image-viewer/ImageViewer.tsx

@@ -33,7 +33,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
       >
         <Header className={css.ImageViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -173,7 +173,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   </Text>
                 </Box>
                 <Box shrink="No">
-                  <IconButton size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -82,7 +82,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
               <Box grow="Yes">
                 <Text size="H4">Join with Address</Text>
               </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -68,7 +68,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
               <Box grow="Yes">
                 <Text size="H4">Leave Space</Text>
               </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/components/text-viewer/TextViewer.tsx

@@ -53,7 +53,7 @@ export const TextViewer = as<'div', TextViewerProps>(
       >
         <Header className={css.TextViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -182,6 +182,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
               <div className={css.UrlPreviewHolderGradient({ position: 'Left' })} />
               <IconButton
                 className={css.UrlPreviewHolderBtn({ position: 'Left' })}
+                aria-label="Previous preview"
                 variant="Secondary"
                 radii="Pill"
                 size="300"
@@ -200,6 +201,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
                 <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
                 <IconButton
                   className={css.UrlPreviewHolderBtn({ position: 'Right' })}
+                  aria-label="Next preview"
                   variant="Primary"
                   radii="Pill"
                   size="300"

src/app/components/user-profile/PowerChip.tsx

@@ -70,7 +70,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
               <Box grow="Yes">
                 <Text size="H4">Self Demotion</Text>
               </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/add-existing/AddExisting.tsx

@@ -201,7 +201,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                   <Text size="H4">Add Existing</Text>
                 </Box>
                 <Box shrink="No">
-                  <IconButton size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>

src/app/features/call-status/CallControl.tsx

@@ -62,6 +62,7 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
           radii="300"
           size="300"
           onClick={() => onToggle()}
+          aria-label={enabled ? 'Undeafen' : 'Deafen'}
           outlined
           disabled={disabled}
         >
@@ -99,6 +100,7 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           radii="300"
           size="300"
           onClick={() => onToggle()}
+          aria-label={enabled ? 'Stop Video' : 'Start Video'}
           outlined
           disabled={disabled}
         >
@@ -136,6 +138,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
           radii="300"
           size="300"
           onClick={onToggle}
+          aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
           outlined
           disabled={disabled}
         >

src/app/features/call/Controls.tsx

@@ -33,6 +33,7 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           radii="400"
           size="400"
           onClick={() => onToggle()}
+          aria-label={enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
           outlined
         >
           <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
@@ -65,6 +66,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
           radii="400"
           size="400"
           onClick={() => onToggle()}
+          aria-label={enabled ? 'Undeafen' : 'Deafen'}
           outlined
         >
           <Icon
@@ -142,6 +144,8 @@ 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
         >
           <Icon size="400" src={Icons.ScreenShare} filled={enabled} />
@@ -172,6 +176,8 @@ export function ChatButton() {
           radii="400"
           size="400"
           onClick={() => setChat(!chat)}
+          aria-label={chat ? 'Close Chat' : 'Open Chat'}
+          aria-pressed={chat}
           outlined
         >
           <Icon size="400" src={Icons.Message} filled={chat} />

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -92,7 +92,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -118,7 +118,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -29,7 +29,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -218,6 +218,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
                     size="300"
                     radii="Pill"
                     variant="Critical"
+                    aria-label="Undo remove pack"
                     onClick={() => handleUndoRemove(address)}
                     disabled={applyingChanges}
                   >
@@ -228,6 +229,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
                     size="300"
                     radii="Pill"
                     variant="Secondary"
+                    aria-label="Remove pack"
                     onClick={() => handleRemove(address)}
                     disabled={applyingChanges}
                   >

src/app/features/common-settings/members/Members.tsx

@@ -161,7 +161,7 @@ export function Members({ requestClose }: MembersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>
@@ -278,6 +278,7 @@ export function Members({ requestClose }: MembersProps) {
               >
                 <IconButton
                   onClick={() => virtualizer.scrollToOffset(0)}
+                  aria-label="Scroll to top"
                   variant="Surface"
                   radii="Pill"
                   outlined

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -369,7 +369,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/create-room/CreateRoomModal.tsx

@@ -63,7 +63,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     </Text>
                   </Box>
                   <Box shrink="No">
-                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                    <IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Box>

src/app/features/create-space/CreateSpaceModal.tsx

@@ -61,7 +61,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
                     <Text size="H4">New Space</Text>
                   </Box>
                   <Box shrink="No">
-                    <IconButton size="300" radii="300" onClick={closeDialog}>
+                    <IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Box>

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -38,7 +38,7 @@ export function JoinBeforeNavigate({
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}

src/app/features/lobby/Lobby.tsx

@@ -446,6 +446,7 @@ export function Lobby() {
                   >
                     <IconButton
                       onClick={() => virtualizer.scrollToOffset(0)}
+                      aria-label="Scroll to top"
                       variant="SurfaceVariant"
                       radii="Pill"
                       outlined

src/app/features/lobby/LobbyHeader.tsx

@@ -165,7 +165,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
             <Box shrink="No">
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton fill="None" onClick={onBack}>
+                  <IconButton fill="None" onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
@@ -221,6 +221,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 <IconButton
                   fill="None"
                   ref={triggerRef}
+                  aria-label="Toggle member list"
                   onClick={() => setPeopleDrawer((drawer) => !drawer)}
                 >
                   <Icon size="400" src={Icons.User} />

src/app/features/room-settings/RoomSettings.tsx

@@ -117,7 +117,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
               </Box>
               <Box shrink="No">
                 {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
+                  <IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 )}

src/app/features/room-settings/general/General.tsx

@@ -35,7 +35,7 @@ export function General({ requestClose }: GeneralProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room-settings/permissions/Permissions.tsx

@@ -45,7 +45,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room/CallChatView.tsx

@@ -41,7 +41,7 @@ export function CallChatView() {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose} aria-label="Close call chat">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               )}

src/app/features/room/MembersDrawer.tsx

@@ -89,6 +89,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
               <IconButton
                 ref={triggerRef}
                 variant="Background"
+                aria-label="Close member list"
                 onClick={() => setPeopleDrawer(false)}
               >
                 <Icon src={Icons.Cross} />
@@ -360,6 +361,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
             <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
               <IconButton
                 onClick={() => virtualizer.scrollToOffset(0)}
+                aria-label="Scroll to top"
                 variant="Surface"
                 radii="Pill"
                 outlined

src/app/features/room/RoomInput.tsx

@@ -629,6 +629,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 >
                   <IconButton
                     onClick={() => setReplyDraft(undefined)}
+                    aria-label="Dismiss reply"
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
@@ -661,6 +662,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           before={
             <IconButton
               onClick={() => pickFile('*')}
+              aria-label="Attach file"
               variant="SurfaceVariant"
               size="300"
               radii="300"
@@ -674,6 +676,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 variant="SurfaceVariant"
                 size="300"
                 radii="300"
+                aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
+                aria-pressed={toolbar}
                 onClick={() => setToolbar(!toolbar)}
               >
                 <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
@@ -714,6 +718,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     {!hideStickerBtn && (
                       <IconButton
                         aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
+                        aria-label="Insert sticker"
                         onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
                         variant="SurfaceVariant"
                         size="300"
@@ -727,6 +732,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     )}
                     <IconButton
                       ref={emojiBtnRef}
+                      aria-label="Insert emoji"
                       aria-pressed={
                         hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
                       }
@@ -768,6 +774,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     >
                       <IconButton
                         ref={gifBtnRef}
+                        aria-label="Insert GIF"
                         aria-pressed={gifOpen}
                         onClick={() => setGifOpen(!gifOpen)}
                         variant="SurfaceVariant"
@@ -797,6 +804,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               )}
               <IconButton
                 onClick={handleShareLocation}
+                aria-label="Share location"
                 variant="SurfaceVariant"
                 size="300"
                 radii="300"

src/app/features/room/RoomViewHeader.tsx

@@ -340,6 +340,7 @@ function CallButton() {
             variant="Surface"
             fill="None"
             ref={triggerRef}
+            aria-label="Start call"
             onClick={handleOpenMenu}
             onContextMenu={(evt) => {
               evt.preventDefault();
@@ -456,7 +457,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
           <BackRouteHandler>
             {(onBack) => (
               <Box shrink="No" alignItems="Center">
-                <IconButton fill="None" onClick={onBack}>
+                <IconButton fill="None" onClick={onBack} aria-label="Back">
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               </Box>
@@ -615,7 +616,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               }
             >
               {(triggerRef) => (
-                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle} aria-label="Toggle member list">
                   <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}

src/app/features/room/jump-to-time/JumpToTime.tsx

@@ -108,7 +108,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
               <Box grow="Yes">
                 <Text size="H4">Jump to Time</Text>
               </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -100,7 +100,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
             <Box grow="Yes">
               <Text size="H3" truncate>{`Reacted with :${selectedShortcode}:`}</Text>
             </Box>
-            <IconButton size="300" onClick={requestClose}>
+            <IconButton size="300" onClick={requestClose} aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Header>

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -146,6 +146,7 @@ function PinnedMessage({
       </Chip>
       {canPinEvent && (
         <IconButton
+          aria-label="Pinned messages"
           data-event-id={eventId}
           variant="Secondary"
           size="300"
@@ -457,7 +458,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
               <Text size="H5">Pinned Messages</Text>
             </Box>
             <Box shrink="No">
-              <IconButton size="300" onClick={requestClose} radii="300">
+              <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} size="400" />
               </IconButton>
             </Box>

src/app/features/settings/account/IgnoredUserList.tsx

@@ -57,6 +57,7 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
         <Input
           required
           name="userIdInput"
+          aria-label="User ID to ignore"
           value={userId}
           onChange={handleChange}
           variant="Secondary"

src/app/features/settings/account/Profile.tsx

@@ -263,6 +263,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
             <Input
               required
               name="displayNameInput"
+              aria-label="Display name"
               value={displayName}
               onChange={handleChange}
               variant="Secondary"

src/app/features/settings/devices/DeviceTile.tsx

@@ -150,6 +150,7 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
         <Box grow="Yes" direction="Column">
           <Input
             name="nameInput"
+            aria-label="Device display name"
             size="300"
             variant="Secondary"
             radii="300"

src/app/features/settings/devices/LocalBackup.tsx

@@ -70,6 +70,7 @@ function ExportKeys() {
                   <PasswordInput
                     ref={passRef}
                     name="passwordInput"
+                    aria-label="New backup password"
                     size="400"
                     variant="Secondary"
                     radii="300"
@@ -85,6 +86,7 @@ function ExportKeys() {
                     ref={confPassRef}
                     style={{ color: match ? undefined : color.Critical.Main }}
                     name="confirmPasswordInput"
+                    aria-label="Confirm backup password"
                     size="400"
                     variant="Secondary"
                     radii="300"
@@ -212,6 +214,7 @@ function ImportKeys({ file, onDone }: ImportKeysProps) {
             <Text size="L400">Password</Text>
             <PasswordInput
               name="passwordInput"
+              aria-label="Backup password"
               size="400"
               variant="Secondary"
               radii="300"

src/app/features/settings/general/General.tsx

@@ -293,6 +293,7 @@ function PageZoomInput() {
   return (
     <Input
       style={{ width: toRem(100) }}
+      aria-label="Page zoom percentage"
       variant={pageZoom === parseInt(currentZoom, 10) ? 'Secondary' : 'Success'}
       size="300"
       radii="300"
@@ -617,6 +618,7 @@ function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
           <Input
             required
             name="customDateFormatInput"
+            aria-label="Custom date format"
             value={dateFormatCustom}
             onChange={handleChange}
             maxLength={16}

src/app/features/settings/notifications/KeywordMessages.tsx

@@ -65,6 +65,7 @@ function KeywordInput() {
         <Input
           required
           name="keywordInput"
+          aria-label="Notification keyword"
           value={keyword}
           onChange={handleChange}
           variant="Secondary"

src/app/features/space-settings/SpaceSettings.tsx

@@ -117,7 +117,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
               </Box>
               <Box shrink="No">
                 {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
+                  <IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 )}

src/app/features/space-settings/general/General.tsx

@@ -33,7 +33,7 @@ export function General({ requestClose }: GeneralProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/space-settings/permissions/Permissions.tsx

@@ -45,7 +45,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/pages/auth/ServerPicker.tsx

@@ -80,6 +80,7 @@ export function ServerPicker({
   return (
     <Input
       ref={serverInputRef}
+      aria-label="Matrix server URL"
       style={{ paddingRight: config.space.S200 }}
       variant={allowCustomServer ? 'Background' : 'Surface'}
       outlined
@@ -130,6 +131,7 @@ export function ServerPicker({
           >
             <IconButton
               onClick={handleOpenServerMenu}
+              aria-label="Change server"
               variant={allowCustomServer ? 'Background' : 'Surface'}
               size="300"
               aria-pressed={!!serverMenuAnchor}

src/app/pages/auth/register/PasswordRegisterForm.tsx

@@ -265,6 +265,7 @@ export function PasswordRegisterForm({
             variant="Background"
             defaultValue={defaultUsername}
             name="usernameInput"
+            aria-label="Username"
             size="500"
             outlined
             required
@@ -290,6 +291,7 @@ export function PasswordRegisterForm({
                   ref={passRef}
                   onChange={doMatch}
                   name="passwordInput"
+                  aria-label="Password"
                   variant="Background"
                   size="500"
                   outlined
@@ -320,6 +322,7 @@ export function PasswordRegisterForm({
                   ref={confPassRef}
                   onChange={doMatch}
                   name="confirmPasswordInput"
+                  aria-label="Confirm password"
                   variant="Background"
                   size="500"
                   style={{ color: match ? undefined : color.Critical.Main }}
@@ -341,6 +344,7 @@ export function PasswordRegisterForm({
               variant="Background"
               defaultValue={defaultRegisterToken}
               name="tokenInput"
+              aria-label="Registration token"
               size="500"
               required={requiredStageInFlows(uiaFlows, AuthType.RegistrationToken)}
               outlined
@@ -356,6 +360,7 @@ export function PasswordRegisterForm({
               variant="Background"
               defaultValue={defaultEmail}
               name="emailInput"
+              aria-label="Email address"
               type="email"
               size="500"
               required={requiredStageInFlows(uiaFlows, AuthType.Email)}

src/app/pages/auth/reset-password/PasswordResetForm.tsx

@@ -177,6 +177,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
           defaultValue={defaultEmail}
           type="email"
           name="emailInput"
+          aria-label="Email address"
           variant="Background"
           size="500"
           required
@@ -199,6 +200,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
                 ref={passRef}
                 onChange={doMatch}
                 name="passwordInput"
+                aria-label="New password"
                 variant="Background"
                 size="500"
                 outlined
@@ -213,6 +215,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
                 ref={confPassRef}
                 onChange={doMatch}
                 name="confirmPasswordInput"
+                aria-label="Confirm new password"
                 variant="Background"
                 size="500"
                 style={{ color: match ? undefined : color.Critical.Main }}