Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use h1 as first heading in dialogs #12244

Closed
wants to merge 6 commits into from
Closed

Use h1 as first heading in dialogs #12244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c085c03
Use h1 as first heading in dialogs
dbkr Feb 13, 2024
4eecad7
Update snapshots
dbkr Feb 13, 2024
52b070c
Style h1 the same as h2
dbkr Feb 13, 2024
c61d04a
Apply to the mx_Heading class rather than all h1s
dbkr Feb 13, 2024
16f0242
Fix playwright test
dbkr Feb 13, 2024
8e19fda
Merge remote-tracking branch 'origin/develop' into dbkr/dialogs_h1
dbkr Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
Binary file modified ...onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions res/css/views/typography/_Heading.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ limitations under the License.
.mx_Heading_h3 {
font: var(--cpd-font-heading-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why -lg and not -md?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this was the letter spacing used for h2s so it's what makes them match what they were before. I'm also wondering why they're styled as h3s though - this might be what makes it odd.

}

.mx_Heading_h4 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/dialogs/BaseDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
8 changes: 4 additions & 4 deletions test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
Loading
Loading