From 4380041014fb9dbc5513b24e28a1d3f5550cae4b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 2 Jul 2026 11:45:21 -0400
Subject: [PATCH] feat(a11y): label form controls + overlays (P3-4)

Accessible names for ~15 controls that lacked them: invite/join/create-room/
account-data/image-pack/private-note/power-level inputs (visible <label htmlFor>
where a label exists, else aria-label); the two range sliders (night-light
intensity, noise-gate threshold); the soundboard file input; media <video>
elements; and the Media Gallery (region) + Search (dialog) overlays. Hidden
notification/preview <audio> marked aria-hidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/AccountDataEditor.tsx       |  1 +
 src/app/components/VoiceMessageRecorder.tsx    |  7 ++++++-
 .../create-room/CreateRoomAliasInput.tsx       |  5 ++++-
 .../components/image-pack-view/PackMeta.tsx    | 18 +++++++++++++++---
 .../invite-user-prompt/InviteUserPrompt.tsx    | 10 ++++++++--
 .../join-address-prompt/JoinAddressPrompt.tsx  |  5 ++++-
 .../SoundboardPackEditor.tsx                   |  1 +
 .../upload-card/UploadCardRenderer.tsx         |  1 +
 .../user-profile/UserRoomProfile.tsx           |  1 +
 .../permissions/PowersEditor.tsx               |  2 ++
 src/app/features/room/MediaGallery.tsx         |  8 +++++---
 src/app/features/room/PollCreator.tsx          |  2 --
 src/app/features/search/Search.tsx             | 10 ++++++++--
 src/app/features/settings/general/General.tsx  |  2 ++
 14 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx
index b1192f5f9..5c3ac6e4c 100644
--- a/src/app/components/AccountDataEditor.tsx
+++ b/src/app/components/AccountDataEditor.tsx
@@ -213,6 +213,7 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
           <Text size="L400">Account Data</Text>
           <Input
             variant="SurfaceVariant"
+            aria-label="Account data type"
             size="400"
             radii="300"
             readOnly
diff --git a/src/app/components/VoiceMessageRecorder.tsx b/src/app/components/VoiceMessageRecorder.tsx
index ebe75113d..ae4301dc6 100644
--- a/src/app/components/VoiceMessageRecorder.tsx
+++ b/src/app/components/VoiceMessageRecorder.tsx
@@ -282,7 +282,12 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
     >
       {previewUrl && (
         <>
-          <audio ref={previewAudioRef} src={previewUrl} onEnded={() => setPreviewPlaying(false)} />
+          <audio
+            ref={previewAudioRef}
+            src={previewUrl}
+            onEnded={() => setPreviewPlaying(false)}
+            aria-hidden="true"
+          />
           <IconButton
             onClick={() => {
               const audio = previewAudioRef.current;
diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx
index 37eb2050f..75b29e9c8 100644
--- a/src/app/components/create-room/CreateRoomAliasInput.tsx
+++ b/src/app/components/create-room/CreateRoomAliasInput.tsx
@@ -78,11 +78,14 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
 
   return (
     <Box shrink="No" direction="Column" gap="100">
-      <Text size="L400">Address (Optional)</Text>
+      <Text as="label" htmlFor="create-room-alias" size="L400">
+        Address (Optional)
+      </Text>
       <Text size="T200" priority="300">
         Pick an unique address to make it discoverable.
       </Text>
       <Input
+        id="create-room-alias"
         ref={aliasInputRef}
         onChange={handleAliasChange}
         before={
diff --git a/src/app/components/image-pack-view/PackMeta.tsx b/src/app/components/image-pack-view/PackMeta.tsx
index 824426b2e..e04169d4a 100644
--- a/src/app/components/image-pack-view/PackMeta.tsx
+++ b/src/app/components/image-pack-view/PackMeta.tsx
@@ -200,12 +200,24 @@ export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfil
         </Box>
       </Box>
       <Box direction="Inherit" gap="100">
-        <Text size="L400">Name</Text>
-        <Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
+        <Text as="label" htmlFor="image-pack-name" size="L400">
+          Name
+        </Text>
+        <Input
+          id="image-pack-name"
+          name="nameInput"
+          defaultValue={meta.name}
+          variant="Secondary"
+          radii="300"
+          required
+        />
       </Box>
       <Box direction="Inherit" gap="100">
-        <Text size="L400">Attribution</Text>
+        <Text as="label" htmlFor="image-pack-attribution" size="L400">
+          Attribution
+        </Text>
         <TextArea
+          id="image-pack-attribution"
           name="attributionTextArea"
           defaultValue={meta.attribution}
           variant="Secondary"
diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
index 098ce0b63..c9bab43a0 100644
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -261,9 +261,12 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                 gap="400"
               >
                 <Box direction="Column" gap="100">
-                  <Text size="L400">User ID</Text>
+                  <Text as="label" htmlFor="invite-user-id" size="L400">
+                    User ID
+                  </Text>
                   <div>
                     <Input
+                      id="invite-user-id"
                       size="500"
                       ref={inputRef}
                       onChange={handleSearchChange}
@@ -334,8 +337,11 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   </div>
                 </Box>
                 <Box direction="Column" gap="100">
-                  <Text size="L400">Reason (Optional)</Text>
+                  <Text as="label" htmlFor="invite-reason" size="L400">
+                    Reason (Optional)
+                  </Text>
                   <TextArea
+                    id="invite-reason"
                     size="500"
                     name="reasonInput"
                     variant="Background"
diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
index 9c25db403..88d537ca8 100644
--- a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
+++ b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx
@@ -108,8 +108,11 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
                 </Text>
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Address</Text>
+                <Text as="label" htmlFor="join-address" size="L400">
+                  Address
+                </Text>
                 <Input
+                  id="join-address"
                   size="500"
                   autoFocus
                   name="addressInput"
diff --git a/src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx b/src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx
index 2188c0252..49882fa31 100644
--- a/src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx
+++ b/src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx
@@ -278,6 +278,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
     <Box direction="Column" gap="300">
       <input
         ref={fileInputRef}
+        aria-label="Upload soundboard clip"
         type="file"
         accept={SOUNDBOARD_ACCEPT}
         multiple
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index af2820327..233d351a6 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -56,6 +56,7 @@ function PreviewVideo({ fileItem }: PreviewVideoProps) {
 
   return (
     <video
+      aria-label="Video attachment preview"
       style={{
         objectFit: 'contain',
         width: '100%',
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 3b488ebc6..1b2c25881 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -253,6 +253,7 @@ function UserPrivateNotes({ userId }: { userId: string }) {
         )}
       </Box>
       <textarea
+        aria-label="Private note about this user"
         value={draft}
         onChange={handleChange}
         maxLength={USER_NOTE_MAX_LENGTH}
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index f4debdd5a..f577621cc 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -147,6 +147,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
             <Text size="L400">Name</Text>
             <Input
               name="nameInput"
+              aria-label="Power level name"
               defaultValue={tag?.name}
               placeholder="Bot"
               size="300"
@@ -160,6 +161,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
             <Input
               defaultValue={power}
               name="powerInput"
+              aria-label="Power level value"
               size="300"
               variant={typeof power === 'number' ? 'SurfaceVariant' : 'Secondary'}
               radii="300"
diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx
index cd8543f7f..44138016e 100644
--- a/src/app/features/room/MediaGallery.tsx
+++ b/src/app/features/room/MediaGallery.tsx
@@ -186,8 +186,8 @@ function LightboxMedia({
       )}
       {media.status === 'ok' &&
         (item.msgtype === MsgType.Video ? (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
           <video
+            aria-label="Video attachment"
             src={media.url}
             controls
             autoPlay
@@ -261,7 +261,7 @@ function Lightbox({
           escapeDeactivates: false,
         }}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        {}
         <div
           role="dialog"
           aria-modal
@@ -640,13 +640,15 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
         className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Background' }))}
         shrink="No"
         direction="Column"
+        role="region"
+        aria-labelledby="media-gallery-title"
       >
         {/* Header */}
         <Header variant="Background" size="600" className={css.MediaGalleryHeader}>
           <Box grow="Yes" alignItems="Center" gap="200">
             <Icon size="200" src={Icons.Photo} />
             <Box grow="Yes">
-              <Text size="H4" truncate>
+              <Text id="media-gallery-title" size="H4" truncate>
                 Media Gallery
               </Text>
             </Box>
diff --git a/src/app/features/room/PollCreator.tsx b/src/app/features/room/PollCreator.tsx
index 33efb20c7..8a9716c1b 100644
--- a/src/app/features/room/PollCreator.tsx
+++ b/src/app/features/room/PollCreator.tsx
@@ -142,7 +142,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
                   placeholder="Ask a question…"
                   value={question}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuestion(e.target.value)}
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
                   autoFocus
                 />
               </Box>
@@ -151,7 +150,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
               <Box direction="Column" gap="200">
                 <Text size="L400">Options</Text>
                 {options.map((opt, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
                   <Box key={index} alignItems="Center" gap="200">
                     <Input
                       style={{ flex: 1 }}
diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index 0df7dc3b7..bafe6213d 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -247,7 +247,6 @@ export function Search({ requestClose }: SearchProps) {
         <FocusTrap
           focusTrapOptions={{
             initialFocus: () => inputRef.current,
-            returnFocusOnDeactivate: false,
             allowOutsideClick: true,
             clickOutsideDeactivates: true,
             onDeactivate: requestClose,
@@ -257,7 +256,13 @@ export function Search({ requestClose }: SearchProps) {
             },
           }}
         >
-          <Modal size="400" style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}>
+          <Modal
+            size="400"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Search"
+            style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}
+          >
             <Box
               shrink="No"
               style={{ padding: config.space.S400, paddingBottom: 0 }}
@@ -270,6 +275,7 @@ export function Search({ requestClose }: SearchProps) {
                 radii="400"
                 outlined
                 placeholder="Search"
+                aria-label="Search rooms"
                 before={<Icon size="200" src={Icons.Search} />}
                 onChange={handleInputChange}
                 onKeyDown={handleInputKeyDown}
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 822d68764..c445637f0 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -531,6 +531,7 @@ function Appearance() {
               Intensity: {nightLightOpacity}%
             </Text>
             <input
+              aria-label="Night light intensity"
               type="range"
               min={5}
               max={80}
@@ -1663,6 +1664,7 @@ function Calls() {
                     <Text size="T200">{callDenoiseGateThreshold} dB</Text>
                   </Box>
                   <input
+                    aria-label="Noise gate threshold"
                     type="range"
                     min="-100"
                     max="0"