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/components/user-profile/PowerChip.tsx

@@ -55,20 +55,27 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#powerchip-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog
+            id="powerchip-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="powerchip-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+          >
             <Header
               style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               variant="Surface"
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="powerchip-dialog-1-title" as="h2" size="H4">
                   Self Demotion
                 </Text>
               </Box>
@@ -107,20 +114,27 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#powerchip-dialog-2',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog
+            id="powerchip-dialog-2"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="powerchip-dialog-2-title"
+            tabIndex={-1}
+            variant="Surface"
+          >
             <Header
               style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               variant="Surface"
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="powerchip-dialog-2-title" as="h2" size="H4">
                   Shared Power
                 </Text>
               </Box>

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

@@ -79,13 +79,18 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             <OverlayCenter>
               <FocusTrap
                 focusTrapOptions={{
-                  initialFocus: false,
+                  fallbackFocus: '#userhero-dialog-1',
                   onDeactivate: () => setViewAvatar(undefined),
                   clickOutsideDeactivates: true,
                   escapeDeactivates: stopPropagation,
                 }}
               >
                 <Modal
+                  id="userhero-dialog-1"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="userhero-dialog-1-title"
+                  tabIndex={-1}
                   size="500"
                   className={ModalMobileFull}
                   onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
@@ -131,6 +136,7 @@ export function UserHeroName({
     <Box grow="Yes" direction="Column" gap="0">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
+          id="userhero-dialog-1-title"
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
           title={displayName ?? username}