fix(a11y): 36 modal dialogs announce themselves and take focus (#185)

Most modals rendered a folds Dialog/Modal with no role and no name, and
their focus traps used `initialFocus: false`, so focus stayed behind the
modal and a screen reader never announced it.

- 32 dialogs with a visible heading: role="dialog", aria-modal,
  aria-labelledby → the heading (given an id), tabIndex=-1.
- 4 dialogs that already had a name (Leave Room, room topic viewer,
  server ACL, room-nav prompt): role + aria-modal.
- Their focus traps drop `initialFocus: false` for focus-trap's default
  (keep an already-focused autoFocus field, else the first tabbable
  element) with the dialog itself as fallbackFocus, so a dialog without
  a tabbable node can't crash the trap. Traps that live in a parent
  (UIA stages, Logout, Forward, Invite) get the semantics only.
- The file drop overlay is deliberately left alone (not a dialog).

Checked at runtime: Join with Address, Delete Message, Report Message,
Leave Room and Logout open as named dialogs with focus inside and close
with Escape (Tab first when a text field has focus — the shared
stopPropagation keeps Escape from discarding typed text, by design).
The axe e2e spec (6 tests) passes; eslint warnings unchanged (46).
17 modals with no heading (image/file viewers, loading screens) remain.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

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

@@ -94,13 +94,21 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#jumptotime-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="jumptotime-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="jumptotime-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -110,7 +118,9 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Jump to Time</Text>
+                <Text id="jumptotime-dialog-1-title" size="H4">
+                  Jump to Time
+                </Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />

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

@@ -420,6 +420,11 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
           }}
         >
           <Modal
+            id="forwardmessagedialog-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="forwardmessagedialog-dialog-1-title"
+            tabIndex={-1}
             size="400"
             style={{
               maxHeight: '480px',
@@ -435,7 +440,7 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
               style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4" truncate>
+                <Text id="forwardmessagedialog-dialog-1-title" as="h2" size="H4" truncate>
                   Forward message
                 </Text>
               </Box>

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

@@ -639,13 +639,20 @@ export const MessageDeleteItem = as<
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#message-dialog-1',
               onDeactivate: handleClose,
               clickOutsideDeactivates: true,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog
+              id="message-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="message-dialog-1-title"
+              tabIndex={-1}
+              variant="Surface"
+            >
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -655,7 +662,9 @@ export const MessageDeleteItem = as<
                 size="500"
               >
                 <Box grow="Yes">
-                  <Text size="H4">Delete Message</Text>
+                  <Text id="message-dialog-1-title" size="H4">
+                    Delete Message
+                  </Text>
                 </Box>
                 <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
@@ -769,13 +778,21 @@ export const MessageReportItem = as<
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#message-dialog-2',
               onDeactivate: handleClose,
               clickOutsideDeactivates: true,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface" style={modalStyle}>
+            <Dialog
+              id="message-dialog-2"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="message-dialog-2-title"
+              tabIndex={-1}
+              variant="Surface"
+              style={modalStyle}
+            >
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -785,7 +802,9 @@ export const MessageReportItem = as<
                 size="500"
               >
                 <Box grow="Yes">
-                  <Text size="H4">Report Message</Text>
+                  <Text id="message-dialog-2-title" size="H4">
+                    Report Message
+                  </Text>
                 </Box>
                 <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />