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/settings/account/Profile.tsx

@@ -181,13 +181,22 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#profile-dialog-1',
                 onDeactivate: handleRemoveUpload,
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Modal className={ModalWide} variant="Surface" size="500">
+              <Modal
+                id="profile-dialog-1"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="profile-dialog-1-title"
+                tabIndex={-1}
+                className={ModalWide}
+                variant="Surface"
+                size="500"
+              >
                 <ImageEditor
                   name={imageFile?.name ?? 'Unnamed'}
                   url={imageFileURL}
@@ -203,13 +212,20 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#profile-dialog-2',
               onDeactivate: () => setAlertRemove(false),
               clickOutsideDeactivates: true,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog
+              id="profile-dialog-2"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="profile-dialog-1-title"
+              tabIndex={-1}
+              variant="Surface"
+            >
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -219,7 +235,9 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
                 size="500"
               >
                 <Box grow="Yes">
-                  <Text size="H4">Remove Avatar</Text>
+                  <Text id="profile-dialog-1-title" size="H4">
+                    Remove Avatar
+                  </Text>
                 </Box>
                 <IconButton
                   size="300"