Use semantic headings in user settings Security

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

@@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
     it("should be rendered properly", () => {
         cy.openUserSettings("Preferences");
 
-        cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => {
+        cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
             // Assert that the top heading is rendered
-            cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible");
+            cy.contains("Preferences").should("be.visible");
         });
 
-        cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement(
-            "User settings tab - Preferences",
-            {
-                // Emulate TabbedView's actual min and max widths
-                // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
-                // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
-                widths: [580, 796],
-            },
-        );
+        cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
+            // Emulate TabbedView's actual min and max widths
+            // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
+            // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
+            widths: [580, 796],
+        });
     });
 });

res/css/_components.pcss

@@ -345,7 +345,6 @@
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
-@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";

res/css/views/settings/_CryptographyPanel.pcss

@@ -32,13 +32,9 @@ limitations under the License.
     }
 }
 
-.mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {
-    margin-right: 10px;
-}
-
 .mx_CryptographyPanel_importExportButtons {
-    margin-bottom: 15px;
     display: inline-flex;
     flex-flow: wrap;
-    row-gap: 10px;
+    row-gap: $spacing-8;
+    column-gap: $spacing-8;
 }

res/css/views/settings/tabs/_SettingsTab.pcss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_SettingsTab {
-    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
     --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
     --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

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

@@ -15,31 +15,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
-    ul {
-        margin: 0;
-        padding: 0;
-    }
-
-    .mx_KeyboardShortcut_shortcutRow,
-    .mx_KeyboardShortcut {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
+.mx_KeyboardShortcut_shortcutList {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    display: grid;
+    grid-gap: $spacing-4;
+}
 
-    .mx_KeyboardShortcut_shortcutRow {
-        column-gap: $spacing-8;
-        margin-bottom: $spacing-4;
+.mx_KeyboardShortcut_shortcutRow,
+.mx_KeyboardShortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-        /* TODO: Use flexbox */
-        &:last-of-type {
-            margin-bottom: 0;
-        }
+.mx_KeyboardShortcut_shortcutRow {
+    column-gap: $spacing-8;
+}
 
-        .mx_KeyboardShortcut {
-            flex-wrap: nowrap;
-            column-gap: 5px; /* TODO: Use a spacing variable */
-        }
-    }
+.mx_KeyboardShortcut {
+    flex-wrap: nowrap;
+    column-gap: $spacing-4;
 }

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

@@ -14,43 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton {
-    margin-right: 10px;
+.mx_SecurityUserSettingsTab_bulkOptions {
+    display: flex;
+    flex-direction: row;
+    column-gap: $spacing-8;
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser {
-    margin-bottom: 5px;
+    margin-bottom: $spacing-4;
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
-    margin-right: 10px;
+    margin-right: $spacing-8;
 }
 
-.mx_SecurityUserSettingsTab {
-    .mx_SettingsTab_section {
-        .mx_AccessibleButton_kind_link {
-            font-size: inherit;
-        }
-    }
-
-    .mx_SecurityUserSettingsTab_warning {
-        color: $alert;
-        position: relative;
-        padding-left: 40px;
-        margin-top: 30px;
-
-        &::before {
-            mask-repeat: no-repeat;
-            mask-position: 0 center;
-            mask-size: $font-24px;
-            position: absolute;
-            width: $font-24px;
-            height: $font-24px;
-            content: "";
-            top: 0;
-            left: 0;
-            background-color: $alert;
-            mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
-        }
+.mx_SecurityUserSettingsTab_warning {
+    color: $alert;
+    position: relative;
+    padding-left: 40px;
+
+    &::before {
+        mask-repeat: no-repeat;
+        mask-position: 0 center;
+        mask-size: $font-24px;
+        position: absolute;
+        width: $font-24px;
+        height: $font-24px;
+        content: "";
+        top: 0;
+        left: 0;
+        background-color: $alert;
+        mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
     }
 }

src/components/views/settings/CrossSigningPanel.tsx

@@ -28,6 +28,7 @@ import ConfirmDestroyCrossSigningDialog from "../dialogs/security/ConfirmDestroy
 import SetupEncryptionDialog from "../dialogs/security/SetupEncryptionDialog";
 import { accessSecretStorage } from "../../../SecurityManager";
 import AccessibleButton from "../elements/AccessibleButton";
+import { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 interface IState {
     error?: Error;
@@ -178,22 +179,38 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
         if (homeserverSupportsCrossSigning === undefined) {
             summarisedStatus = <Spinner />;
         } else if (!homeserverSupportsCrossSigning) {
-            summarisedStatus = <p>{_t("Your homeserver does not support cross-signing.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    {_t("Your homeserver does not support cross-signing.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningReady && crossSigningPrivateKeysInStorage) {
-            summarisedStatus = <p>✅ {_t("Cross-signing is ready for use.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    ✅ {_t("Cross-signing is ready for use.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningReady && !crossSigningPrivateKeysInStorage) {
-            summarisedStatus = <p>⚠️ {_t("Cross-signing is ready but keys are not backed up.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    ⚠️ {_t("Cross-signing is ready but keys are not backed up.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningPrivateKeysInStorage) {
             summarisedStatus = (
-                <p>
+                <SettingsSubsectionText data-testid="summarised-status">
                     {_t(
                         "Your account has a cross-signing identity in secret storage, " +
                             "but it is not yet trusted by this session.",
                     )}
-                </p>
+                </SettingsSubsectionText>
             );
         } else {
-            summarisedStatus = <p>{_t("Cross-signing is not set up.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    {_t("Cross-signing is not set up.")}
+                </SettingsSubsectionText>
+            );
         }
 
         const keysExistAnywhere =
@@ -238,7 +255,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
         }
 
         return (
-            <div>
+            <>
                 {summarisedStatus}
                 <details>
                     <summary>{_t("Advanced")}</summary>
@@ -275,7 +292,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
                 </details>
                 {errorSection}
                 {actionRow}
-            </div>
+            </>
         );
     }
 }

src/components/views/settings/CryptographyPanel.tsx

@@ -26,6 +26,7 @@ import * as FormattingUtils from "../../../utils/FormattingUtils";
 import SettingsStore from "../../../settings/SettingsStore";
 import SettingsFlag from "../elements/SettingsFlag";
 import { SettingLevel } from "../../../settings/SettingLevel";
+import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 interface IProps {}
 
@@ -72,27 +73,28 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_SettingsTab_section mx_CryptographyPanel">
-                <span className="mx_SettingsTab_subheading">{_t("Cryptography")}</span>
-                <table className="mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo">
-                    <tr>
-                        <th scope="row">{_t("Session ID:")}</th>
-                        <td>
-                            <code>{deviceId}</code>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th scope="row">{_t("Session key:")}</th>
-                        <td>
-                            <code>
-                                <b>{identityKey}</b>
-                            </code>
-                        </td>
-                    </tr>
-                </table>
+            <SettingsSubsection heading={_t("Cryptography")}>
+                <SettingsSubsectionText>
+                    <table className="mx_CryptographyPanel_sessionInfo">
+                        <tr>
+                            <th scope="row">{_t("Session ID:")}</th>
+                            <td>
+                                <code>{deviceId}</code>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{_t("Session key:")}</th>
+                            <td>
+                                <code>
+                                    <b>{identityKey}</b>
+                                </code>
+                            </td>
+                        </tr>
+                    </table>
+                </SettingsSubsectionText>
                 {importExportButtons}
                 {noSendUnverifiedSetting}
-            </div>
+            </SettingsSubsection>
         );
     }
 

src/components/views/settings/E2eAdvancedPanel.tsx

@@ -20,21 +20,20 @@ import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 import SettingsFlag from "../elements/SettingsFlag";
+import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 const SETTING_MANUALLY_VERIFY_ALL_SESSIONS = "e2ee.manuallyVerifyAllSessions";
 
 const E2eAdvancedPanel: React.FC = () => {
     return (
-        <div className="mx_SettingsTab_section">
-            <span className="mx_SettingsTab_subheading">{_t("Encryption")}</span>
-
+        <SettingsSubsection heading={_t("Encryption")}>
             <SettingsFlag name={SETTING_MANUALLY_VERIFY_ALL_SESSIONS} level={SettingLevel.DEVICE} />
-            <div className="mx_SettingsTab_subsectionText">
+            <SettingsSubsectionText>
                 {_t(
                     "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
                 )}
-            </div>
-        </div>
+            </SettingsSubsectionText>
+        </SettingsSubsection>
     );
 };