From e8ce9cb360f5cd43434715dd6f4450d4aab9fa88 Mon Sep 17 00:00:00 2001 From: David Baker 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 70f5284654d..46bca0b78b9 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 a322e3f45b1..f6ec9458dba 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 03e19f2881d..5e7c023e2d5 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 { {!!(this.props.title || headerImage) && ( diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap index cc9efb12284..01a5c7818b6 100644 --- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap +++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap @@ -327,12 +327,12 @@ exports[` with an existing session onAction() room actions leave_r
-

Leave room -

+
with an existing session onAction() room actions leave_r
-

Leave space -

+
-

Download Element -

+
-

Download Element -

+
-

Download Element -

+
-

Download Element -

+
should fetch github proxy url for each repo with ol
-

Changelog -

+
-

Ban this -

+
-

Developer Tools -

+
renders export dialog 1`] = `
-

Export Chat -

+
-

Feedback -

+
-

You'll lose access to your encrypted messages -

+
-

You'll lose access to your encrypted messages -

+
-

Sign out -

+
should list spaces which are not par
-

Select spaces -

+
should render empty state 1`] = `
-

Select spaces -

+
-

Verify session -

+
-

Verify session -

+
should match the snapshot 1`] = `
-

Message edits -

+
should support events with 1`] = `
-

Message edits -

+
should render dialog 1`] = `
-

Sign into your homeserver -

+
-

Starting backup… -

+
@@ -76,12 +76,12 @@ exports[`CreateKeyBackupDialog should display the spinner when creating backup 1
-

Starting backup… -

+
@@ -123,12 +123,12 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
-

Success! -

+
-

Set up Secure Backup -

+
@@ -184,12 +184,12 @@ exports[`CreateSecretStorageDialog when backup is present but not trusted shows
-

Upgrade your encryption -

+
@@ -251,12 +251,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly calls boot
-

Upgrade your encryption -

+
@@ -337,12 +337,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly prompts fo
-

Upgrade your encryption -

+
@@ -423,12 +423,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly when there
-

Upgrade your encryption -

+
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 f613eb5979e..348916ae359 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`] = `
-

Export room keys -

+
-

Import room keys -

+
join rule handles error when updating join
-

Failed to update the join rules -

+
join rule warns when trying to make an encr
-

Are you sure you want to make this encrypted room public? -

+
looks as expected 1`] = `
-

@@ -55,7 +55,7 @@ exports[` looks as expected 1`] = `

- +