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 #12250

Merged
merged 2 commits into from
Feb 16, 2024
Merged

Use h1 as first heading in dialogs #12250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ed24c6
Use h1 as first heading in dialogs
dbkr Feb 14, 2024
8bc64fe
Just customise the letter spacing on dialog titles
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
1 change: 1 addition & 0 deletions res/css/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
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