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

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2023 Suguru Hirahara
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
         // Click "Show advanced" link button
         await tab.getByRole("button", { name: "Show advanced" }).click();
 
-        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
-        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+        await tab.getByLabel("Use bundled emoji font").click();
+        await tab.getByLabel("Use a system font").click();
 
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');

playwright/e2e/spaces/spaces.spec.ts

@@ -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
@@ -35,17 +35,18 @@ function spaceCreateOptions(spaceName: string, roomIds: string[] = []): ICreateR
                     name: spaceName,
                 },
             },
-            ...roomIds.map(spaceChildInitialState),
+            ...roomIds.map((r) => spaceChildInitialState(r)),
         ],
     };
 }
 
-function spaceChildInitialState(roomId: string): ICreateRoomOpts["initial_state"]["0"] {
+function spaceChildInitialState(roomId: string, order?: string): ICreateRoomOpts["initial_state"]["0"] {
     return {
         type: "m.space.child",
         state_key: roomId,
         content: {
             via: [roomId.split(":")[1]],
+            order,
         },
     };
 }
@@ -121,9 +122,10 @@ test.describe("Spaces", () => {
         await page.getByRole("button", { name: "Skip for now" }).click();
 
         // Assert rooms exist in the room list
-        await expect(page.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-        await expect(page.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
+        const roomList = page.getByRole("tree", { name: "Rooms" });
+        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
+        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
 
         // Assert rooms exist in the space explorer
         await expect(
@@ -155,7 +157,7 @@ test.describe("Spaces", () => {
 
         await page.getByRole("button", { name: "Just me" }).click();
 
-        await page.getByText("Sample Room").click({ force: true }); // force click as checkbox size is zero
+        await page.getByRole("checkbox", { name: "Sample Room" }).click();
 
         // Temporal implementation as multiple elements with the role "button" and name "Add" are found
         await page.locator(".mx_AddExistingToSpace_footer").getByRole("button", { name: "Add" }).click();
@@ -165,6 +167,50 @@ test.describe("Spaces", () => {
         ).toBeVisible();
     });
 
+    test(
+        "should allow user to add an existing room to a space after creation",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            await app.client.createRoom({
+                name: "Sample Room",
+            });
+            await app.client.createRoom({
+                name: "A Room that will not be selected",
+            });
+
+            const menu = await openSpaceCreateMenu(page);
+            await menu.getByRole("button", { name: "Private" }).click();
+
+            await menu
+                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
+                .setInputFiles("playwright/sample-files/riot.png");
+            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
+            await menu
+                .getByRole("textbox", { name: "Description" })
+                .fill("This is a personal space to mourn Riot.im...");
+            await menu.getByRole("textbox", { name: "Name" }).fill("This is my Riot");
+            await menu.getByRole("textbox", { name: "Name" }).press("Enter");
+
+            await page.getByRole("button", { name: "Just me" }).click();
+
+            await page.getByRole("button", { name: "Skip for now" }).click();
+
+            await page.getByRole("button", { name: "Add room" }).click();
+            await page.getByRole("menuitem", { name: "Add existing room" }).click();
+
+            await page.getByRole("checkbox", { name: "Sample Room" }).click();
+
+            await expect(page.getByRole("dialog", { name: "Avatar Add existing rooms" })).toMatchScreenshot(
+                "add-existing-rooms-dialog.png",
+            );
+
+            await page.getByRole("button", { name: "Add" }).click();
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list").getByRole("treeitem", { name: "Sample Room" }),
+            ).toBeVisible();
+        },
+    );
+
     test("should allow user to invite another to a space", { tag: "@no-webkit" }, async ({ page, app, user, bot }) => {
         await app.client.createSpace({
             visibility: "public" as any,
@@ -291,4 +337,36 @@ test.describe("Spaces", () => {
         // Assert we get shown the new room intro, and thus not the soft crash screen
         await expect(page.locator(".mx_NewRoomIntro")).toBeVisible();
     });
+
+    test("should render spaces view", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        axe.disableRules([
+            // Disable this check as it triggers on nested roving tab index elements which are in practice fine
+            "nested-interactive",
+            // XXX: We have some known contrast issues here
+            "color-contrast",
+        ]);
+
+        const childSpaceId1 = await app.client.createSpace({
+            name: "Child Space 1",
+            initial_state: [],
+        });
+        const childSpaceId2 = await app.client.createSpace({
+            name: "Child Space 2",
+            initial_state: [],
+        });
+        const childSpaceId3 = await app.client.createSpace({
+            name: "Child Space 3",
+            initial_state: [],
+        });
+        await app.client.createSpace({
+            name: "Root Space",
+            initial_state: [
+                spaceChildInitialState(childSpaceId1, "a"),
+                spaceChildInitialState(childSpaceId2, "b"),
+                spaceChildInitialState(childSpaceId3, "c"),
+            ],
+        });
+        await app.viewSpaceByName("Root Space");
+        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
+    });
 });

res/css/_components.pcss

@@ -128,7 +128,6 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
-@import "./views/dialogs/_BulkRedactDialog.pcss";
 @import "./views/dialogs/_ChangelogDialog.pcss";
 @import "./views/dialogs/_CompoundDialog.pcss";
 @import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@@ -212,7 +211,6 @@
 @import "./views/elements/_ServerPicker.pcss";
 @import "./views/elements/_SettingsFlag.pcss";
 @import "./views/elements/_Spinner.pcss";
-@import "./views/elements/_StyledCheckbox.pcss";
 @import "./views/elements/_StyledRadioButton.pcss";
 @import "./views/elements/_SyntaxHighlight.pcss";
 @import "./views/elements/_TagComposer.pcss";

res/css/components/views/settings/devices/_SelectableDeviceTile.pcss

@@ -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
@@ -16,9 +16,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_SelectableDeviceTile_checkbox {
     flex: 1 0;
 
-    .mx_Checkbox_background + div {
-        flex: 1 0;
-        /* override more specific selector */
-        margin-left: $spacing-16 !important;
+    > div {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-right: var(--cpd-space-1x);
     }
 }

res/css/structures/_QuickSettingsButton.pcss

@@ -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
@@ -70,38 +70,26 @@ Please see LICENSE files in the repository root for full details.
         text-transform: uppercase;
         color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
-    }
-
-    .mx_QuickSettingsButton_pinToSidebarHeading {
-        padding-left: 24px;
         position: relative;
-    }
-
-    .mx_Checkbox {
-        margin-bottom: 8px;
-    }
-
-    .mx_QuickSettingsButton_favouritesCheckbox,
-    .mx_QuickSettingsButton_peopleCheckbox {
-        .mx_Checkbox_background + div {
-            padding-left: 22px;
-            position: relative;
-            margin-left: 6px;
-            font-size: $font-15px;
-            line-height: $font-24px;
-            color: var(--cpd-color-text-primary);
-        }
+        display: flex;
     }
 
     .mx_QuickSettingsButton_moreOptionsButton {
-        padding-left: 22px;
-        margin-left: 22px;
+        margin-left: var(--cpd-space-7x);
         font-size: $font-15px;
         line-height: $font-24px;
         color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }
+
+    .mx_QuickSettingsButton_option {
+        margin-bottom: var(--cpd-space-3x);
+        label {
+            /* Correctly line up icons and text. */
+            display: flex;
+        }
+    }
 }
 
 .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -111,15 +99,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_QuickSettingsButton_icon {
-    // TODO remove when all icons have fill=currentColor
-    * {
-        fill: $secondary-content;
-    }
+    margin-right: var(--cpd-space-1x);
     color: $secondary-content;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    margin-top: auto;
+    margin-bottom: auto;
 }

res/css/structures/_SpaceHierarchy.pcss

@@ -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
@@ -247,15 +247,6 @@ Please see LICENSE files in the repository root for full details.
                     .mx_AccessibleButton_kind_primary_outline {
                         padding: 3px 16px; /* to account for the 1px border */
                     }
-
-                    .mx_Checkbox {
-                        display: inline-flex;
-
-                        label {
-                            width: 16px;
-                            height: 16px;
-                        }
-                    }
                 }
 
                 &:hover,

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -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
@@ -32,6 +32,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_AddExistingToSpace_section {
         margin-right: 12px;
 
+        ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
         // provides space for scrollbar so that checkbox and scrollbar do not collide
 
         &:not(:first-child) {
@@ -214,6 +219,12 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     margin-top: 12px;
 
+    form {
+        /* Align checkboxes. */
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
     .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
         margin-right: 12px;
     }
@@ -227,8 +238,4 @@ Please see LICENSE files in the repository root for full details.
         text-overflow: ellipsis;
         margin-right: 12px;
     }
-
-    .mx_Checkbox {
-        align-items: center;
-    }
 }

res/css/views/dialogs/_BulkRedactDialog.pcss

@@ -1,19 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Robin Townsend <robin@robin.town>
-
-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.
-*/
-
-.mx_BulkRedactDialog {
-    .mx_Checkbox,
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        line-height: $font-20px;
-    }
-
-    .mx_BulkRedactDialog_checkboxMicrocopy {
-        margin-left: 26px;
-        color: $secondary-content;
-    }
-}

res/css/views/dialogs/_ExportDialog.pcss

@@ -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
@@ -43,11 +43,6 @@ Please see LICENSE files in the repository root for full details.
         .mx_Field_valid.mx_Field:focus-within {
             border-color: $input-border-color;
         }
-
-        .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
-            background: $info-plinth-fg-color;
-            border-color: $info-plinth-fg-color;
-        }
     }
 
     .mx_ExportDialog_progress {

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -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
@@ -74,10 +74,6 @@ Please see LICENSE files in the repository root for full details.
                 line-height: $font-15px;
                 color: $tertiary-content;
             }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
         }
     }
 

res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss

@@ -1,5 +1,5 @@
 /*
-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
@@ -19,13 +19,6 @@ Please see LICENSE files in the repository root for full details.
         margin-top: 20px;
         font-size: $font-15px;
         line-height: $font-15px;
-
-        .mx_WidgetCapabilitiesPromptDialog_byline {
-            color: $muted-fg-color;
-            margin-left: 26px;
-            font-size: $font-12px;
-            line-height: $font-12px;
-        }
     }
 
     .mx_Dialog_buttons {

res/css/views/elements/_LabelledCheckbox.pcss

@@ -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
@@ -7,26 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LabelledCheckbox {
-    display: flex;
-    gap: 8px;
-    flex-direction: row;
-
-    .mx_Checkbox {
-        margin-top: 3px; /* visually align with label text */
-    }
-
-    .mx_LabelledCheckbox_labels {
-        flex: 1;
-
-        .mx_LabelledCheckbox_label {
-            vertical-align: middle;
-        }
-
-        .mx_LabelledCheckbox_byline {
-            display: block;
-            padding-top: $spacing-4;
-            color: $muted-fg-color;
-            font-size: $font-11px;
-        }
-    }
+    margin-top: var(--cpd-space-2x);
 }

res/css/views/elements/_StyledCheckbox.pcss

@@ -1,98 +0,0 @@
-/*
-Copyright 2024 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.
-*/
-
-.mx_Checkbox {
-    $size: $font-16px;
-    $border-radius: 0.27rem;
-
-    display: flex;
-    align-items: flex-start;
-
-    input[type="checkbox"] {
-        appearance: none;
-        margin: 0;
-        padding: 0;
-
-        & + label {
-            display: flex;
-            align-items: center;
-
-            flex-grow: 1;
-        }
-
-        & + label > .mx_Checkbox_background {
-            display: inline-flex;
-            position: relative;
-
-            flex-shrink: 0;
-
-            height: $size;
-            width: $size;
-            size: 0.5rem;
-            border: 1px solid var(--cpd-color-border-interactive-primary);
-            box-sizing: border-box;
-            border-radius: $border-radius;
-
-            .mx_Checkbox_checkmark {
-                display: none;
-
-                height: 100%;
-                width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-position: center;
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-            }
-        }
-
-        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-            display: block;
-        }
-
-        & + label > *:not(.mx_Checkbox_background) {
-            margin-left: 10px;
-        }
-
-        &:disabled + label {
-            cursor: not-allowed;
-        }
-
-        &:focus-visible {
-            & + label .mx_Checkbox_background {
-                @mixin unreal-focus;
-            }
-        }
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-icon-on-solid-primary);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-accent-rest);
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked:disabled + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-action-primary-disabled);
-        border-color: var(--cpd-color-bg-action-primary-disabled);
-    }
-}
-
-.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
-    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: var(--cpd-color-bg-accent-rest);
-    }
-
-    &:checked + label > .mx_Checkbox_background {
-        background: transparent;
-        border-color: var(--cpd-color-bg-accent-rest);
-    }
-}

res/css/views/rooms/_RoomSublist.pcss

@@ -1,5 +1,5 @@
 /*
-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
@@ -393,8 +393,7 @@ Please see LICENSE files in the repository root for full details.
         margin-bottom: 4px;
     }
 
-    .mx_StyledRadioButton,
-    .mx_Checkbox {
+    .mx_StyledRadioButton {
         margin-top: 8px;
     }
 }

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

@@ -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
@@ -14,17 +14,12 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_SidebarUserSettingsTab_checkbox {
-    margin-bottom: $spacing-8;
-    /* override checkbox styles */
-    label {
-        align-items: flex-start !important;
-    }
-
-    svg {
-        height: 16px;
-        width: 16px;
-        margin-right: $spacing-8;
-        margin-bottom: -1px;
-    }
+.mx_SidebarUserSettingsTab_icon {
+    margin-right: var(--cpd-space-2x);
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mx_SidebarUserSettingsTab_checkbox label {
+    display: flex;
 }

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}

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}

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}

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 })}

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)}

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>
     );
 };
 

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>

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>
             );
         });

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>
     );
 };
 

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;

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"

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"

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>

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({

test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -58,6 +58,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     role="tree"
   >
     <li
+      aria-labelledby=":r8:"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -86,7 +87,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           <div
             class="mx_SpaceHierarchy_roomTile_name"
           >
-            Unnamed Room
+            <span
+              id=":r8:"
+            >
+              Unnamed Room
+            </span>
           </div>
           <div
             class="mx_SpaceHierarchy_roomTile_info"
@@ -104,30 +109,54 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           >
             Join
           </div>
-          <span
-            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          <form
+            class="_root_19upo_16"
           >
-            <input
-              id="checkbox_vY7Q4uEh9K"
-              tabindex="0"
-              type="checkbox"
-            />
-            <label
-              for="checkbox_vY7Q4uEh9K"
+            <div
+              class="_inline-field_19upo_32"
             >
               <div
-                class="mx_Checkbox_background"
+                class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="mx_Checkbox_checkmark"
-                />
+                  class="_container_1hel1_10"
+                >
+                  <input
+                    aria-labelledby=":r8:"
+                    class="_input_1hel1_18"
+                    id="checkbox_MwbPDmfGtm"
+                    role="presentation"
+                    tabindex="-1"
+                    type="checkbox"
+                  />
+                  <div
+                    class="_ui_1hel1_19"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </label>
-          </span>
+              <div
+                class="_inline-field-body_19upo_38"
+              />
+            </div>
+          </form>
         </div>
       </div>
     </li>
     <li
+      aria-labelledby=":rc:"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -156,7 +185,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           <div
             class="mx_SpaceHierarchy_roomTile_name"
           >
-            Unnamed Room
+            <span
+              id=":rc:"
+            >
+              Unnamed Room
+            </span>
           </div>
           <div
             class="mx_SpaceHierarchy_roomTile_info"
@@ -174,30 +207,54 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           >
             Join
           </div>
-          <span
-            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          <form
+            class="_root_19upo_16"
           >
-            <input
-              id="checkbox_38QgU2Pomx"
-              tabindex="-1"
-              type="checkbox"
-            />
-            <label
-              for="checkbox_38QgU2Pomx"
+            <div
+              class="_inline-field_19upo_32"
             >
               <div
-                class="mx_Checkbox_background"
+                class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="mx_Checkbox_checkmark"
-                />
+                  class="_container_1hel1_10"
+                >
+                  <input
+                    aria-labelledby=":rc:"
+                    class="_input_1hel1_18"
+                    id="checkbox_GQvdMWe954"
+                    role="presentation"
+                    tabindex="-1"
+                    type="checkbox"
+                  />
+                  <div
+                    class="_ui_1hel1_19"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </label>
-          </span>
+              <div
+                class="_inline-field-body_19upo_38"
+              />
+            </div>
+          </form>
         </div>
       </div>
     </li>
     <li
+      aria-labelledby=":rg:"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -226,7 +283,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           <div
             class="mx_SpaceHierarchy_roomTile_name"
           >
-            Knock room
+            <span
+              id=":rg:"
+            >
+              Knock room
+            </span>
           </div>
           <div
             class="mx_SpaceHierarchy_roomTile_info"
@@ -244,31 +305,55 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           >
             View
           </div>
-          <span
-            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          <form
+            class="_root_19upo_16"
           >
-            <input
-              id="checkbox_wKpa6hpi3Y"
-              tabindex="-1"
-              type="checkbox"
-            />
-            <label
-              for="checkbox_wKpa6hpi3Y"
+            <div
+              class="_inline-field_19upo_32"
             >
               <div
-                class="mx_Checkbox_background"
+                class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="mx_Checkbox_checkmark"
-                />
+                  class="_container_1hel1_10"
+                >
+                  <input
+                    aria-labelledby=":rg:"
+                    class="_input_1hel1_18"
+                    id="checkbox_DVIAu5CsiH"
+                    role="presentation"
+                    tabindex="-1"
+                    type="checkbox"
+                  />
+                  <div
+                    class="_ui_1hel1_19"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </label>
-          </span>
+              <div
+                class="_inline-field-body_19upo_38"
+              />
+            </div>
+          </form>
         </div>
       </div>
     </li>
     <li
       aria-expanded="true"
+      aria-labelledby=":rk:"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -297,7 +382,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           <div
             class="mx_SpaceHierarchy_roomTile_name"
           >
-            Nested space
+            <span
+              id=":rk:"
+            >
+              Nested space
+            </span>
           </div>
           <div
             class="mx_SpaceHierarchy_roomTile_info"
@@ -315,26 +404,49 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           >
             Join
           </div>
-          <span
-            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          <form
+            class="_root_19upo_16"
           >
-            <input
-              id="checkbox_EetmBG4yVC"
-              tabindex="-1"
-              type="checkbox"
-            />
-            <label
-              for="checkbox_EetmBG4yVC"
+            <div
+              class="_inline-field_19upo_32"
             >
               <div
-                class="mx_Checkbox_background"
+                class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="mx_Checkbox_checkmark"
-                />
+                  class="_container_1hel1_10"
+                >
+                  <input
+                    aria-labelledby=":rk:"
+                    class="_input_1hel1_18"
+                    id="checkbox_RD7nyrA2oh"
+                    role="presentation"
+                    tabindex="-1"
+                    type="checkbox"
+                  />
+                  <div
+                    class="_ui_1hel1_19"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </label>
-          </span>
+              <div
+                class="_inline-field-body_19upo_38"
+              />
+            </div>
+          </form>
         </div>
         <div
           class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
@@ -346,6 +458,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       />
     </li>
     <li
+      aria-labelledby=":ro:"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -374,7 +487,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           <div
             class="mx_SpaceHierarchy_roomTile_name"
           >
-            Nested room
+            <span
+              id=":ro:"
+            >
+              Nested room
+            </span>
           </div>
           <div
             class="mx_SpaceHierarchy_roomTile_info"
@@ -393,30 +510,53 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
-            aria-labelledby=":r8:"
+            aria-labelledby=":rp:"
             tabindex="0"
           >
-            <span
-              class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+            <form
+              class="_root_19upo_16"
             >
-              <input
-                disabled=""
-                id="checkbox_eEefiPqpMR"
-                tabindex="-1"
-                type="checkbox"
-              />
-              <label
-                for="checkbox_eEefiPqpMR"
+              <div
+                class="_inline-field_19upo_32"
               >
                 <div
-                  class="mx_Checkbox_background"
+                  class="_inline-field-control_19upo_44"
                 >
                   <div
-                    class="mx_Checkbox_checkmark"
-                  />
+                    class="_container_1hel1_10"
+                  >
+                    <input
+                      aria-labelledby=":ro:"
+                      class="_input_1hel1_18"
+                      disabled=""
+                      id="checkbox_jWVJIPauy1"
+                      role="presentation"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <div
+                      class="_ui_1hel1_19"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                        />
+                      </svg>
+                    </div>
+                  </div>
                 </div>
-              </label>
-            </span>
+                <div
+                  class="_inline-field-body_19upo_38"
+                />
+              </div>
+            </form>
           </span>
         </div>
       </div>

test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

@@ -150,28 +150,53 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
         </span>
       </span>
     </div>
-    <span
-      class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    <form
+      class="_root_19upo_16"
     >
-      <input
-        id="include-attachments"
-        type="checkbox"
-      />
-      <label
-        for="include-attachments"
+      <div
+        class="_inline-field_19upo_32 mx_ExportDialog_attachments-checkbox"
       >
         <div
-          class="mx_Checkbox_background"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            class="mx_Checkbox_checkmark"
-          />
+            class="_container_1hel1_10"
+          >
+            <input
+              class="_input_1hel1_18"
+              id="include-attachments"
+              type="checkbox"
+            />
+            <div
+              class="_ui_1hel1_19"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
-        <div>
-          Include Attachments
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="include-attachments"
+          >
+            Include Attachments
+          </label>
         </div>
-      </label>
-    </span>
+      </div>
+    </form>
   </div>
   <div
     class="mx_Dialog_buttons"

test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -59,53 +59,80 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
         <h3>
           Other spaces you know
         </h3>
-        <label
+        <div
           class="mx_ManageRestrictedJoinRuleDialog_entry"
         >
-          <div>
-            <div>
-              <span
-                class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-                data-color="1"
-                data-testid="avatar-img"
-                data-type="round"
-                role="presentation"
-                style="--cpd-avatar-size: 20px;"
-              >
-                O
-              </span>
-              <span
-                class="mx_ManageRestrictedJoinRuleDialog_entry_name"
-              >
-                Other Space
-              </span>
-            </div>
-            <div
-              class="mx_ManageRestrictedJoinRuleDialog_entry_description"
-            >
-              0 members
-            </div>
-          </div>
-          <span
-            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          <form
+            class="_root_19upo_16"
           >
-            <input
-              id="checkbox_vY7Q4uEh9K"
-              type="checkbox"
-            />
-            <label
-              for="checkbox_vY7Q4uEh9K"
+            <div
+              class="_inline-field_19upo_32"
             >
               <div
-                class="mx_Checkbox_background"
+                class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="mx_Checkbox_checkmark"
-                />
+                  class="_container_1hel1_10"
+                >
+                  <input
+                    aria-describedby=":r5:"
+                    class="_input_1hel1_18"
+                    id="checkbox_vY7Q4uEh9K"
+                    type="checkbox"
+                  />
+                  <div
+                    class="_ui_1hel1_19"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                </div>
               </div>
-            </label>
-          </span>
-        </label>
+              <div
+                class="_inline-field-body_19upo_38"
+              >
+                <label
+                  class="_label_19upo_59"
+                  for="checkbox_vY7Q4uEh9K"
+                >
+                  <div>
+                    <span
+                      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                      data-color="1"
+                      data-testid="avatar-img"
+                      data-type="round"
+                      role="none"
+                      style="--cpd-avatar-size: 20px;"
+                    >
+                      O
+                    </span>
+                    <span
+                      class="mx_ManageRestrictedJoinRuleDialog_entry_name"
+                    >
+                      Other Space
+                    </span>
+                  </div>
+                </label>
+                <span
+                  class="_message_19upo_85 _help-message_19upo_91"
+                  id=":r5:"
+                >
+                  0 members
+                </span>
+              </div>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
     <div

test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap

@@ -2,81 +2,129 @@
 
 exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`] = `
 <DocumentFragment>
-  <label
+  <div
     class="mx_LabelledCheckbox"
   >
-    <span
-      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    <form
+      class="_root_19upo_16"
     >
-      <input
-        checked=""
-        id="checkbox_vY7Q4uEh9K"
-        type="checkbox"
-      />
-      <label
-        for="checkbox_vY7Q4uEh9K"
+      <div
+        class="_inline-field_19upo_32"
       >
         <div
-          class="mx_Checkbox_background"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            class="mx_Checkbox_checkmark"
-          />
+            class="_container_1hel1_10"
+          >
+            <input
+              aria-describedby=":r4:"
+              checked=""
+              class="_input_1hel1_18"
+              id="checkbox_vY7Q4uEh9K"
+              type="checkbox"
+            />
+            <div
+              class="_ui_1hel1_19"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
-      </label>
-    </span>
-    <div
-      class="mx_LabelledCheckbox_labels"
-    >
-      <span
-        class="mx_LabelledCheckbox_label"
-      >
-        Hello world
-      </span>
-      <span
-        class="mx_LabelledCheckbox_byline"
-      >
-        this is a byline
-      </span>
-    </div>
-  </label>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="checkbox_vY7Q4uEh9K"
+          >
+            <span
+              class="mx_LabelledCheckbox_label"
+            >
+              Hello world
+            </span>
+          </label>
+          <span
+            class="_message_19upo_85 _help-message_19upo_91"
+            id=":r4:"
+          >
+            this is a byline
+          </span>
+        </div>
+      </div>
+    </form>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
 <DocumentFragment>
-  <label
+  <div
     class="mx_LabelledCheckbox"
   >
-    <span
-      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    <form
+      class="_root_19upo_16"
     >
-      <input
-        checked=""
-        id="checkbox_vY7Q4uEh9K"
-        type="checkbox"
-      />
-      <label
-        for="checkbox_vY7Q4uEh9K"
+      <div
+        class="_inline-field_19upo_32"
       >
         <div
-          class="mx_Checkbox_background"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            class="mx_Checkbox_checkmark"
-          />
+            class="_container_1hel1_10"
+          >
+            <input
+              checked=""
+              class="_input_1hel1_18"
+              id="checkbox_vY7Q4uEh9K"
+              type="checkbox"
+            />
+            <div
+              class="_ui_1hel1_19"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
-      </label>
-    </span>
-    <div
-      class="mx_LabelledCheckbox_labels"
-    >
-      <span
-        class="mx_LabelledCheckbox_label"
-      >
-        Hello world
-      </span>
-    </div>
-  </label>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="checkbox_vY7Q4uEh9K"
+          >
+            <span
+              class="mx_LabelledCheckbox_label"
+            >
+              Hello world
+            </span>
+          </label>
+        </div>
+      </div>
+    </form>
+  </div>
 </DocumentFragment>
 `;

test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap

@@ -9,29 +9,50 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
     <span
       tabindex="0"
     >
-      <span
-        class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+      <form
+        class="_root_19upo_16"
       >
-        <input
-          aria-label="Deselect all"
-          aria-labelledby=":r6:"
-          checked=""
-          data-testid="device-select-all-checkbox"
-          id="device-select-all-checkbox"
-          type="checkbox"
-        />
-        <label
-          for="device-select-all-checkbox"
+        <div
+          class="_inline-field_19upo_32"
         >
           <div
-            class="mx_Checkbox_background"
+            class="_inline-field-control_19upo_44"
           >
             <div
-              class="mx_Checkbox_checkmark"
-            />
+              class="_container_1hel1_10"
+            >
+              <input
+                aria-label="Deselect all"
+                aria-labelledby=":r9:"
+                checked=""
+                class="_input_1hel1_18"
+                data-testid="device-select-all-checkbox"
+                id="device-select-all-checkbox"
+                type="checkbox"
+              />
+              <div
+                class="_ui_1hel1_19"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
-        </label>
-      </span>
+          <div
+            class="_inline-field-body_19upo_38"
+          />
+        </div>
+      </form>
     </span>
     <span
       class="mx_FilteredDeviceListHeader_label"
@@ -54,28 +75,49 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
     <span
       tabindex="0"
     >
-      <span
-        class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+      <form
+        class="_root_19upo_16"
       >
-        <input
-          aria-label="Select all"
-          aria-labelledby=":r0:"
-          data-testid="device-select-all-checkbox"
-          id="device-select-all-checkbox"
-          type="checkbox"
-        />
-        <label
-          for="device-select-all-checkbox"
+        <div
+          class="_inline-field_19upo_32"
         >
           <div
-            class="mx_Checkbox_background"
+            class="_inline-field-control_19upo_44"
           >
             <div
-              class="mx_Checkbox_checkmark"
-            />
+              class="_container_1hel1_10"
+            >
+              <input
+                aria-label="Select all"
+                aria-labelledby=":r0:"
+                class="_input_1hel1_18"
+                data-testid="device-select-all-checkbox"
+                id="device-select-all-checkbox"
+                type="checkbox"
+              />
+              <div
+                class="_ui_1hel1_19"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
-        </label>
-      </span>
+          <div
+            class="_inline-field-body_19upo_38"
+          />
+        </div>
+      </form>
     </span>
     <span
       class="mx_FilteredDeviceListHeader_label"

test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<SelectableDeviceTile /> renders selected tile 1`] = `
 <input
   checked=""
+  class="_input_1hel1_18"
   data-testid="device-tile-checkbox-my-device"
   id="device-tile-checkbox-my-device"
   type="checkbox"
@@ -14,88 +15,113 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
   <div
     class="mx_SelectableDeviceTile"
   >
-    <span
-      class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    <form
+      class="_root_19upo_16"
     >
-      <input
-        data-testid="device-tile-checkbox-my-device"
-        id="device-tile-checkbox-my-device"
-        type="checkbox"
-      />
-      <label
-        for="device-tile-checkbox-my-device"
+      <div
+        class="_inline-field_19upo_32 mx_SelectableDeviceTile_checkbox"
       >
         <div
-          class="mx_Checkbox_background"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            class="mx_Checkbox_checkmark"
-          />
+            class="_container_1hel1_10"
+          >
+            <input
+              class="_input_1hel1_18"
+              data-testid="device-tile-checkbox-my-device"
+              id="device-tile-checkbox-my-device"
+              type="checkbox"
+            />
+            <div
+              class="_ui_1hel1_19"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
-        <div>
-          <div
-            class="mx_DeviceTile mx_DeviceTile_interactive"
-            data-testid="device-tile-my-device"
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="device-tile-checkbox-my-device"
           >
             <div
-              class="mx_DeviceTypeIcon"
+              class="mx_DeviceTile mx_DeviceTile_interactive"
+              data-testid="device-tile-my-device"
             >
               <div
-                class="mx_DeviceTypeIcon_deviceIconWrapper"
+                class="mx_DeviceTypeIcon"
               >
                 <div
-                  aria-label="Unknown session type"
-                  class="mx_DeviceTypeIcon_deviceIcon"
+                  class="mx_DeviceTypeIcon_deviceIconWrapper"
+                >
+                  <div
+                    aria-label="Unknown session type"
+                    class="mx_DeviceTypeIcon_deviceIcon"
+                    role="img"
+                  />
+                </div>
+                <div
+                  aria-label="Unverified"
+                  class="mx_DeviceTypeIcon_verificationIcon unverified"
                   role="img"
                 />
               </div>
               <div
-                aria-label="Unverified"
-                class="mx_DeviceTypeIcon_verificationIcon unverified"
-                role="img"
-              />
-            </div>
-            <div
-              class="mx_DeviceTile_info"
-            >
-              <h4
-                class="mx_Heading_h4"
+                class="mx_DeviceTile_info"
               >
-                My Device
-              </h4>
+                <h4
+                  class="mx_Heading_h4"
+                >
+                  My Device
+                </h4>
+                <div
+                  class="mx_DeviceTile_metadata"
+                >
+                  <span
+                    data-testid="device-metadata-isVerified"
+                  >
+                    Unverified
+                  </span>
+                   · 
+                  <span
+                    data-testid="device-metadata-lastSeenIp"
+                  >
+                    123.456.789
+                  </span>
+                   · 
+                  <span
+                    data-testid="device-metadata-deviceId"
+                  >
+                    my-device
+                  </span>
+                </div>
+              </div>
               <div
-                class="mx_DeviceTile_metadata"
+                class="mx_DeviceTile_actions"
               >
-                <span
-                  data-testid="device-metadata-isVerified"
-                >
-                  Unverified
-                </span>
-                 · 
-                <span
-                  data-testid="device-metadata-lastSeenIp"
-                >
-                  123.456.789
-                </span>
-                 · 
-                <span
-                  data-testid="device-metadata-deviceId"
-                >
-                  my-device
-                </span>
+                <div>
+                  test
+                </div>
               </div>
             </div>
-            <div
-              class="mx_DeviceTile_actions"
-            >
-              <div>
-                test
-              </div>
-            </div>
-          </div>
+          </label>
         </div>
-      </label>
-    </span>
+      </div>
+    </form>
   </div>
 </div>
 `;

test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx

@@ -39,8 +39,7 @@ const labelActivityStatus = "New room activity, upgrades and status messages occ
 const labelActivityBots = "Messages sent by bots";
 const labelMentionUser = "Notify when someone mentions using @displayname or @mxid";
 const labelMentionRoom = "Notify when someone mentions using @room";
-const labelMentionKeyword =
-    "Notify when someone uses a keyword" + "Enter keywords here, or use for spelling variations or nicknames";
+const labelMentionKeyword = "Notify when someone uses a keyword";
 const labelResetDefault = "Reset to default settings";
 
 const keywords = ["justjann3", "justj4nn3", "justj4nne", "Janne", "J4nne", "Jann3", "jann3", "j4nne", "janne"];

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -383,28 +383,49 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
   <span
     tabindex="0"
   >
-    <span
-      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+    <form
+      class="_root_19upo_16"
     >
-      <input
-        aria-label="Select all"
-        aria-labelledby=":r3s:"
-        data-testid="device-select-all-checkbox"
-        id="device-select-all-checkbox"
-        type="checkbox"
-      />
-      <label
-        for="device-select-all-checkbox"
+      <div
+        class="_inline-field_19upo_32"
       >
         <div
-          class="mx_Checkbox_background"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            class="mx_Checkbox_checkmark"
-          />
+            class="_container_1hel1_10"
+          >
+            <input
+              aria-label="Select all"
+              aria-labelledby=":r4q:"
+              class="_input_1hel1_18"
+              data-testid="device-select-all-checkbox"
+              id="device-select-all-checkbox"
+              type="checkbox"
+            />
+            <div
+              class="_ui_1hel1_19"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
-      </label>
-    </span>
+        <div
+          class="_inline-field-body_19upo_38"
+        />
+      </div>
+    </form>
   </span>
   <span
     class="mx_FilteredDeviceListHeader_label"

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -38,30 +38,53 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
             <div
               class="mx_SettingsSubsection_content"
             >
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  checked=""
-                  disabled=""
-                  id="checkbox_vY7Q4uEh9K"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_vY7Q4uEh9K"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r1:"
+                        checked=""
+                        class="_input_1hel1_18"
+                        disabled=""
+                        id="checkbox_vY7Q4uEh9K"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -73,69 +96,116 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                         />
                       </svg>
                       Home
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r1:"
                     >
                       Home is useful for getting an overview of everything.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
-                  id="checkbox_38QgU2Pomx"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_38QgU2Pomx"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r5:"
+                        class="_input_1hel1_18"
+                        data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                        id="checkbox_38QgU2Pomx"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r5:"
                     >
                       Show all your rooms in Home, even if they're in a space.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_wKpa6hpi3Y"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_wKpa6hpi3Y"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r9:"
+                        class="_input_1hel1_18"
+                        id="checkbox_wKpa6hpi3Y"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_wKpa6hpi3Y"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -147,37 +217,61 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                         />
                       </svg>
                       Favourites
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r9:"
                     >
                       Group all your favourite rooms and people in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_EetmBG4yVC"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_EetmBG4yVC"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":rd:"
+                        class="_input_1hel1_18"
+                        id="checkbox_EetmBG4yVC"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_EetmBG4yVC"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -192,69 +286,115 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                         />
                       </svg>
                       People
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":rd:"
                     >
                       Group all your people in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_eEefiPqpMR"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_eEefiPqpMR"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
-                  </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                      class="_container_1hel1_10"
                     >
-                      <div />
-                      Rooms outside of a space
+                      <input
+                        aria-describedby=":rh:"
+                        class="_input_1hel1_18"
+                        id="checkbox_eEefiPqpMR"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
                     </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_eEefiPqpMR"
+                    >
+                      Rooms outside of a space
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":rh:"
                     >
                       Group all your rooms that aren't part of a space in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_MwbPDmfGtm"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_MwbPDmfGtm"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":rl:"
+                        class="_input_1hel1_18"
+                        id="checkbox_MwbPDmfGtm"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_MwbPDmfGtm"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -266,15 +406,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                         />
                       </svg>
                       Video rooms and conferences
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":rl:"
                     >
                       Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
+                </div>
+              </form>
             </div>
           </div>
         </div>
@@ -322,30 +463,53 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
             <div
               class="mx_SettingsSubsection_content"
             >
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  checked=""
-                  disabled=""
-                  id="checkbox_vY7Q4uEh9K"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_vY7Q4uEh9K"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":rp:"
+                        checked=""
+                        class="_input_1hel1_18"
+                        disabled=""
+                        id="checkbox_vY7Q4uEh9K"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -357,69 +521,116 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                         />
                       </svg>
                       Home
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":rp:"
                     >
                       Home is useful for getting an overview of everything.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
-                  id="checkbox_38QgU2Pomx"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_38QgU2Pomx"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":rt:"
+                        class="_input_1hel1_18"
+                        data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                        id="checkbox_38QgU2Pomx"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":rt:"
                     >
                       Show all your rooms in Home, even if they're in a space.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_wKpa6hpi3Y"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_wKpa6hpi3Y"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r11:"
+                        class="_input_1hel1_18"
+                        id="checkbox_wKpa6hpi3Y"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_wKpa6hpi3Y"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -431,37 +642,61 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                         />
                       </svg>
                       Favourites
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r11:"
                     >
                       Group all your favourite rooms and people in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_EetmBG4yVC"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_EetmBG4yVC"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r15:"
+                        class="_input_1hel1_18"
+                        id="checkbox_EetmBG4yVC"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_EetmBG4yVC"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -476,69 +711,115 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                         />
                       </svg>
                       People
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r15:"
                     >
                       Group all your people in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_eEefiPqpMR"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_eEefiPqpMR"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
-                  </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                      class="_container_1hel1_10"
                     >
-                      <div />
-                      Rooms outside of a space
+                      <input
+                        aria-describedby=":r19:"
+                        class="_input_1hel1_18"
+                        id="checkbox_eEefiPqpMR"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
                     </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_eEefiPqpMR"
+                    >
+                      Rooms outside of a space
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r19:"
                     >
                       Group all your rooms that aren't part of a space in one place.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
-              <span
-                class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                </div>
+              </form>
+              <form
+                class="_root_19upo_16"
               >
-                <input
-                  id="checkbox_MwbPDmfGtm"
-                  type="checkbox"
-                />
-                <label
-                  for="checkbox_MwbPDmfGtm"
+                <div
+                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="mx_Checkbox_background"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="mx_Checkbox_checkmark"
-                    />
+                      class="_container_1hel1_10"
+                    >
+                      <input
+                        aria-describedby=":r1d:"
+                        class="_input_1hel1_18"
+                        id="checkbox_MwbPDmfGtm"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_1hel1_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                  <div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_MwbPDmfGtm"
                     >
                       <svg
+                        class="mx_SidebarUserSettingsTab_icon"
                         fill="currentColor"
                         height="1em"
                         viewBox="0 0 24 24"
@@ -550,15 +831,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                         />
                       </svg>
                       Video rooms and conferences
-                    </div>
-                    <div
-                      class="mx_SettingsSubsection_text"
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id=":r1d:"
                     >
                       Group all private video rooms and conferences.
-                    </div>
+                    </span>
                   </div>
-                </label>
-              </span>
+                </div>
+              </form>
             </div>
           </div>
         </div>