Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

* Fix labelling of avatar menu * Make the integration manager toggle more clear. * fix label * lint * Update snapshots. * Refactor many cases of checkbox to use the new compound component. * Remove non-checkbox related changes * Reset some things * Remove usages of mx_checkbox* styling. * Use label locators for apperance tests. * small linter tweaks * lint * update screenshot * Test updates * lint * Realign checkboxes for device selection. * Fixup QuickSettings styling * remove comment * lint * flex comment * remove unused label * remove redundant classes * add test for spaces * lint * Copyright * fixup spaces test * spaces lint * Replace pin with compound pin. * Realign icons * Remove hack for colouring icons * Adjust existing rooms component to correctly label room. * Add test for adding an existing room to an existing space. * Set deterministic sort order for rooms * lint
2025-03-20 15:35:54 +00:00
parent 170dcd1c0e
commit 599112e122
43 changed files with 2361 additions and 1436 deletions
--- a/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
+++ b/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2019 The Matrix.org Foundation C.I.C.
 Copyright 2018 New Vector Ltd
 Copyright 2015, 2016 OpenMarket Ltd
@@ -16,13 +16,12 @@ import { KeyBindingAction } from "../KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";

 interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
-    label?: string;
    onChange(): void; // we handle keyup/down ourselves so lose the ChangeEvent
    onClose(): void; // gets called after onChange on KeyBindingAction.ActivateSelectedButton
 }

 // Semantic component for representing a styled role=menuitemcheckbox
-export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
+export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, onChange, onClose, ...props }) => {
    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();

    const onKeyDown = (e: React.KeyboardEvent): void => {
@@ -63,7 +62,6 @@ export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onCh
        <StyledCheckbox
            {...props}
            role="menuitemcheckbox"
-            aria-label={label}
            onChange={onChange}
            onKeyDown={onKeyDown}
            onKeyUp={onKeyUp}
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021-2023 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,6 +16,7 @@ import React, {
    useCallback,
    useContext,
    useEffect,
+    useId,
    useMemo,
    useRef,
    useState,
@@ -116,6 +117,7 @@ const Tile: React.FC<ITileProps> = ({
    const [showChildren, toggleShowChildren] = useStateToggle(true);
    const [onFocus, isActive, ref, nodeRef] = useRovingTabIndex();
    const [busy, setBusy] = useState(false);
+    const checkboxLabelId = useId();

    const onPreviewClick = (ev: ButtonEvent): void => {
        ev.preventDefault();
@@ -172,7 +174,14 @@ const Tile: React.FC<ITileProps> = ({
    let checkbox: ReactElement | undefined;
    if (onToggleClick) {
        if (hasPermissions) {
-            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
+            checkbox = (
+                <StyledCheckbox
+                    role="presentation"
+                    aria-labelledby={checkboxLabelId}
+                    checked={!!selected}
+                    tabIndex={-1}
+                />
+            );
        } else {
            checkbox = (
                <TextWithTooltip
@@ -181,7 +190,12 @@ const Tile: React.FC<ITileProps> = ({
                        ev.stopPropagation();
                    }}
                >
-                    <StyledCheckbox disabled={true} tabIndex={isActive ? 0 : -1} />
+                    <StyledCheckbox
+                        role="presentation"
+                        aria-labelledby={checkboxLabelId}
+                        disabled={true}
+                        tabIndex={-1}
+                    />
                </TextWithTooltip>
            );
        }
@@ -248,7 +262,7 @@ const Tile: React.FC<ITileProps> = ({
            <div className="mx_SpaceHierarchy_roomTile_item">
                <div className="mx_SpaceHierarchy_roomTile_avatar">{avatar}</div>
                <div className="mx_SpaceHierarchy_roomTile_name">
-                    {name}
+                    <span id={checkboxLabelId}>{name}</span>
                    {joinedSection}
                    {suggestedSection}
                </div>
@@ -330,11 +344,14 @@ const Tile: React.FC<ITileProps> = ({
        };
    }

+    const shouldToggle = hasPermissions && onToggleClick;
+
    return (
        <li
            className="mx_SpaceHierarchy_roomTileWrapper"
            role="treeitem"
            aria-selected={selected}
+            aria-labelledby={checkboxLabelId}
            aria-expanded={children ? showChildren : undefined}
        >
            <AccessibleButton
@@ -342,7 +359,7 @@ const Tile: React.FC<ITileProps> = ({
                    mx_SpaceHierarchy_subspace: room.room_type === RoomType.Space,
                    mx_SpaceHierarchy_joining: busy,
                })}
-                onClick={hasPermissions && onToggleClick ? onToggleClick : onPreviewClick}
+                onClick={shouldToggle ? onToggleClick : onPreviewClick}
                onKeyDown={onKeyDown}
                ref={ref}
                onFocus={onFocus}
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -1,12 +1,12 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type ReactElement, type ReactNode, useContext, useMemo, useRef, useState } from "react";
+import React, { type ReactElement, type ReactNode, useContext, useId, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { type Room, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -53,8 +53,9 @@ export const Entry: React.FC<{
    checked: boolean;
    onChange?(value: boolean): void;
 }> = ({ room, checked, onChange }) => {
+    const id = useId();
    return (
-        <label className="mx_AddExistingToSpace_entry">
+        <li id={id} className="mx_AddExistingToSpace_entry" aria-label={room.name}>
            {room?.isSpaceRoom() ? (
                <RoomAvatar room={room} size="32px" />
            ) : (
@@ -62,11 +63,12 @@ export const Entry: React.FC<{
            )}
            <span className="mx_AddExistingToSpace_entry_name">{room.name}</span>
            <StyledCheckbox
+                aria-labelledby={id}
                onChange={onChange ? (e) => onChange(e.currentTarget.checked) : undefined}
                checked={checked}
                disabled={!onChange}
            />
-        </label>
+        </li>
    );
 };

@@ -357,6 +359,7 @@ const defaultRendererFactory =
        <div className="mx_AddExistingToSpace_section">
            <h3>{_t(title)}</h3>
            <LazyRenderList
+                element="ul"
                itemHeight={ROW_HEIGHT}
                items={rooms}
                scrollTop={scrollTop}
--- a/src/components/views/dialogs/BulkRedactDialog.tsx
+++ b/src/components/views/dialogs/BulkRedactDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -113,12 +113,13 @@ const BulkRedactDialog: React.FC<Props> = (props) => {
                <div className="mx_Dialog_content" id="mx_Dialog_content">
                    <p>{_t("user_info|redact|confirm_description_1", { count, user })}</p>
                    <p>{_t("user_info|redact|confirm_description_2")}</p>
-                    <StyledCheckbox checked={keepStateEvents} onChange={(e) => setKeepStateEvents(e.target.checked)}>
+                    <StyledCheckbox
+                        description={_t("user_info|redact|confirm_keep_state_explainer")}
+                        checked={keepStateEvents}
+                        onChange={(e) => setKeepStateEvents(e.target.checked)}
+                    >
                        {_t("user_info|redact|confirm_keep_state_label")}
                    </StyledCheckbox>
-                    <div className="mx_BulkRedactDialog_checkboxMicrocopy">
-                        {_t("user_info|redact|confirm_keep_state_explainer")}
-                    </div>
                </div>
                <DialogButtons
                    primaryButton={_t("user_info|redact|confirm_button", { count })}
--- a/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
+++ b/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -78,7 +78,6 @@ const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
                        }}
                        autoFocus={true}
                    />
-
                    <StyledCheckbox
                        checked={canContact}
                        onChange={(e) => setCanContact((e.target as HTMLInputElement).checked)}
--- a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
+++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -44,22 +44,23 @@ const Entry: React.FC<{
    }

    return (
-        <label className="mx_ManageRestrictedJoinRuleDialog_entry">
-            <div>
-                <div>
-                    {localRoom ? <RoomAvatar room={room} size="20px" /> : <RoomAvatar oobData={room} size="20px" />}
-                    <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
-                </div>
-                {description && (
-                    <div className="mx_ManageRestrictedJoinRuleDialog_entry_description">{description}</div>
-                )}
-            </div>
+        <div className="mx_ManageRestrictedJoinRuleDialog_entry">
            <StyledCheckbox
                onChange={onChange ? (e) => onChange(e.target.checked) : undefined}
                checked={checked}
                disabled={!onChange}
-            />
-        </label>
+                description={description}
+            >
+                <div>
+                    {localRoom ? (
+                        <RoomAvatar role="none" room={room} size="20px" />
+                    ) : (
+                        <RoomAvatar oobData={room} size="20px" />
+                    )}
+                    <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
+                </div>
+            </StyledCheckbox>
+        </div>
    );
 };

--- a/src/components/views/dialogs/SpacePreferencesDialog.tsx
+++ b/src/components/views/dialogs/SpacePreferencesDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -45,14 +45,13 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
                                !showPeople,
                            );
                        }}
+                        description={_t("space|preferences|show_people_in_space", {
+                            spaceName: space.name,
+                        })}
                    >
                        {_t("common|people")}
                    </StyledCheckbox>
-                    <SettingsSubsectionText>
-                        {_t("space|preferences|show_people_in_space", {
-                            spaceName: space.name,
-                        })}
-                    </SettingsSubsectionText>
+                    <SettingsSubsectionText />
                </SettingsSubsection>
            </SettingsSection>
        </SettingsTab>
--- a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -100,16 +100,12 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
        });
        const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
            const text = CapabilityText.for(cap, this.props.widgetKind);
-            const byline = text.byline ? (
-                <span className="mx_WidgetCapabilitiesPromptDialog_byline">{text.byline}</span>
-            ) : null;

            return (
                <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap + i}>
-                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)}>
+                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)} description={text.byline}>
                        {text.primary}
                    </StyledCheckbox>
-                    {byline}
                </div>
            );
        });
--- a/src/components/views/elements/LabelledCheckbox.tsx
+++ b/src/components/views/elements/LabelledCheckbox.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -28,13 +28,16 @@ interface IProps {

 const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className }) => {
    return (
-        <label className={classnames("mx_LabelledCheckbox", className)}>
-            <StyledCheckbox disabled={disabled} checked={value} onChange={(e) => onChange(e.target.checked)} />
-            <div className="mx_LabelledCheckbox_labels">
+        <div className={classnames("mx_LabelledCheckbox", className)}>
+            <StyledCheckbox
+                description={byline}
+                disabled={disabled}
+                checked={value}
+                onChange={(e) => onChange(e.target.checked)}
+            >
                <span className="mx_LabelledCheckbox_label">{label}</span>
-                {byline ? <span className="mx_LabelledCheckbox_byline">{byline}</span> : null}
-            </div>
-        </label>
+            </StyledCheckbox>
+        </div>
    );
 };

--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -1,64 +1,51 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type Ref } from "react";
+import React, { useId, type ReactNode, type Ref } from "react";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
-import classnames from "classnames";
-
-export enum CheckboxStyle {
-    Solid = "solid",
-    Outline = "outline",
-}
+import { CheckboxInput, Form, HelpMessage, InlineField, Label } from "@vector-im/compound-web";

 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
    inputRef?: Ref<HTMLInputElement>;
-    kind?: CheckboxStyle;
    id?: string;
+    description?: ReactNode;
 }

-export default class StyledCheckbox extends React.PureComponent<IProps> {
-    private id: string;
+const StyledCheckbox: React.FC<IProps> = ({
+    id: initialId,
+    children: label,
+    className,
+    inputRef,
+    description,
+    ...otherProps
+}) => {
+    const id = initialId || "checkbox_" + secureRandomString(10);
+    const name = useId();
+    const descriptionId = useId();
+    return (
+        <Form.Root>
+            <InlineField
+                className={className}
+                name={name}
+                control={
+                    <CheckboxInput
+                        ref={inputRef}
+                        aria-describedby={description ? descriptionId : undefined}
+                        id={id}
+                        {...otherProps}
+                    />
+                }
+            >
+                {label && <Label htmlFor={id}>{label}</Label>}
+                {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
+            </InlineField>
+        </Form.Root>
+    );
+};

-    public static readonly defaultProps = {
-        className: "",
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-        // 56^10 so unlikely chance of collision.
-        this.id = this.props.id || "checkbox_" + secureRandomString(10);
-    }
-
-    public render(): React.ReactNode {
-        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { children, className, kind = CheckboxStyle.Solid, inputRef, ...otherProps } = this.props;
-
-        const newClassName = classnames("mx_Checkbox", className, {
-            mx_Checkbox_hasKind: kind,
-            [`mx_Checkbox_kind_${kind}`]: kind,
-        });
-        return (
-            <span className={newClassName}>
-                <input
-                    // Pass through the ref - used for keyboard shortcut access to some buttons
-                    ref={inputRef}
-                    id={this.id}
-                    {...otherProps}
-                    type="checkbox"
-                />
-                <label htmlFor={this.id}>
-                    {/* Using the div to center the image */}
-                    <div className="mx_Checkbox_background">
-                        <div className="mx_Checkbox_checkmark" />
-                    </div>
-                    {!!this.props.children && <div>{this.props.children}</div>}
-                </label>
-            </span>
-        );
-    }
-}
+export default StyledCheckbox;
--- a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -10,7 +10,7 @@ import React, { type HTMLProps } from "react";
 import { Tooltip } from "@vector-im/compound-web";

 import { _t } from "../../../../languageHandler";
-import StyledCheckbox, { CheckboxStyle } from "../../elements/StyledCheckbox";
+import StyledCheckbox from "../../elements/StyledCheckbox";

 interface Props extends Omit<HTMLProps<HTMLDivElement>, "className"> {
    selectedDeviceCount: number;
@@ -34,7 +34,6 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
            {!isSelectDisabled && (
                <Tooltip label={checkboxLabel} placement="top" isTriggerInteractive={false}>
                    <StyledCheckbox
-                        kind={CheckboxStyle.Solid}
                        checked={isAllSelected}
                        onChange={toggleSelectAll}
                        id="device-select-all-checkbox"
--- a/src/components/views/settings/devices/SelectableDeviceTile.tsx
+++ b/src/components/views/settings/devices/SelectableDeviceTile.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";

-import StyledCheckbox, { CheckboxStyle } from "../../elements/StyledCheckbox";
+import StyledCheckbox from "../../elements/StyledCheckbox";
 import DeviceTile, { type DeviceTileProps } from "./DeviceTile";

 interface Props extends DeviceTileProps {
@@ -21,7 +21,6 @@ const SelectableDeviceTile: React.FC<Props> = ({ children, device, isSelected, o
    return (
        <div className="mx_SelectableDeviceTile">
            <StyledCheckbox
-                kind={CheckboxStyle.Solid}
                checked={isSelected}
                onChange={onSelect}
                className="mx_SelectableDeviceTile_checkbox"
--- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021-2023 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,7 +14,6 @@ import {
    FavouriteSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as HashCircleIcon } from "../../../../../../res/img/element-icons/roomlist/hash-circle.svg";
 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
@@ -24,7 +23,7 @@ import { MetaSpace } from "../../../../../stores/spaces";
 import PosthogTrackers from "../../../../../PosthogTrackers";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
-import { SettingsSubsection, SettingsSubsectionText } from "../../shared/SettingsSubsection";
+import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import SdkConfig from "../../../../../SdkConfig";

 type InteractionName = "WebSettingsSidebarTabSpacesCheckbox" | "WebQuickSettingsPinToSidebarCheckbox";
@@ -87,14 +86,10 @@ const SidebarUserSettingsTab: React.FC = () => {
                        onChange={onMetaSpaceChangeFactory(MetaSpace.Home, "WebSettingsSidebarTabSpacesCheckbox")}
                        className="mx_SidebarUserSettingsTab_checkbox"
                        disabled={homeEnabled}
+                        description={_t("settings|sidebar|metaspaces_home_description")}
                    >
-                        <SettingsSubsectionText>
-                            <HomeSolidIcon />
-                            {_t("common|home")}
-                        </SettingsSubsectionText>
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_home_description")}
-                        </SettingsSubsectionText>
+                        <HomeSolidIcon className="mx_SidebarUserSettingsTab_icon" />
+                        {_t("common|home")}
                    </StyledCheckbox>

                    <StyledCheckbox
@@ -103,13 +98,9 @@ const SidebarUserSettingsTab: React.FC = () => {
                        onChange={onAllRoomsInHomeToggle}
                        className="mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                        data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                        description={_t("settings|sidebar|metaspaces_home_all_rooms_description")}
                    >
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_home_all_rooms")}
-                        </SettingsSubsectionText>
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_home_all_rooms_description")}
-                        </SettingsSubsectionText>
+                        {_t("settings|sidebar|metaspaces_home_all_rooms")}
                    </StyledCheckbox>

                    {!newRoomListEnabled && (
@@ -121,14 +112,10 @@ const SidebarUserSettingsTab: React.FC = () => {
                                    "WebSettingsSidebarTabSpacesCheckbox",
                                )}
                                className="mx_SidebarUserSettingsTab_checkbox"
+                                description={_t("settings|sidebar|metaspaces_favourites_description")}
                            >
-                                <SettingsSubsectionText>
-                                    <FavouriteSolidIcon />
-                                    {_t("common|favourites")}
-                                </SettingsSubsectionText>
-                                <SettingsSubsectionText>
-                                    {_t("settings|sidebar|metaspaces_favourites_description")}
-                                </SettingsSubsectionText>
+                                <FavouriteSolidIcon className="mx_SidebarUserSettingsTab_icon" />
+                                {_t("common|favourites")}
                            </StyledCheckbox>

                            <StyledCheckbox
@@ -138,14 +125,10 @@ const SidebarUserSettingsTab: React.FC = () => {
                                    "WebSettingsSidebarTabSpacesCheckbox",
                                )}
                                className="mx_SidebarUserSettingsTab_checkbox"
+                                description={_t("settings|sidebar|metaspaces_people_description")}
                            >
-                                <SettingsSubsectionText>
-                                    <UserProfileSolidIcon />
-                                    {_t("common|people")}
-                                </SettingsSubsectionText>
-                                <SettingsSubsectionText>
-                                    {_t("settings|sidebar|metaspaces_people_description")}
-                                </SettingsSubsectionText>
+                                <UserProfileSolidIcon className="mx_SidebarUserSettingsTab_icon" />
+                                {_t("common|people")}
                            </StyledCheckbox>
                        </>
                    )}
@@ -154,14 +137,9 @@ const SidebarUserSettingsTab: React.FC = () => {
                        checked={!!orphansEnabled}
                        onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans, "WebSettingsSidebarTabSpacesCheckbox")}
                        className="mx_SidebarUserSettingsTab_checkbox"
+                        description={_t("settings|sidebar|metaspaces_orphans_description")}
                    >
-                        <SettingsSubsectionText>
-                            <HashCircleIcon />
-                            {_t("settings|sidebar|metaspaces_orphans")}
-                        </SettingsSubsectionText>
-                        <SettingsSubsectionText>
-                            {_t("settings|sidebar|metaspaces_orphans_description")}
-                        </SettingsSubsectionText>
+                        {_t("settings|sidebar|metaspaces_orphans")}
                    </StyledCheckbox>
                    {SettingsStore.getValue("feature_video_rooms") && (
                        <StyledCheckbox
@@ -171,12 +149,10 @@ const SidebarUserSettingsTab: React.FC = () => {
                                "WebSettingsSidebarTabSpacesCheckbox",
                            )}
                            className="mx_SidebarUserSettingsTab_checkbox"
+                            description={conferenceSubsectionText}
                        >
-                            <SettingsSubsectionText>
-                                <VideoCallSolidIcon />
-                                {_t("settings|sidebar|metaspaces_video_rooms")}
-                            </SettingsSubsectionText>
-                            <SettingsSubsectionText>{conferenceSubsectionText}</SettingsSubsectionText>
+                            <VideoCallSolidIcon className="mx_SidebarUserSettingsTab_icon" />
+                            {_t("settings|sidebar|metaspaces_video_rooms")}
                        </StyledCheckbox>
                    )}
                </SettingsSubsection>
--- a/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/src/components/views/spaces/QuickSettingsButton.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021-2023 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -12,6 +12,7 @@ import {
    OverflowHorizontalIcon,
    UserProfileSolidIcon,
    FavouriteSolidIcon,
+    PinSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
@@ -25,7 +26,6 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserTab";
 import QuickThemeSwitcher from "./QuickThemeSwitcher";
-import { Icon as PinUprightIcon } from "../../../../res/img/element-icons/room/pin-upright.svg";
 import Modal from "../../../Modal";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
 import { SdkContextClass } from "../../../contexts/SDKContext";
@@ -89,13 +89,12 @@ const QuickSettingsButton: React.FC<{

                {!newRoomListEnabled && (
                    <>
-                        <h4 className="mx_QuickSettingsButton_pinToSidebarHeading">
-                            <PinUprightIcon className="mx_QuickSettingsButton_icon" />
+                        <h4>
+                            <PinSolidIcon className="mx_QuickSettingsButton_icon" />
                            {_t("quick_settings|metaspace_section")}
                        </h4>
-
                        <StyledCheckbox
-                            className="mx_QuickSettingsButton_favouritesCheckbox"
+                            className="mx_QuickSettingsButton_option"
                            checked={!!favouritesEnabled}
                            onChange={onMetaSpaceChangeFactory(
                                MetaSpace.Favourites,
@@ -106,7 +105,7 @@ const QuickSettingsButton: React.FC<{
                            {_t("common|favourites")}
                        </StyledCheckbox>
                        <StyledCheckbox
-                            className="mx_QuickSettingsButton_peopleCheckbox"
+                            className="mx_QuickSettingsButton_option"
                            checked={!!peopleEnabled}
                            onChange={onMetaSpaceChangeFactory(
                                MetaSpace.People,
@@ -117,7 +116,7 @@ const QuickSettingsButton: React.FC<{
                            {_t("common|people")}
                        </StyledCheckbox>
                        <AccessibleButton
-                            className="mx_QuickSettingsButton_moreOptionsButton"
+                            className="mx_QuickSettingsButton_moreOptionsButton mx_QuickSettingsButton_option"
                            onClick={() => {
                                closeMenu();
                                defaultDispatcher.dispatch({