diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
index b7fea97192..c16b95d1de 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
index 3247abd7c1..7d9400b0bd 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
index 797c02e873..73666d61c0 100644
Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png differ
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
index 103dc698a5..0b5a08979d 100644
Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png differ
diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index e5d1ddef4f..d0bc1288ec 100644
Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/res/css/views/dialogs/_UserSettingsDialog.pcss b/res/css/views/dialogs/_UserSettingsDialog.pcss
index 1e27bb4b6a..6c09e90886 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.pcss
+++ b/res/css/views/dialogs/_UserSettingsDialog.pcss
@@ -22,6 +22,15 @@ limitations under the License.
     justify-content: center;
 }
 
+.mx_UserSettingsDialog_title {
+    /* Override default dialog font style */
+    font: var(--cpd-font-heading-md-regular) !important;
+
+    .mx_UserSettingsDialog_title_strong {
+        font: var(--cpd-font-heading-md-semibold);
+    }
+}
+
 /* ICONS */
 /* ========================================================== */
 
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 66f6c9e095..4ed8543ee2 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -128,6 +128,7 @@ export default class BaseDialog extends React.Component<IProps> {
                     onClick={this.onCancelClick}
                     className="mx_Dialog_cancelButton"
                     aria-label={_t("dialog_close_label")}
+                    title={_t("dialog_close_label")}
                 />
             );
         }
@@ -184,8 +185,8 @@ export default class BaseDialog extends React.Component<IProps> {
                         )}
                         {this.props.headerButton}
                     </div>
-                    {cancelButton}
                     {this.props.children}
+                    {cancelButton}
                 </FocusLock>
             </MatrixClientContext.Provider>
         );
diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
index 9aafeca2fd..1ab39acb5c 100644
--- a/src/components/views/dialogs/UserSettingsDialog.tsx
+++ b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -50,7 +50,7 @@ interface IProps {
 
 function titleForTabID(tabId: UserTab): React.ReactNode {
     const subs = {
-        strong: (sub: string) => <strong>{sub}</strong>,
+        strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
     };
     switch (tabId) {
         case UserTab.General:
@@ -230,6 +230,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                     hasCancel={true}
                     onFinished={props.onFinished}
                     title={titleForTabID(activeTabId)}
+                    titleClass="mx_UserSettingsDialog_title"
                 >
                     <div className="mx_SettingsDialog_content">
                         <TabbedView
diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index bf03f84a6e..3234c45741 100644
--- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -334,12 +334,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       Leave room
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -369,6 +363,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 
@@ -390,12 +390,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       Leave space
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -425,5 +419,11 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
diff --git a/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
index 8bf4c582af..6d4e827c47 100644
--- a/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_mobile"
     >
@@ -139,6 +133,12 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -171,12 +171,6 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -295,6 +289,12 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -327,12 +327,6 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -364,6 +358,12 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -396,12 +396,6 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -530,6 +524,12 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
index f3cd9c6ea1..11e0c2135c 100644
--- a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -24,12 +24,6 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         Changelog
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -131,6 +125,12 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index 83c9fedbfc..bf0fc31443 100644
--- a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -24,12 +24,6 @@ exports[`ConfirmUserActionDialog renders 1`] = `
         Ban this 
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -85,6 +79,12 @@ exports[`ConfirmUserActionDialog renders 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 20b79a2ccb..fca0dc9885 100644
--- a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         Developer Tools
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_DevTools_label_left"
     >
@@ -39,6 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
+        aria-describedby="floating-ui-2"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"
@@ -232,6 +227,12 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         Back
       </button>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index 8255152893..4d2a2d54a4 100644
--- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -18,12 +18,6 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       Export Chat
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <p>
     Select from the options below to export chats from your timeline
   </p>
@@ -200,6 +194,12 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 
diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
index 3219b1fa72..6594397511 100644
--- a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -24,12 +24,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
         You'll lose access to your encrypted messages
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div
         class="mx_Dialog_content"
@@ -78,6 +72,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
         </p>
       </details>
     </div>
+    <div
+      aria-describedby="floating-ui-22"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -111,12 +112,6 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
         You'll lose access to your encrypted messages
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div
         class="mx_Dialog_content"
@@ -165,6 +160,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
         </p>
       </details>
     </div>
+    <div
+      aria-describedby="floating-ui-28"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -198,12 +200,6 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
         Sign out
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -231,6 +227,12 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 8386793b52..08f299fec7 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
         Select spaces
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 
@@ -141,6 +135,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -173,12 +173,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
         Select spaces
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 
@@ -242,6 +236,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
index a115bf96be..8d493a9655 100644
--- a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
@@ -24,12 +24,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
         Verify session
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -106,6 +100,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -139,12 +139,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
         Verify session
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -221,6 +215,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 5e266d4fa5..a455e4c59a 100644
--- a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
         Message edits
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
@@ -107,6 +101,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
         </ol>
       </div>
     </div>
+    <div
+      aria-describedby="floating-ui-2"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -139,12 +140,6 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
         Message edits
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
@@ -320,6 +315,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
         </ol>
       </div>
     </div>
+    <div
+      aria-describedby="floating-ui-8"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index cb7069c437..0871773b80 100644
--- a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
@@ -24,12 +24,6 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
         Sign into your homeserver
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form
       class="mx_Dialog_content"
       id="mx_ServerPickerDialog"
@@ -131,6 +125,12 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
         />
       </a>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
index 5b7de2c703..60a051eec9 100644
--- a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
@@ -130,12 +130,6 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
         Success!
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div>
         <p>
@@ -158,6 +152,12 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
index 8552ab310c..3ca6e6ee02 100644
--- a/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`ExportE2eKeysDialog renders 1`] = `
         Export room keys
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form>
       <div
         class="mx_Dialog_content"
@@ -102,6 +96,12 @@ exports[`ExportE2eKeysDialog renders 1`] = `
         </button>
       </div>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
index 146ce35836..6b8b1a8285 100644
--- a/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
@@ -23,12 +23,6 @@ exports[`ImportE2eKeysDialog renders 1`] = `
         Import room keys
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form>
       <div
         class="mx_Dialog_content"
@@ -103,6 +97,12 @@ exports[`ImportE2eKeysDialog renders 1`] = `
         </button>
       </div>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
diff --git a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
index 2886a826c8..ffc676e30c 100644
--- a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -23,6 +23,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
+      aria-describedby="floating-ui-6"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"
diff --git a/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
index a840df5173..5f3851cd83 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
@@ -128,12 +128,6 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
       Failed to update the join rules
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -149,6 +143,12 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
       OK
     </button>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 
@@ -170,12 +170,6 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
       Are you sure you want to make this encrypted room public?
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -231,5 +225,11 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index 4c243927f0..8a40342a6b 100644
--- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -56,12 +56,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         </div>
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AddExistingToSpace"
     >
@@ -118,6 +112,12 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"