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/DeviceVerification.tsx

@@ -365,15 +365,23 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#deviceverification-dialog-1',
             clickOutsideDeactivates: false,
             escapeDeactivates: false,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="deviceverification-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="deviceverification-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="deviceverification-dialog-1-title" as="h2" size="H4">
                   Device Verification
                 </Text>
               </Box>

src/app/components/DeviceVerificationSetup.tsx

@@ -293,7 +293,15 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
     const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
+        id="deviceverificationsetup-dialog-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="deviceverificationsetup-dialog-1-title"
+        tabIndex={-1}
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -303,7 +311,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-1-title" as="h2" size="H4">
               Setup Device Verification
             </Text>
           </Box>
@@ -331,7 +339,15 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
     const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
+        id="deviceverificationsetup-dialog-2"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="deviceverificationsetup-dialog-2-title"
+        tabIndex={-1}
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -341,7 +357,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-2-title" as="h2" size="H4">
               Reset Device Verification
             </Text>
           </Box>

src/app/components/LogoutDialog.tsx

@@ -52,7 +52,16 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
 
     return (
-      <Dialog variant="Surface" ref={ref} style={modalStyle}>
+      <Dialog
+        id="logoutdialog-dialog-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="logoutdialog-dialog-1-title"
+        tabIndex={-1}
+        variant="Surface"
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -62,7 +71,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="logoutdialog-dialog-1-title" as="h2" size="H4">
               Logout
             </Text>
           </Box>

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -189,14 +189,21 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog style={modalStyle}>
+          <Dialog
+            id="inviteuserprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="inviteuserprompt-dialog-1-title"
+            tabIndex={-1}
+            style={modalStyle}
+          >
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
                 style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               >
                 <Box grow="Yes">
-                  <Text size="H4" truncate>
+                  <Text id="inviteuserprompt-dialog-1-title" size="H4" truncate>
                     {t('Organisms.InviteUser.invite')}
                   </Text>
                 </Box>

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -67,13 +67,21 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#joinaddressprompt-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="joinaddressprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="joinaddressprompt-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -82,7 +90,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="joinaddressprompt-dialog-1-title" as="h2" size="H4">
                   Join with Address
                 </Text>
               </Box>

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -52,13 +52,21 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#leaveroomprompt-dialog',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title" style={modalStyle}>
+          <Dialog
+            id="leaveroomprompt-dialog"
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
+            variant="Surface"
+            aria-labelledby="leave-room-dialog-title"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -52,13 +52,21 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#leavespaceprompt-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="leavespaceprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="leavespaceprompt-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -68,7 +76,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="leavespaceprompt-dialog-1-title" as="h2" size="H4">
                   Leave Space
                 </Text>
               </Box>

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

@@ -26,6 +26,10 @@ export const RoomTopicViewer = as<
 
   return (
     <Modal
+      id="roomtopicviewer-dialog"
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
       size="300"
       flexHeight
       className={classNames(css.ModalFlex, className)}

src/app/components/suspicious-link/SuspiciousLink.tsx

@@ -59,13 +59,21 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#suspiciouslink-dialog-1',
                 onDeactivate: () => setOpen(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Dialog variant="Surface" style={{ maxWidth: 440 }}>
+              <Dialog
+                id="suspiciouslink-dialog-1"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="suspiciouslink-dialog-1-title"
+                tabIndex={-1}
+                variant="Surface"
+                style={{ maxWidth: 440 }}
+              >
                 <Header
                   style={{
                     padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -75,7 +83,7 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
                   size="500"
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="suspiciouslink-dialog-1-title" as="h2" size="H4">
                       This link doesn&apos;t go where it says
                     </Text>
                   </Box>

src/app/components/uia-stages/DummyStage.tsx

@@ -15,10 +15,16 @@ function DummyErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="dummystage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="dummystage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="dummystage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

src/app/components/uia-stages/EmailStage.tsx

@@ -28,7 +28,13 @@ function EmailErrorDialog({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="emailstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="emailstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box
         as="form"
         onSubmit={handleFormSubmit}
@@ -37,7 +43,7 @@ function EmailErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="emailstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>
@@ -145,10 +151,16 @@ export function EmailStageDialog({
 
   if (emailTokenState.status === AsyncStatus.Success) {
     return (
-      <Dialog>
+      <Dialog
+        id="emailstage-dialog-2"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="emailstage-dialog-2-title"
+        tabIndex={-1}
+      >
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
           <Box direction="Column" gap="100">
-            <Text as="h2" size="H4">
+            <Text id="emailstage-dialog-2-title" as="h2" size="H4">
               Verification Request Sent
             </Text>
             <Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>

src/app/components/uia-stages/PasswordStage.tsx

@@ -36,7 +36,13 @@ export function PasswordStage({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="passwordstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="passwordstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Header
         style={{
           padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -45,7 +51,7 @@ export function PasswordStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text as="h2" size="H4">
+          <Text id="passwordstage-dialog-1-title" as="h2" size="H4">
             {t('Organisms.PasswordStage.account_password')}
           </Text>
         </Box>

src/app/components/uia-stages/ReCaptchaStage.tsx

@@ -14,10 +14,18 @@ function ReCaptchaErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="recaptchastage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="recaptchastage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text id="recaptchastage-dialog-1-title" size="H4">
+            {title}
+          </Text>
           <Text>{message}</Text>
         </Box>
         <Button variant="Critical" fill="None" outlined onClick={onCancel}>

src/app/components/uia-stages/RegistrationTokenStage.tsx

@@ -26,7 +26,13 @@ function RegistrationTokenErrorDialog({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="registrationtokenstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="registrationtokenstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box
         as="form"
         onSubmit={handleFormSubmit}
@@ -35,7 +41,7 @@ function RegistrationTokenErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="registrationtokenstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

src/app/components/uia-stages/SSOStage.tsx

@@ -45,7 +45,13 @@ export function SSOStage({
   }, [ssoWindow, handleSubmit, ssoRedirectURL]);
 
   return (
-    <Dialog>
+    <Dialog
+      id="ssostage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="ssostage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Header
         style={{
           padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -54,7 +60,7 @@ export function SSOStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text as="h2" size="H4">
+          <Text id="ssostage-dialog-1-title" as="h2" size="H4">
             SSO Login
           </Text>
         </Box>

src/app/components/uia-stages/TermsStage.tsx

@@ -15,10 +15,16 @@ function TermsErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="termsstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="termsstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="termsstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

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}

src/app/features/add-existing/AddExisting.tsx

@@ -185,13 +185,21 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#addexisting-dialog-1',
             clickOutsideDeactivates: true,
             onDeactivate: requestClose,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="300" style={modalStyle}>
+          <Modal
+            id="addexisting-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="addexisting-dialog-1-title"
+            tabIndex={-1}
+            size="300"
+            style={modalStyle}
+          >
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
@@ -201,7 +209,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                 }}
               >
                 <Box grow="Yes">
-                  <Text as="h2" size="H4">
+                  <Text id="addexisting-dialog-1-title" as="h2" size="H4">
                     Add Existing
                   </Text>
                 </Box>

src/app/features/common-settings/general/DeleteMyMessages.tsx

@@ -78,13 +78,21 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#deletemymessages-dialog-1',
             onDeactivate: requestClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="deletemymessages-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="deletemymessages-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -94,7 +102,7 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="deletemymessages-dialog-1-title" as="h2" size="H4">
                   Delete all your messages
                 </Text>
               </Box>

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -108,13 +108,21 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
             <OverlayCenter>
               <FocusTrap
                 focusTrapOptions={{
-                  initialFocus: false,
+                  fallbackFocus: '#roomencryption-dialog-1',
                   onDeactivate: () => setPrompt(false),
                   clickOutsideDeactivates: true,
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Dialog variant="Surface" style={modalStyle}>
+                <Dialog
+                  id="roomencryption-dialog-1"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="roomencryption-dialog-1-title"
+                  tabIndex={-1}
+                  variant="Surface"
+                  style={modalStyle}
+                >
                   <Header
                     style={{
                       padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -124,7 +132,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                     size="500"
                   >
                     <Box grow="Yes">
-                      <Text as="h2" size="H4">
+                      <Text id="roomencryption-dialog-1-title" as="h2" size="H4">
                         Enable Encryption
                       </Text>
                     </Box>

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -89,13 +89,21 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#roomupgrade-dialog-1',
             onDeactivate: requestClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="roomupgrade-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="roomupgrade-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -105,7 +113,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="roomupgrade-dialog-1-title" as="h2" size="H4">
                   {room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}
                 </Text>
               </Box>

src/app/features/create-room/CreateRoomModal.tsx

@@ -44,13 +44,22 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#createroommodal-dialog-1',
               clickOutsideDeactivates: true,
               onDeactivate: closeDialog,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal size="300" flexHeight style={modalStyle}>
+            <Modal
+              id="createroommodal-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="createroommodal-dialog-1-title"
+              tabIndex={-1}
+              size="300"
+              flexHeight
+              style={modalStyle}
+            >
               <Box direction="Column">
                 <Header
                   size="500"
@@ -60,7 +69,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="createroommodal-dialog-1-title" as="h2" size="H4">
                       {type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
                     </Text>
                   </Box>

src/app/features/create-space/CreateSpaceModal.tsx

@@ -43,13 +43,22 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#createspacemodal-dialog-1',
               clickOutsideDeactivates: true,
               onDeactivate: closeDialog,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal size="300" flexHeight style={modalStyle}>
+            <Modal
+              id="createspacemodal-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="createspacemodal-dialog-1-title"
+              tabIndex={-1}
+              size="300"
+              flexHeight
+              style={modalStyle}
+            >
               <Box direction="Column">
                 <Header
                   size="500"
@@ -60,7 +69,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="createspacemodal-dialog-1-title" as="h2" size="H4">
                       New Space
                     </Text>
                   </Box>

src/app/features/room-nav/RoomNavItem.tsx

@@ -155,13 +155,20 @@ function RenameRoomDialog({ room, onClose }: RenameRoomDialogProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#roomnavitem-dialog',
             onDeactivate: onClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="rename-room-dialog-title">
+          <Dialog
+            id="roomnavitem-dialog"
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
+            variant="Surface"
+            aria-labelledby="rename-room-dialog-title"
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/features/room-settings/RoomServerACL.tsx

@@ -392,13 +392,17 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#roomserveracl-dialog',
                 onDeactivate: () => setPrompt(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
               <Dialog
+                id="roomserveracl-dialog"
+                role="dialog"
+                aria-modal="true"
+                tabIndex={-1}
                 variant="Surface"
                 aria-labelledby="server-acl-confirm-title"
                 style={modalStyle}

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} />

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"

src/app/pages/client/explore/Explore.tsx

@@ -78,13 +78,20 @@ export function AddServer() {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#explore-dialog-1',
               clickOutsideDeactivates: true,
               onDeactivate: () => setDialog(false),
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog
+              id="explore-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="explore-dialog-1-title"
+              tabIndex={-1}
+              variant="Surface"
+            >
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -94,7 +101,7 @@ export function AddServer() {
                 size="500"
               >
                 <Box grow="Yes">
-                  <Text as="h2" size="H4">
+                  <Text id="explore-dialog-1-title" as="h2" size="H4">
                     Add Server
                   </Text>
                 </Box>