From e8ce9cb360f5cd43434715dd6f4450d4aab9fa88 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:23:33 +0000
Subject: [PATCH] Use h1 as first heading in dialogs (#12250)

* Use h1 as first heading in dialogs

The dialog should be modal and therefore the only content active
on the screen, so the title of the dialog should be the top level.

Update snapshots & tests appropriately.

* Just customise the letter spacing on dialog titles
---
 .../user-onboarding-new.spec.ts               |  2 +-
 res/css/_common.pcss                          |  1 +
 src/components/views/dialogs/BaseDialog.tsx   |  2 +-
 .../__snapshots__/MatrixChat-test.tsx.snap    |  8 ++++----
 .../AppDownloadDialog-test.tsx.snap           | 16 +++++++--------
 .../ChangelogDialog-test.tsx.snap             |  4 ++--
 .../ConfirmUserActionDialog-test.tsx.snap     |  4 ++--
 .../DevtoolsDialog-test.tsx.snap              |  4 ++--
 .../__snapshots__/ExportDialog-test.tsx.snap  |  4 ++--
 .../FeedbackDialog-test.tsx.snap              |  4 ++--
 .../__snapshots__/LogoutDialog-test.tsx.snap  | 12 +++++------
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |  8 ++++----
 ...lDeviceKeyVerificationDialog-test.tsx.snap |  8 ++++----
 .../MessageEditHistoryDialog-test.tsx.snap    |  8 ++++----
 .../ServerPickerDialog-test.tsx.snap          |  4 ++--
 .../CreateKeyBackupDialog-test.tsx.snap       | 12 +++++------
 .../CreateSecretStorageDialog-test.tsx.snap   | 20 +++++++++----------
 .../ExportE2eKeysDialog-test.tsx.snap         |  4 ++--
 .../ImportE2eKeysDialog-test.tsx.snap         |  4 ++--
 .../SecurityRoomSettingsTab-test.tsx.snap     |  8 ++++----
 .../AddExistingToSpaceDialog-test.tsx.snap    |  4 ++--
 21 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts b/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
index 70f5284654..46bca0b78b 100644
--- a/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
+++ b/playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
@@ -43,7 +43,7 @@ test.describe("User Onboarding (new user)", () => {
     test("app download dialog", async ({ page }) => {
         await page.getByRole("button", { name: "Download apps" }).click();
         await expect(
-            page.getByRole("dialog").getByRole("heading", { level: 2, name: "Download Element" }),
+            page.getByRole("dialog").getByRole("heading", { level: 1, name: "Download Element" }),
         ).toBeVisible();
         await expect(page.locator(".mx_Dialog")).toMatchScreenshot();
     });
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index a322e3f45b..f6ec9458db 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -474,6 +474,7 @@ legend {
     display: inline-block;
     width: 100%;
     box-sizing: border-box;
+    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
 
     &.danger {
         color: $alert;
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 03e19f2881..5e7c023e2d 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -179,7 +179,7 @@ export default class BaseDialog extends React.Component<IProps> {
                         {!!(this.props.title || headerImage) && (
                             <Heading
                                 size="3"
-                                as="h2"
+                                as="h1"
                                 className={classNames("mx_Dialog_title", this.props.titleClass)}
                                 id="mx_BaseDialog_title"
                             >
diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index cc9efb1228..01a5c7818b 100644
--- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -327,12 +327,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   <div
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <h2
+    <h1
       class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Leave room
-    </h2>
+    </h1>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -383,12 +383,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   <div
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <h2
+    <h1
       class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Leave space
-    </h2>
+    </h1>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
index e33eacfd9a..17bf2ee254 100644
--- a/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Download Element
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -164,12 +164,12 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Download Element
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -320,12 +320,12 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Download Element
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -389,12 +389,12 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Download Element
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
index 23c91750a9..a491b20c6e 100644
--- a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Changelog
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index 6bd5c41267..31b516d986 100644
--- a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`ConfirmUserActionDialog renders 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Ban this 
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index f50f013006..031e9f98a8 100644
--- a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Developer Tools
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index e9f10f6e9b..656d541fad 100644
--- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -11,12 +11,12 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
   <div
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <h2
+    <h1
       class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Export Chat
-    </h2>
+    </h1>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
index 505e7de4c0..7b756db64d 100644
--- a/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Feedback
-      </h2>
+      </h1>
     </div>
     <div
       class="mx_Dialog_content"
diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
index bac31d1d81..35b7e4c306 100644
--- a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         You'll lose access to your encrypted messages
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -104,12 +104,12 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         You'll lose access to your encrypted messages
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -191,12 +191,12 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Sign out
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 90278d00b6..8d5beecb5c 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Select spaces
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -166,12 +166,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Select spaces
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
index 5987b6e0f6..5b9e0434ec 100644
--- a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Verify session
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -132,12 +132,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Verify session
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 059f35d8f7..874cd17c19 100644
--- a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Message edits
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -132,12 +132,12 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Message edits
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index 823efd73b6..5539c9be35 100644
--- a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
@@ -17,12 +17,12 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Sign into your homeserver
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
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 d3880d875c..ad249e578f 100644
--- a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`CreateKeyBackupDialog should display an error message when backup creat
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Starting backup…
-      </h2>
+      </h1>
     </div>
     <div>
       <div>
@@ -76,12 +76,12 @@ exports[`CreateKeyBackupDialog should display the spinner when creating backup 1
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Starting backup…
-      </h2>
+      </h1>
     </div>
     <div>
       <div>
@@ -123,12 +123,12 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Success!
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
index 2b3d041284..3ba1018ae1 100644
--- a/test/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`CreateSecretStorageDialog shows 'Generate a Security Key' text if no ke
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title mx_CreateSecretStorageDialog_centeredTitle"
         id="mx_BaseDialog_title"
       >
         Set up Secure Backup
-      </h2>
+      </h1>
     </div>
     <div>
       <form>
@@ -184,12 +184,12 @@ exports[`CreateSecretStorageDialog when backup is present but not trusted shows
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Upgrade your encryption
-      </h2>
+      </h1>
     </div>
     <div>
       <form>
@@ -251,12 +251,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly calls boot
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Upgrade your encryption
-      </h2>
+      </h1>
     </div>
     <div>
       <form>
@@ -337,12 +337,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly prompts fo
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Upgrade your encryption
-      </h2>
+      </h1>
     </div>
     <div>
       <form>
@@ -423,12 +423,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly when there
     <div
       class="mx_Dialog_header"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Upgrade your encryption
-      </h2>
+      </h1>
     </div>
     <div>
       <form>
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 f613eb5979..348916ae35 100644
--- a/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`ExportE2eKeysDialog renders 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Export room keys
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
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 2de1ec824e..3a3ee80a94 100644
--- a/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
+++ b/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
@@ -16,12 +16,12 @@ exports[`ImportE2eKeysDialog renders 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Import room keys
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"
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 397368d399..432aafd51d 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
@@ -121,12 +121,12 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
   <div
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <h2
+    <h1
       class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Failed to update the join rules
-    </h2>
+    </h1>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
@@ -163,12 +163,12 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
   <div
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
-    <h2
+    <h1
       class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Are you sure you want to make this encrypted room public?
-    </h2>
+    </h1>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index eb2db7dfc8..9f26ef9758 100644
--- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
     <div
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
-      <h2
+      <h1
         class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
@@ -55,7 +55,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
             </div>
           </div>
         </div>
-      </h2>
+      </h1>
       <div
         aria-label="Close dialog"
         class="mx_AccessibleButton mx_Dialog_cancelButton"