Use semantic headings in user settings Appearance

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(() => {
-            // Assert that the top heading is rendered
-            cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
+        cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
+            cy.get("h2").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,24 +166,16 @@ 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 });
-        });
+        // 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");
     });
 
     it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
         const checkDisabled = () => {
-            cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
-                cy.get(".mx_Checkbox")
-                    .first()
-                    .within(() => {
-                        cy.get("input[type='checkbox'][disabled]").should("exist");
-                    });
-            });
+            cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
         };
 
         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 });
-        });
+        // 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/settings/_FontScalingPanel.pcss

@@ -14,63 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_FontScalingPanel {
-    color: $primary-content;
+.mx_FontScalingPanel_preview {
+    --FontScalingPanel_preview-padding-block: 9px;
 
-    .mx_FontScalingPanel_preview,
-    .mx_FontScalingPanel_fontSlider {
-        margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-    }
-
-    .mx_FontScalingPanel_preview {
-        --FontScalingPanel_preview-padding-block: 9px;
-
-        border: 1px solid $quinary-content;
-        border-radius: 10px;
-        padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
-        pointer-events: none;
-        display: flow-root;
-
-        &.mx_IRCLayout {
-            padding-top: 9px; /* TODO: Use a spacing variable */
-        }
-
-        .mx_EventTile[data-layout="bubble"] {
-            margin-top: 30px; /* TODO: Use a spacing variable */
-        }
+    border: 1px solid $quinary-content;
+    border-radius: 10px;
+    padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
+    pointer-events: none;
+    display: flow-root;
 
-        .mx_EventTile_msgOption {
-            display: none;
-        }
+    &.mx_IRCLayout {
+        padding-top: 9px; /* TODO: Use a spacing variable */
     }
 
-    .mx_FontScalingPanel_fontSlider {
-        display: flex;
-        align-items: center;
-        padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
-        background: rgba($quinary-content, 0.2);
-        border-radius: 10px;
-        font-size: $font-10px;
-        margin-top: $spacing-24;
-        margin-bottom: $spacing-24;
+    .mx_EventTile[data-layout="bubble"] {
+        margin-top: 30px; /* TODO: Use a spacing variable */
+    }
 
-        .mx_FontScalingPanel_fontSlider_smallText,
-        .mx_FontScalingPanel_fontSlider_largeText {
-            font-weight: 500;
-        }
+    .mx_EventTile_msgOption {
+        display: none;
+    }
+}
 
-        .mx_FontScalingPanel_fontSlider_smallText {
-            font-size: $font-15px;
-            padding-inline-end: $spacing-20;
-        }
+.mx_FontScalingPanel_fontSlider {
+    display: flex;
+    align-items: center;
+    padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
+    background: rgba($quinary-content, 0.2);
+    border-radius: 10px;
+    font-size: $font-10px;
+
+    .mx_FontScalingPanel_fontSlider_smallText,
+    .mx_FontScalingPanel_fontSlider_largeText {
+        font-weight: 500;
+    }
 
-        .mx_FontScalingPanel_fontSlider_largeText {
-            font-size: $font-18px;
-            padding-inline-start: $spacing-20;
-        }
+    .mx_FontScalingPanel_fontSlider_smallText {
+        font-size: $font-15px;
+        padding-inline-end: $spacing-20;
     }
 
-    .mx_FontScalingPanel_customFontSizeField {
-        margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
+    .mx_FontScalingPanel_fontSlider_largeText {
+        font-size: $font-18px;
+        padding-inline-start: $spacing-20;
     }
 }

res/css/views/settings/_ImageSizePanel.pcss

@@ -14,34 +14,31 @@ 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 */
+.mx_ImageSizePanel_radios {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-16;
+
+    > label {
+        margin-right: 68px; /* keep the boxes separate */
+        cursor: pointer;
+    }
 
-        > label {
-            margin-right: 68px; /* keep the boxes separate */
-            cursor: pointer;
+    .mx_ImageSizePanel_size {
+        background-color: $quinary-content;
+        mask-repeat: no-repeat;
+        mask-size: 221px;
+        mask-position: center;
+        width: 221px;
+        height: 148px;
+        margin-bottom: 14px; /* move radio button away from bottom edge a bit */
+
+        &.mx_ImageSizePanel_sizeDefault {
+            mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
         }
 
-        .mx_ImageSizePanel_size {
-            background-color: $quinary-content;
-            mask-repeat: no-repeat;
-            mask-size: 221px;
-            mask-position: center;
-            width: 221px;
-            height: 148px;
-            margin-bottom: 14px; /* move radio button away from bottom edge a bit */
-
-            &.mx_ImageSizePanel_sizeDefault {
-                mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
-            }
-
-            &.mx_ImageSizePanel_sizeLarge {
-                mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
-            }
+        &.mx_ImageSizePanel_sizeLarge {
+            mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
         }
     }
 }