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
element-hq · Feb 16, 2024 · e8ce9cb · e8ce9cb
1 parent b5048bf
commit e8ce9cb
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"