Use semantic headings in user settings Appearance (#10827)

* 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

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy

src/components/views/settings/FontScalingPanel.tsx

@@ -28,6 +28,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { _t } from "../../../languageHandler";
 import { clamp } from "../../../utils/numbers";
+import SettingsSubsection from "./shared/SettingsSubsection";
 
 interface IProps {}
 
@@ -108,8 +109,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
         const max = 18;
 
         return (
-            <div className="mx_SettingsTab_section mx_FontScalingPanel">
-                <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
+            <SettingsSubsection heading={_t("Font size")} stretchContent data-testid="mx_FontScalingPanel">
                 <EventTilePreview
                     className="mx_FontScalingPanel_preview"
                     message={this.MESSAGE_PREVIEW_TEXT}
@@ -159,9 +159,9 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
                     onValidate={this.onValidateFontSize}
                     onChange={(value: ChangeEvent<HTMLInputElement>) => this.setState({ fontSize: value.target.value })}
                     disabled={!this.state.useCustomFontSize}
-                    className="mx_FontScalingPanel_customFontSizeField"
+                    className="mx_AppearanceUserSettingsTab_checkboxControlledField"
                 />
-            </div>
+            </SettingsSubsection>
         );
     }
 }

src/components/views/settings/ImageSizePanel.tsx

@@ -21,6 +21,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
 import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { ImageSize } from "../../../settings/enums/ImageSize";
+import SettingsSubsection from "./shared/SettingsSubsection";
 
 interface IProps {
     // none
@@ -49,9 +50,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         return (
-            <div className="mx_SettingsTab_section mx_ImageSizePanel">
-                <span className="mx_SettingsTab_subheading">{_t("Image size in the timeline")}</span>
-
+            <SettingsSubsection heading={_t("Image size in the timeline")}>
                 <div className="mx_ImageSizePanel_radios">
                     <label>
                         <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
@@ -76,7 +75,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
                         </StyledRadioButton>
                     </label>
                 </div>
-            </div>
+            </SettingsSubsection>
         );
     }
 }

src/components/views/settings/LayoutSwitcher.tsx

@@ -25,6 +25,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
 import { _t } from "../../../languageHandler";
 import { Layout } from "../../../settings/enums/Layout";
 import { SettingLevel } from "../../../settings/SettingLevel";
+import SettingsSubsection from "./shared/SettingsSubsection";
 
 interface IProps {
     userId?: string;
@@ -67,9 +68,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
         });
 
         return (
-            <div className="mx_SettingsTab_section mx_LayoutSwitcher">
-                <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
-
+            <SettingsSubsection heading={_t("Message layout")}>
                 <div className="mx_LayoutSwitcher_RadioButtons">
                     <label className={ircClasses}>
                         <EventTilePreview
@@ -126,7 +125,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
                         </StyledRadioButton>
                     </label>
                 </div>
-            </div>
+            </SettingsSubsection>
         );
     }
 }

src/components/views/settings/ThemeChoicePanel.tsx

@@ -30,6 +30,7 @@ import Field from "../elements/Field";
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import PosthogTrackers from "../../../PosthogTrackers";
+import SettingsSubsection from "./shared/SettingsSubsection";
 
 interface IProps {}
 
@@ -245,10 +246,9 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
 
         const orderedThemes = getOrderedThemes();
         return (
-            <div className="mx_SettingsTab_section mx_ThemeChoicePanel">
-                <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
+            <SettingsSubsection heading={_t("Theme")} data-testid="mx_ThemeChoicePanel">
                 {systemThemeSection}
-                <div className="mx_ThemeSelectors">
+                <div className="mx_ThemeChoicePanel_themeSelectors" data-testid="theme-choice-panel-selectors">
                     <StyledRadioGroup
                         name="theme"
                         definitions={orderedThemes.map((t) => ({
@@ -264,7 +264,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
                 </div>
                 {this.renderHighContrastCheckbox()}
                 {customThemeForm}
-            </div>
+            </SettingsSubsection>
         );
     }
 

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -31,6 +31,9 @@ import LayoutSwitcher from "../../LayoutSwitcher";
 import FontScalingPanel from "../../FontScalingPanel";
 import ThemeChoicePanel from "../../ThemeChoicePanel";
 import ImageSizePanel from "../../ImageSizePanel";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 
 interface IProps {}
 
@@ -115,7 +118,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         onChange={(checked) => this.setState({ useSystemFont: checked })}
                     />
                     <Field
-                        className="mx_AppearanceUserSettingsTab_systemFont"
+                        className="mx_AppearanceUserSettingsTab_checkboxControlledField"
                         label={SettingsStore.getDisplayName("systemFont")!}
                         onChange={(value: ChangeEvent<HTMLInputElement>) => {
                             this.setState({
@@ -133,10 +136,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             );
         }
         return (
-            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
+            <SettingsSubsection heading={<></>}>
                 {toggle}
                 {advanced}
-            </div>
+            </SettingsSubsection>
         );
     }
 
@@ -144,25 +147,24 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         const brand = SdkConfig.get().brand;
 
         return (
-            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
-                <div className="mx_SettingsTab_heading" data-testid="appearance">
-                    {_t("Customise your appearance")}
-                </div>
-                <div className="mx_SettingsTab_subsectionText">
-                    {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
-                </div>
-                <ThemeChoicePanel />
-                <LayoutSwitcher
-                    userId={this.state.userId}
-                    displayName={this.state.displayName}
-                    avatarUrl={this.state.avatarUrl}
-                    messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
-                    onLayoutChanged={this.onLayoutChanged}
-                />
-                <FontScalingPanel />
-                {this.renderAdvancedSection()}
-                <ImageSizePanel />
-            </div>
+            <SettingsTab data-testid="mx_AppearanceUserSettingsTab">
+                <SettingsSection heading={_t("Customise your appearance")}>
+                    <SettingsSubsectionText>
+                        {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
+                    </SettingsSubsectionText>
+                    <ThemeChoicePanel />
+                    <LayoutSwitcher
+                        userId={this.state.userId}
+                        displayName={this.state.displayName}
+                        avatarUrl={this.state.avatarUrl}
+                        messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
+                        onLayoutChanged={this.onLayoutChanged}
+                    />
+                    <FontScalingPanel />
+                    {this.renderAdvancedSection()}
+                    <ImageSizePanel />
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }