PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use h1 as first heading in dialogs (#12250)

Browse source 
* 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
This commit is contained in:
David Baker 2024-02-16 14:23:33 +00:00 committed by GitHub
parent b5048bf63e
commit e8ce9cb360
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 71 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
playwright/e2e/user-onboarding/user-onboarding-new.spec.ts
View file

@ -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();
});

1
res/css/_common.pcss
View file

@ -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;

2
src/components/views/dialogs/BaseDialog.tsx
View file

@ -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"
>

8
test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file

@ -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"

16
test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
View file

@ -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"

12
test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
View file

@ -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"

8
test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
View file

@ -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"

8
test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
View file

@ -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"

8
test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
View file

@ -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"

4
test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
View file

@ -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"

12
test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
View file

@ -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"

20
test/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
View file

@ -16,12 +16,12 @@ exports[`CreateSecretStorageDialog shows 'Generate a Security Key' text if no ke
<div
class="mx_Dialog_header"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title mx_CreateSecretStorageDialog_centeredTitle"
id="mx_BaseDialog_title"
>
Set up Secure Backup
</h2>
</h1>
</div>
<div>
<form>
@ -184,12 +184,12 @@ exports[`CreateSecretStorageDialog when backup is present but not trusted shows
<div
class="mx_Dialog_header"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Upgrade your encryption
</h2>
</h1>
</div>
<div>
<form>
@ -251,12 +251,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly calls boot
<div
class="mx_Dialog_header"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Upgrade your encryption
</h2>
</h1>
</div>
<div>
<form>
@ -337,12 +337,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly prompts fo
<div
class="mx_Dialog_header"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Upgrade your encryption
</h2>
</h1>
</div>
<div>
<form>
@ -423,12 +423,12 @@ exports[`CreateSecretStorageDialog when canUploadKeysWithPasswordOnly when there
<div
class="mx_Dialog_header"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Upgrade your encryption
</h2>
</h1>
</div>
<div>
<form>

4
test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
View file

@ -16,12 +16,12 @@ exports[`ExportE2eKeysDialog renders 1`] = `
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Export room keys
</h2>
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"

4
test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
View file

@ -16,12 +16,12 @@ exports[`ImportE2eKeysDialog renders 1`] = `
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Import room keys
</h2>
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"

8
test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
View file

@ -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"

4
test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file

@ -17,7 +17,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
@ -55,7 +55,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
</div>
</div>
</div>
</h2>
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"