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

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"