Use semantic headings in user settings Help & About (#10752)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint
This commit is contained in:
Kerry 2023-05-04 10:35:43 +12:00 committed by GitHub
parent bbdca11a02
commit 692d73dfe8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 233 additions and 211 deletions

View file

@ -74,7 +74,9 @@ describe("<UserSettingsDialog />", () => {
const getActiveTabLabel = (container: Element) =>
container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
const getActiveTabHeading = (container: Element) => container.querySelector(".mx_SettingsTab_heading")?.textContent;
const getActiveTabHeading = (container: Element) =>
container.querySelector(".mx_SettingsTab_heading")?.textContent ||
container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent;
it("should render general settings tab when no initialTabId", () => {
const { container } = render(getComponent());

View file

@ -18,7 +18,11 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations.
<div
class="mx_SettingsSubsection_text"
>
Improve your account security by following these recommendations.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
@ -139,7 +143,11 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations.
<div
class="mx_SettingsSubsection_text"
>
Improve your account security by following these recommendations.
</div>
</div>
<div
class="mx_SettingsSubsection_content"
@ -260,7 +268,11 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations.
<div
class="mx_SettingsSubsection_text"
>
Improve your account security by following these recommendations.
</div>
</div>
<div
class="mx_SettingsSubsection_content"

View file

@ -17,7 +17,11 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
<div
class="mx_SettingsSubsection_description"
>
This describes the subsection
<div
class="mx_SettingsSubsection_text"
>
This describes the subsection
</div>
</div>
<div
class="mx_SettingsSubsection_content"
@ -72,14 +76,18 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
<div
class="mx_SettingsSubsection_description"
>
<p>
This describes the section
<a
href="/#"
>
link
</a>
</p>
<div
class="mx_SettingsSubsection_text"
>
<p>
This describes the section
<a
href="/#"
>
link
</a>
</p>
</div>
</div>
<div
class="mx_SettingsSubsection_content"