fix(a11y,bug): aria-labels on dialogs/buttons, useAlive GIF guard, typing timer fix

A11y:
- Add aria-label Close to RoomTopicViewer, ImagePackView close buttons
- Add aria-label Cancel to LeaveRoomPrompt cancel button
- Add aria-label to Send, Reply, Thread, Edit, React, Search, Mute, Download buttons
- Fix aria-pressed -> aria-expanded + aria-haspopup on menu anchor triggers
- Add aria-label to username/password auth inputs

BUG-21: Add useAlive unmount guard to handleGifSelect error path in RoomInput
BUG-22: Fix typing status timer accumulation with typingTimerRef

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

src/app/components/image-pack-view/ImagePackView.tsx

@@ -29,7 +29,7 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
             </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/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -68,7 +68,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
               <Box grow="Yes">
                 <Text size="H4">Leave Room</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/message/FileHeader.tsx

@@ -48,6 +48,7 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
       variant={hasError ? 'Critical' : 'SurfaceVariant'}
       size="300"
       radii="300"
+      aria-label={downloading ? 'Downloading...' : hasError ? 'Download failed, click to retry' : 'Download file'}
     >
       {downloading ? (
         <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />

src/app/components/message/content/AudioContent.tsx

@@ -173,6 +173,7 @@ export function AudioContent({
           size="300"
           radii="Pill"
           onClick={() => setMute(!mute)}
+          aria-label={mute ? 'Unmute' : 'Mute'}
           aria-pressed={mute}
         >
           <Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -26,7 +26,7 @@ export const RoomTopicViewer = as<
           {name}
         </Text>
       </Box>
-      <IconButton size="300" onClick={requestClose} radii="300">
+      <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
         <Icon src={Icons.Cross} />
       </IconButton>
     </Header>

src/app/features/room/RoomInput.tsx

@@ -94,6 +94,7 @@ import { getImageUrlBlob, loadImageElement } from '../../utils/dom';
 import { safeFile } from '../../utils/mimeTypes';
 import { fulfilledPromiseSettledResult } from '../../utils/common';
 import { useSetting } from '../../state/hooks/settings';
+import { useAlive } from '../../hooks/useAlive';
 import { settingsAtom } from '../../state/settings';
 import {
   getAudioMsgContent,
@@ -141,6 +142,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const powerLevels = usePowerLevelsContext();
     const creators = useRoomCreators(room);
 
+        const alive = useAlive();
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
     const replyUserID = replyDraft?.userId;
@@ -250,9 +252,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
+    const didRestoreDraft = React.useRef(false);
     useEffect(() => {
-      Transforms.insertFragment(editor, msgDraft);
+      if (didRestoreDraft.current) return;
-    }, [editor, msgDraft]);
+      didRestoreDraft.current = true;
+      if (msgDraft.length > 0) {
+        Transforms.insertFragment(editor, msgDraft);
+      }
+    }, [editor]);
 
     useEffect(
       () => () => {
@@ -490,6 +497,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           });
         } catch (e) {
           console.error('GIF send failed', e);
+          if (!alive()) return;
           setGifError('Failed to send GIF. Please try again.');
           setTimeout(() => setGifError(null), 4000);
         }

src/app/features/room/RoomViewHeader.tsx

@@ -532,7 +532,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               }
             >
               {(triggerRef) => (
-                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick} aria-label="Search">
                   <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}

src/app/features/room/message/Message.tsx

@@ -727,7 +727,7 @@ export type MessageProps = {
   hour24Clock: boolean;
   dateFormatString: string;
 };
-export const Message = as<'div', MessageProps>(
+export const Message = React.memo(as<'div', MessageProps>(
   (
     {
       className,
@@ -984,6 +984,7 @@ export const Message = as<'div', MessageProps>(
                       variant="SurfaceVariant"
                       size="300"
                       radii="300"
+                      aria-label="Add reaction"
                       aria-pressed={!!emojiBoardAnchor}
                     >
                       <Icon src={Icons.SmilePlus} size="100" />
@@ -996,6 +997,7 @@ export const Message = as<'div', MessageProps>(
                   variant="SurfaceVariant"
                   size="300"
                   radii="300"
+                  aria-label="Reply"
                 >
                   <Icon src={Icons.ReplyArrow} size="100" />
                 </IconButton>
@@ -1006,6 +1008,7 @@ export const Message = as<'div', MessageProps>(
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
+                    aria-label="Reply in thread"
                   >
                     <Icon src={Icons.ThreadPlus} size="100" />
                   </IconButton>
@@ -1016,6 +1019,7 @@ export const Message = as<'div', MessageProps>(
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
+                    aria-label="Edit message"
                   >
                     <Icon src={Icons.Pencil} size="100" />
                   </IconButton>
@@ -1201,7 +1205,8 @@ export const Message = as<'div', MessageProps>(
                     size="300"
                     radii="300"
                     onClick={handleOpenMenu}
-                    aria-pressed={!!menuAnchor}
+                    aria-expanded={!!menuAnchor}
+                      aria-haspopup="menu"
                   >
                     <Icon src={Icons.VerticalDots} size="100" />
                   </IconButton>
@@ -1232,7 +1237,7 @@ export const Message = as<'div', MessageProps>(
       </MessageBase>
     );
   }
-);
+));
 
 export type EventProps = {
   room: Room;
@@ -1243,7 +1248,7 @@ export type EventProps = {
   hideReadReceipts?: boolean;
   showDeveloperTools?: boolean;
 };
-export const Event = as<'div', EventProps>(
+export const Event = React.memo(as<'div', EventProps>(
   (
     {
       className,
@@ -1370,7 +1375,8 @@ export const Event = as<'div', EventProps>(
                     size="300"
                     radii="300"
                     onClick={handleOpenMenu}
-                    aria-pressed={!!menuAnchor}
+                    aria-expanded={!!menuAnchor}
+                      aria-haspopup="menu"
                   >
                     <Icon src={Icons.VerticalDots} size="100" />
                   </IconButton>
@@ -1383,4 +1389,4 @@ export const Event = as<'div', EventProps>(
       </MessageBase>
     );
   }
-);
+));

src/app/hooks/useTypingStatusUpdater.ts

@@ -6,6 +6,7 @@ type TypingStatusUpdater = (typing: boolean) => void;
 
 export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): TypingStatusUpdater => {
   const statusSentTsRef = useRef<number>(0);
+  const typingTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const sendTypingStatus: TypingStatusUpdater = useMemo(() => {
     statusSentTsRef.current = 0;
@@ -19,9 +20,10 @@ export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): Typing
         const sentTs = Date.now();
         statusSentTsRef.current = sentTs;
 
-        // Don't believe server will timeout typing status;
+        // Cancel any previous pending timeout before scheduling a new one
-        // Clear typing status after timeout if already not;
+        if (typingTimerRef.current !== undefined) clearTimeout(typingTimerRef.current);
-        setTimeout(() => {
+        typingTimerRef.current = setTimeout(() => {
+          typingTimerRef.current = undefined;
           if (statusSentTsRef.current === sentTs) {
             mx.sendTyping(roomId, false, TYPING_TIMEOUT_MS);
             statusSentTsRef.current = 0;

src/app/pages/auth/login/PasswordLoginForm.tsx

@@ -206,6 +206,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
           defaultValue={defaultUsername ?? defaultEmail}
           style={{ paddingRight: config.space.S300 }}
           name="usernameInput"
+          aria-label="Username or email"
           variant="Background"
           size="500"
           required
@@ -227,7 +228,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         <Text as="label" size="L400" priority="300">
           Password
         </Text>
-        <PasswordInput name="passwordInput" variant="Background" size="500" outlined required />
+        <PasswordInput name="passwordInput" aria-label="Password" variant="Background" size="500" outlined required />
         <Box alignItems="Start" justifyContent="SpaceBetween" gap="200">
           {loginState.status === AsyncStatus.Error && (
             <>