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

cypress/e2e/audio-player/audio-player.spec.ts

@@ -176,7 +176,7 @@ describe("Audio player", () => {
 
         // Enable high contrast manually
         cy.openUserSettings("Appearance")
-            .get(".mx_ThemeChoicePanel")
+            .findByTestId("mx_ThemeChoicePanel")
             .findByLabelText("Use high contrast")
             .click({ force: true }); // force click because the size of the checkbox is zero
 

cypress/e2e/settings/appearance-user-settings-tab.spec.ts

@@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => {
     it("should be rendered properly", () => {
         cy.openUserSettings("Appearance");
 
-        cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
+        cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
-            // Assert that the top heading is rendered
+            cy.get("h2").should("have.text", "Customise your appearance").should("be.visible");
-            cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
         });
 
-        cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
+        cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
             "User settings tab - Appearance (advanced options collapsed)",
             {
                 // Emulate TabbedView's actual min and max widths
@@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => {
         // Assert that "Hide advanced" link button is rendered
         cy.findByRole("button", { name: "Hide advanced" }).should("exist");
 
-        cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
+        cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
             "User settings tab - Appearance (advanced options expanded)",
             {
                 // Emulate TabbedView's actual min and max widths
@@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => {
 
         cy.openUserSettings("Appearance");
 
-        cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
+        cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
             // Assert that the layout selected by default is "Modern"
             cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
                 cy.findByLabelText("Modern").should("exist");
@@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => {
         // Assert that the room layout is set to group (modern) layout
         cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
 
-        cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
+        cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
             // Select the first layout
             cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
 
@@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => {
         // Assert that the room layout is set to IRC layout
         cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
 
-        cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
+        cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
             // Select the last layout
             cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
 
@@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => {
     it("should support changing font size by clicking the font slider", () => {
         cy.openUserSettings("Appearance");
 
-        cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
+        cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
             cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
                 cy.findByLabelText("Font size").should("exist");
             });
@@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => {
     it("should disable font size slider when custom font size is used", () => {
         cy.openUserSettings("Appearance");
 
-        cy.get(".mx_FontScalingPanel").within(() => {
+        cy.findByTestId("mx_FontScalingPanel").within(() => {
             cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
 
             // Assert that the font slider is disabled
@@ -167,10 +166,8 @@ describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         cy.findByRole("button", { name: "Show advanced" }).click();
 
-        cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
         // force click as checkbox size is zero
         cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
-        });
 
         // Assert that the room layout is set to compact group (modern) layout
         cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
@@ -178,13 +175,7 @@ describe("Appearance user settings tab", () => {
 
     it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
         const checkDisabled = () => {
-            cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
+            cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
-                cy.get(".mx_Checkbox")
-                    .first()
-                    .within(() => {
-                        cy.get("input[type='checkbox'][disabled]").should("exist");
-                    });
-            });
         };
 
         cy.openUserSettings("Appearance");
@@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => {
         cy.findByRole("button", { name: "Show advanced" }).click();
 
         // Enable IRC layout
-        cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
+        cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
             // Select the first layout
             cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
 
@@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => {
         checkDisabled();
 
         // Enable bubble layout
-        cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
+        cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
             // Select the first layout
             cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
 
@@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         cy.findByRole("button", { name: "Show advanced" }).click();
 
-        cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
         // force click as checkbox size is zero
         cy.findByLabelText("Use a system font").click({ force: true });
-        });
 
         // Assert that the font-family value was removed
         cy.get("body").should("have.css", "font-family", '""');
@@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => {
 
         it("should be rendered with the light theme selected", () => {
             cy.openUserSettings("Appearance")
-                .get(".mx_ThemeChoicePanel")
+                .findByTestId("mx_ThemeChoicePanel")
                 .within(() => {
                     cy.findByTestId("checkbox-use-system-theme").within(() => {
                         cy.findByText("Match system theme").should("be.visible");
@@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => {
                         cy.get(".mx_Checkbox_checkmark").should("not.be.visible");
                     });
 
-                    cy.get(".mx_ThemeSelectors").within(() => {
+                    cy.findByTestId("theme-choice-panel-selectors").within(() => {
                         cy.get(".mx_ThemeSelector_light").should("exist");
                         cy.get(".mx_ThemeSelector_dark").should("exist");
 
@@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => {
                 "the system theme is clicked",
             () => {
                 cy.openUserSettings("Appearance")
-                    .get(".mx_ThemeChoicePanel")
+                    .findByTestId("mx_ThemeChoicePanel")
                     .findByLabelText("Match system theme")
                     .click({ force: true }); // force click because the size of the checkbox is zero
 
-                cy.get(".mx_ThemeChoicePanel").within(() => {
+                cy.findByTestId("mx_ThemeChoicePanel").within(() => {
                     // Assert that the labels for the light theme and dark theme are disabled
                     cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist");
                     cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist");
@@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => {
             });
 
             cy.openUserSettings("Appearance")
-                .get(".mx_ThemeChoicePanel")
+                .findByTestId("mx_ThemeChoicePanel")
                 .findByLabelText("Use high contrast")
                 .click({ force: true }); // force click because the size of the checkbox is zero
 

res/css/_components.pcss

@@ -179,7 +179,6 @@
 @import "./views/elements/_Dropdown.pcss";
 @import "./views/elements/_EditableItemList.pcss";
 @import "./views/elements/_ErrorBoundary.pcss";
-@import "./views/elements/_EventTilePreview.pcss";
 @import "./views/elements/_ExternalLink.pcss";
 @import "./views/elements/_FacePile.pcss";
 @import "./views/elements/_Field.pcss";

res/css/views/elements/_EventTilePreview.pcss

@@ -1,21 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_FontScalingPanel {
-    .mx_FontScalingPanel_preview.mx_EventTilePreview_loader {
-        padding: var(--FontScalingPanel_preview-padding-block) 0;
-    }
-}

res/css/views/settings/_FontScalingPanel.pcss

@@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_FontScalingPanel {
-    color: $primary-content;
-
-    .mx_FontScalingPanel_preview,
-    .mx_FontScalingPanel_fontSlider {
-        margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-    }
-
 .mx_FontScalingPanel_preview {
     --FontScalingPanel_preview-padding-block: 9px;
 
@@ -51,8 +43,6 @@ limitations under the License.
     background: rgba($quinary-content, 0.2);
     border-radius: 10px;
     font-size: $font-10px;
-        margin-top: $spacing-24;
-        margin-bottom: $spacing-24;
 
     .mx_FontScalingPanel_fontSlider_smallText,
     .mx_FontScalingPanel_fontSlider_largeText {
@@ -69,8 +59,3 @@ limitations under the License.
         padding-inline-start: $spacing-20;
     }
 }
-
-    .mx_FontScalingPanel_customFontSizeField {
-        margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
-    }
-}

res/css/views/settings/_ImageSizePanel.pcss

@@ -14,12 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ImageSizePanel {
-    color: $primary-content;
-
 .mx_ImageSizePanel_radios {
     display: flex;
-        margin-top: 16px; /* move away from header a bit */
+    flex-direction: row;
+    gap: $spacing-16;
 
     > label {
         margin-right: 68px; /* keep the boxes separate */
@@ -44,4 +42,3 @@ limitations under the License.
         }
     }
 }
-}

res/css/views/settings/_LayoutSwitcher.pcss

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LayoutSwitcher {
 .mx_LayoutSwitcher_RadioButtons {
     display: flex;
     flex-direction: row;
@@ -29,7 +28,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
 
-            width: 300px;
+        flex-basis: 33%;
         min-width: 0;
 
         border: 1px solid $quinary-content;
@@ -90,4 +89,3 @@ limitations under the License.
         }
     }
 }
-}

res/css/views/settings/_ThemeChoicePanel.pcss

@@ -14,17 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ThemeChoicePanel {
+.mx_ThemeChoicePanel_themeSelectors {
     color: $primary-content;
-
-    > .mx_ThemeSelectors {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 
-        margin-top: 4px;
-        margin-bottom: 30px;
-
     > .mx_StyledRadioButton {
         padding: $font-16px;
         box-sizing: border-box;
@@ -63,4 +58,3 @@ limitations under the License.
         }
     }
 }
-}

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss

@@ -14,25 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AppearanceUserSettingsTab {
+.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
-    --AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
-
-    .mx_SettingsTab_subsectionText {
-        margin-block: $spacing-12 $spacing-32;
-        color: $primary-content; /* Same as mx_SettingsTab */
-    }
-
-    .mx_Field {
     width: 256px;
-    }
+    // matches checkbox box + padding
-
+    // to align with checkbox label
-    .mx_AppearanceUserSettingsTab_Advanced {
+    margin-inline-start: calc($font-16px + 10px);
-        .mx_Checkbox {
-            margin-block: $spacing-16;
-        }
-
-        .mx_AppearanceUserSettingsTab_systemFont {
-            margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
-        }
-    }
 }

res/themes/light-high-contrast/css/_light-high-contrast.pcss

@@ -82,11 +82,11 @@ $roomtopic-color: $secondary-content;
     background-color: $panel-actions !important;
 }
 
-.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
+.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
     border-color: $primary-content;
 }
 
-.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
+.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
     color: $primary-content;
 }
 

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">
+            <SettingsSubsection heading={_t("Font size")} stretchContent data-testid="mx_FontScalingPanel">
-                <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
                 <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">
+            <SettingsSubsection heading={_t("Image size in the timeline")}>
-                <span className="mx_SettingsTab_subheading">{_t("Image size in the timeline")}</span>
-
                 <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">
+            <SettingsSubsection heading={_t("Message layout")}>
-                <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
-
                 <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">
+            <SettingsSubsection heading={_t("Theme")} data-testid="mx_ThemeChoicePanel">
-                <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {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,13 +147,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         const brand = SdkConfig.get().brand;
 
         return (
-            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
+            <SettingsTab data-testid="mx_AppearanceUserSettingsTab">
-                <div className="mx_SettingsTab_heading" data-testid="appearance">
+                <SettingsSection heading={_t("Customise your appearance")}>
-                    {_t("Customise your appearance")}
+                    <SettingsSubsectionText>
-                </div>
-                <div className="mx_SettingsTab_subsectionText">
                         {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
-                </div>
+                    </SettingsSubsectionText>
                     <ThemeChoicePanel />
                     <LayoutSwitcher
                         userId={this.state.userId}
@@ -162,7 +163,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     <FontScalingPanel />
                     {this.renderAdvancedSection()}
                     <ImageSizePanel />
-            </div>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }

test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

@@ -3,13 +3,21 @@
 exports[`FontScalingPanel renders the font scaling UI 1`] = `
 <DocumentFragment>
   <div
-    class="mx_SettingsTab_section mx_FontScalingPanel"
+    class="mx_SettingsSubsection"
+    data-testid="mx_FontScalingPanel"
   >
-    <span
+    <div
-      class="mx_SettingsTab_subheading"
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
       >
         Font size
-    </span>
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+    >
       <div
         class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
       >
@@ -85,7 +93,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
         </label>
       </span>
       <div
-      class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
+        class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
       >
         <input
           autocomplete="off"
@@ -103,5 +111,6 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
         </label>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;

test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -3,15 +3,24 @@
 exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
 <DocumentFragment>
   <div
-    class="mx_SettingsTab_section mx_ThemeChoicePanel"
+    class="mx_SettingsSubsection"
+    data-testid="mx_ThemeChoicePanel"
   >
-    <span
+    <div
-      class="mx_SettingsTab_subheading"
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
       >
         Theme
-    </span>
+      </h3>
+    </div>
     <div
-      class="mx_ThemeSelectors"
+      class="mx_SettingsSubsection_content"
+    >
+      <div
+        class="mx_ThemeChoicePanel_themeSelectors"
+        data-testid="theme-choice-panel-selectors"
       >
         <label
           class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
@@ -59,5 +68,6 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
         </label>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;

test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -3,29 +3,47 @@
 exports[`AppearanceUserSettingsTab should render 1`] = `
 <DocumentFragment>
   <div
-    class="mx_SettingsTab mx_AppearanceUserSettingsTab"
+    class="mx_SettingsTab"
+    data-testid="mx_AppearanceUserSettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
+      class="mx_SettingsTab_sections"
-      data-testid="appearance"
+    >
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h2"
         >
           Customise your appearance
-    </div>
+        </h2>
         <div
-      class="mx_SettingsTab_subsectionText"
+          class="mx_SettingsSection_subSections"
+        >
+          <div
+            class="mx_SettingsSubsection_text"
           >
             Appearance Settings only affect this Element session.
           </div>
           <div
-      class="mx_SettingsTab_section mx_ThemeChoicePanel"
+            class="mx_SettingsSubsection"
+            data-testid="mx_ThemeChoicePanel"
           >
-      <span
+            <div
-        class="mx_SettingsTab_subheading"
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
               >
                 Theme
-      </span>
+              </h3>
+            </div>
             <div
-        class="mx_ThemeSelectors"
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_ThemeChoicePanel_themeSelectors"
+                data-testid="theme-choice-panel-selectors"
               >
                 <label
                   class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
@@ -73,14 +91,22 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </label>
               </div>
             </div>
+          </div>
           <div
-      class="mx_SettingsTab_section mx_LayoutSwitcher"
+            class="mx_SettingsSubsection"
           >
-      <span
+            <div
-        class="mx_SettingsTab_subheading"
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
               >
                 Message layout
-      </span>
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
               <div
                 class="mx_LayoutSwitcher_RadioButtons"
               >
@@ -204,14 +230,23 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </label>
               </div>
             </div>
+          </div>
           <div
-      class="mx_SettingsTab_section mx_FontScalingPanel"
+            class="mx_SettingsSubsection"
+            data-testid="mx_FontScalingPanel"
           >
-      <span
+            <div
-        class="mx_SettingsTab_subheading"
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
               >
                 Font size
-      </span>
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+            >
               <div
                 class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
               >
@@ -287,7 +322,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </label>
               </span>
               <div
-        class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
+                class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
               >
                 <input
                   autocomplete="off"
@@ -305,8 +340,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </label>
               </div>
             </div>
+          </div>
           <div
-      class="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced"
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsection_content"
             >
               <div
                 aria-expanded="false"
@@ -317,14 +356,22 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 Show advanced
               </div>
             </div>
+          </div>
           <div
-      class="mx_SettingsTab_section mx_ImageSizePanel"
+            class="mx_SettingsSubsection"
           >
-      <span
+            <div
-        class="mx_SettingsTab_subheading"
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
               >
                 Image size in the timeline
-      </span>
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
               <div
                 class="mx_ImageSizePanel_radios"
               >
@@ -382,5 +429,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;