Update compound

package.json

@@ -93,7 +93,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^5.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-web": "^8.2.0",
         "@vector-im/matrix-wysiwyg": "2.38.4",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

playwright/e2e/create-room/create-room.spec.ts

@@ -1,34 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022, 2023 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 { test, expect } from "../../element-web-test";
-
-test.describe("Create Room", () => {
-    test.use({ displayName: "Jim" });
-
-    test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => {
-        const name = "Test room 1";
-        const topic = "This room is dedicated to this test and this test only!";
-
-        const dialog = await app.openCreateRoomDialog();
-        // Fill name & topic
-        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-        // Change room to public
-        await dialog.getByRole("button", { name: "Room visibility" }).click();
-        await dialog.getByRole("option", { name: "Public room" }).click();
-        // Fill room address
-        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
-        // Submit
-        await dialog.getByRole("button", { name: "Create room" }).click();
-
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
-        const header = page.locator(".mx_RoomHeader");
-        await expect(header).toContainText(name);
-    });
-});

playwright/e2e/devtools/devtools.spec.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { test, expect } from "../../element-web-test";
+
+test.describe("Devtools", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app }) => {
+        await app.client.createRoom({ name: "Test Room" });
+        await app.viewRoomByName("Test Room");
+
+        const composer = app.getComposer().locator("[contenteditable]");
+        await composer.fill("/devtools");
+        await composer.press("Enter");
+        const dialog = page.locator(".mx_Dialog");
+        await dialog.getByLabel("Developer mode").check();
+
+        await expect(dialog).toMatchScreenshot("devtools-dialog.png");
+    });
+});

playwright/e2e/devtools/upgraderoom.spec.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { SettingLevel } from "../../../src/settings/SettingLevel";
+import { test, expect } from "../../element-web-test";
+
+test.describe("Room upgrade dialog", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should render the room upgrade dialog", { tag: "@screenshot" }, async ({ page, homeserver, user, app }) => {
+        // Enable developer mode
+        await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true);
+
+        await app.client.createRoom({ name: "Test Room" });
+        await app.viewRoomByName("Test Room");
+
+        const composer = app.getComposer().locator("[contenteditable]");
+        // Pick a room version that is likely to be supported by all our target homeservers.
+        await composer.fill("/upgraderoom 5");
+        await composer.press("Enter");
+        const dialog = page.locator(".mx_Dialog");
+        await dialog.getByLabel("Automatically invite members from this room to the new one").check();
+        await expect(dialog).toMatchScreenshot("upgrade-room.png");
+    });
+});

playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { test, expect } from "../../element-web-test";
+
+test.describe("Decline and block invite dialog", function () {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test(
+        "should show decline and block dialog for a room",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot }) => {
+            await bot.createRoom({ name: "Test Room", invite: [user.userId] });
+            await app.viewRoomByName("Test Room");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png");
+        },
+    );
+});

playwright/e2e/location/location.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
@@ -57,4 +57,20 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {
 
         await expect(page.locator(".mx_Marker")).toBeVisible();
     });
+
+    test(
+        "is prompted for and can consent to live location sharing",
+        { tag: "@screenshot" },
+        async ({ page, user, app }) => {
+            await app.viewRoomById(await app.client.createRoom({}));
+
+            const composerOptions = await app.openMessageComposerOptions();
+            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+            const menu = page.locator(".mx_LocationShareMenu");
+
+            await menu.getByRole("button", { name: "My live location" }).click();
+            await menu.getByLabel("Enable live location sharing").check();
+            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
+        },
+    );
 });

playwright/e2e/room/create-room.spec.ts

@@ -0,0 +1,64 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { SettingLevel } from "../../../src/settings/SettingLevel";
+import { test, expect } from "../../element-web-test";
+
+const name = "Test room";
+const topic = "A decently explanatory topic for a test room.";
+
+test.describe("Create Room", () => {
+    test.use({ displayName: "Jim" });
+
+    test(
+        "should create a public room with name, topic & address set",
+        { tag: "@screenshot" },
+        async ({ page, user, app }) => {
+            const dialog = await app.openCreateRoomDialog();
+            // Fill name & topic
+            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+            // Change room to public
+            await dialog.getByRole("button", { name: "Room visibility" }).click();
+            await dialog.getByRole("option", { name: "Public room" }).click();
+            // Fill room address
+            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+            // Snapshot it
+            await expect(dialog).toMatchScreenshot("create-room.png");
+
+            // Submit
+            await dialog.getByRole("button", { name: "Create room" }).click();
+
+            await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+            const header = page.locator(".mx_RoomHeader");
+            await expect(header).toContainText(name);
+        },
+    );
+
+    test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
+        await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
+
+        const dialog = await app.openCreateRoomDialog("New video room");
+        // Fill name & topic
+        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+        // Change room to public
+        await dialog.getByRole("button", { name: "Room visibility" }).click();
+        await dialog.getByRole("option", { name: "Public room" }).click();
+        // Fill room address
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+        // Snapshot it
+        await expect(dialog).toMatchScreenshot("create-video-room.png");
+
+        // Submit
+        await dialog.getByRole("button", { name: "Create video room" }).click();
+
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+        const header = page.locator(".mx_RoomHeader");
+        await expect(header).toContainText(name);
+    });
+});

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

@@ -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.getByLabel("Use bundled emoji font").click();
-        await tab.getByLabel("Use a system font").click();
+        await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
+        await tab.getByRole("switch", { name: "Use a system font" }).click();
 
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');

playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { test, expect } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+test.describe("Notifications 2 tab", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true);
+        await page.setViewportSize({ width: 1024, height: 2000 });
+        const settings = await app.settings.openUserSettings("Notifications");
+        await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", {
+            // Mask the mxid.
+            mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")],
+        });
+    });
+});

playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts

@@ -0,0 +1,22 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { test, expect } from "../../../element-web-test";
+
+test.describe("Notifications tab", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await page.setViewportSize({ width: 1024, height: 1400 });
+        const settings = await app.settings.openUserSettings("Notifications");
+        await settings.getByLabel("Enable notifications for this account").check();
+        await settings.getByLabel("Enable notifications for this session").check();
+        await expect(settings).toMatchScreenshot("standard-notification-settings.png");
+    });
+});

playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts

@@ -8,7 +8,7 @@
 
 import { type Locator } from "@playwright/test";
 
-import { test, expect } from "../../element-web-test";
+import { test, expect } from "../../../element-web-test";
 
 test.describe("Roles & Permissions room settings tab", () => {
     const roomName = "Test room";

playwright/e2e/settings/room-settings/room-security-tab.spec.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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 { type Locator } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Roles & Permissions room settings tab", () => {
+    const roomName = "Test room";
+
+    test.use({
+        displayName: "Alice",
+    });
+
+    let settings: Locator;
+
+    test.beforeEach(async ({ user, app }) => {
+        await app.client.createRoom({ name: roomName });
+        await app.viewRoomByName(roomName);
+        settings = await app.settings.openRoomSettings("Security & Privacy");
+    });
+
+    test("should be able to toggle on encryption in a room", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        await page.setViewportSize({ width: 1024, height: 1400 });
+        const encryptedToggle = settings.getByLabel("Encrypted");
+        await encryptedToggle.click();
+
+        // Accept the dialog.
+        await page.getByRole("button", { name: "Ok " }).click();
+
+        await expect(encryptedToggle).toBeChecked();
+        await expect(encryptedToggle).toBeDisabled();
+
+        await settings.getByLabel("Only send messages to verified users.").check();
+        await expect(settings).toMatchScreenshot("room-security-settings.png");
+    });
+});

playwright/e2e/settings/room-settings/room-video-tab.spec.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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 { type Locator } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+test.describe("Voice & Video room settings tab", () => {
+    const roomName = "Test room";
+
+    test.use({
+        displayName: "Alice",
+    });
+
+    let settings: Locator;
+
+    test.beforeEach(async ({ user, app, page }) => {
+        // Execute client actions before setting, as the setting will force a reload.
+        await app.client.createRoom({ name: roomName });
+        await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true);
+        await app.viewRoomByName(roomName);
+        settings = await app.settings.openRoomSettings("Voice & Video");
+    });
+
+    test(
+        "should be able to toggle on Element Call in the room",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room");
+            await callToggle.check();
+            await expect(settings).toMatchScreenshot("room-video-settings.png");
+        },
+    );
+});

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

@@ -41,6 +41,18 @@ test.describe("Security user settings tab", () => {
             });
         });
 
+        test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const tab = await app.settings.openUserSettings("Security");
+            await expect(tab).toMatchScreenshot("security-settings-tab.png", {
+                mask: [
+                    // Contains IM name.
+                    tab.locator("#mx_SetIntegrationManager_BodyText"),
+                    tab.locator("#mx_SetIntegrationManager_ManagerName"),
+                ],
+            });
+        });
+
         test("should be able to set an ID server", async ({ app, context, user, page }) => {
             const tab = await app.settings.openUserSettings("Security");
 

playwright/e2e/spaces/spaces.spec.ts

@@ -369,4 +369,16 @@ test.describe("Spaces", () => {
         await app.viewSpaceByName("Root Space");
         await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
     });
+
+    test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
+        await app.client.createSpace({
+            name: "My Space",
+        });
+        await app.viewSpaceByName("My space");
+        await page.getByLabel("Settings", { exact: true }).click();
+        await app.settings.switchTab("Visibility");
+        await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot(
+            "space-visibility-settings.png",
+        );
+    });
 });

playwright/e2e/widgets/permissions-dialog.spec.ts

@@ -0,0 +1,95 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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 { test, expect } from "../../element-web-test";
+
+const DEMO_WIDGET_ID = "demo-widget-id";
+const DEMO_WIDGET_NAME = "Demo Widget";
+const DEMO_WIDGET_TYPE = "demo";
+const ROOM_NAME = "Demo";
+
+const DEMO_WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Demo Widget</title>
+            <script>
+                let sendEventCount = 0
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: [
+                                    "org.matrix.msc2762.timeline:*",
+                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
+                                    "org.matrix.msc2762.send.event:net.widget_echo"
+                                ]
+                            },
+                        }, ev.data), '*');
+                    }
+                };
+            </script>
+        </head>
+    </html>
+`;
+
+test.describe("Widger permissions dialog", () => {
+    test.use({
+        displayName: "Mike",
+    });
+
+    let demoWidgetUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
+    });
+
+    test(
+        "should be updated if user is re-invited into the room with updated state event",
+        { tag: "@screenshot" },
+        async ({ page, app, user }) => {
+            const roomId = await app.client.createRoom({
+                name: ROOM_NAME,
+            });
+
+            // setup widget via state event
+            await app.client.sendStateEvent(
+                roomId,
+                "im.vector.modular.widgets",
+                {
+                    id: DEMO_WIDGET_ID,
+                    creatorUserId: "somebody",
+                    type: DEMO_WIDGET_TYPE,
+                    name: DEMO_WIDGET_NAME,
+                    url: demoWidgetUrl,
+                },
+                DEMO_WIDGET_ID,
+            );
+
+            // set initial layout
+            await app.client.sendStateEvent(
+                roomId,
+                "io.element.widgets.layout",
+                {
+                    widgets: {
+                        [DEMO_WIDGET_ID]: {
+                            container: "top",
+                            index: 1,
+                            width: 100,
+                            height: 0,
+                        },
+                    },
+                },
+                "",
+            );
+
+            // open the room
+            await app.viewRoomByName(ROOM_NAME);
+            await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
+                "widget-capabilites-prompt.png",
+            );
+        },
+    );
+});

playwright/pages/ElementAppPage.ts

@@ -51,9 +51,9 @@ export class ElementAppPage {
     /**
      * Open room creation dialog.
      */
-    public async openCreateRoomDialog(): Promise<Locator> {
+    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
         await this.page.getByRole("button", { name: "Add room", exact: true }).click();
-        await this.page.getByRole("menuitem", { name: "New room", exact: true }).click();
+        await this.page.getByRole("menuitem", { name: roomKindname, exact: true }).click();
         return this.page.locator(".mx_CreateRoomDialog");
     }
 

playwright/pages/settings.ts

@@ -43,7 +43,7 @@ export class Settings {
      * @param {*} value The new value of the setting, may be null.
      * @return {Promise} Resolves when the setting has been changed.
      */
-    public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise<void> {
         return this.page.evaluate<
             Promise<void>,
             {

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

@@ -77,10 +77,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_SettingsTab_toggleWithDescription {
-    margin-top: $spacing-24;
-}
-
 .mx_SettingsTab_sections {
     display: grid;
     grid-template-columns: 1fr;

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

@@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
     width: 256px;
-    /* matches checkbox box + padding to align with checkbox label */
-    margin-inline-start: calc($font-16px + 10px);
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
 }

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -7,8 +7,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ChangeEvent, createRef, type KeyboardEvent, type SyntheticEvent } from "react";
+import React, {
+    type JSX,
+    type ChangeEvent,
+    createRef,
+    type KeyboardEvent,
+    type SyntheticEvent,
+    type ChangeEventHandler,
+} from "react";
 import { type Room, RoomType, JoinRule, Preset, Visibility } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import SdkConfig from "../../../SdkConfig";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
@@ -17,7 +25,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { checkUserIsAllowedToChangeEncryption, type IOpts } from "../../../createRoom";
 import Field from "../elements/Field";
 import RoomAliasField from "../elements/RoomAliasField";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
 import JoinRuleDropdown from "../elements/JoinRuleDropdown";
@@ -25,7 +32,6 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import SettingsStore from "../../../settings/SettingsStore";
-import LabelledCheckbox from "../elements/LabelledCheckbox";
 
 interface IProps {
     type?: RoomType;
@@ -219,8 +225,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         this.setState({ joinRule });
     };
 
-    private onEncryptedChange = (isEncrypted: boolean): void => {
-        this.setState({ isEncrypted });
+    private onEncryptedChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ isEncrypted: evt.target.checked });
     };
 
     private onAliasChange = (alias: string): void => {
@@ -231,8 +237,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
     };
 
-    private onNoFederateChange = (noFederate: boolean): void => {
-        this.setState({ noFederate });
+    private onNoFederateChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ noFederate: evt.target.checked });
     };
 
     private onNameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
@@ -241,8 +247,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         return result;
     };
 
-    private onIsPublicKnockRoomChange = (isPublicKnockRoom: boolean): void => {
-        this.setState({ isPublicKnockRoom });
+    private onIsPublicKnockRoomChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ isPublicKnockRoom: evt.target.checked });
     };
 
     private static validateRoomName = withValidation({
@@ -329,11 +335,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         let visibilitySection: JSX.Element | undefined;
         if (this.state.joinRule === JoinRule.Knock) {
             visibilitySection = (
-                <LabelledCheckbox
+                <SettingsToggleInput
+                    name="publish-room"
                     className="mx_CreateRoomDialog_labelledCheckbox"
                     label={_t("room_settings|security|publish_room")}
                     onChange={this.onIsPublicKnockRoomChange}
-                    value={this.state.isPublicKnockRoom}
+                    checked={this.state.isPublicKnockRoom}
                 />
             );
         }
@@ -354,11 +361,11 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             }
             e2eeSection = (
                 <React.Fragment>
-                    <LabelledToggleSwitch
+                    <SettingsToggleInput
+                        name="encryption-toggle"
                         label={_t("create_room|encryption_label")}
                         onChange={this.onEncryptedChange}
-                        value={this.state.isEncrypted}
-                        className="mx_CreateRoomDialog_e2eSwitch" // for end-to-end tests
+                        checked={this.state.isEncrypted}
                         disabled={!this.state.canChangeEncryption}
                     />
                     <p>{microcopy}</p>
@@ -392,7 +399,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                 title={title}
                 screenName="CreateRoom"
             >
-                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
+                <Form.Root onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field
                             ref={this.nameField}
@@ -431,17 +438,18 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             <summary className="mx_CreateRoomDialog_details_summary">
                                 {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")}
                             </summary>
-                            <LabelledToggleSwitch
+                            <SettingsToggleInput
+                                name="unfederated"
                                 label={_t("create_room|unfederated", {
                                     serverName: MatrixClientPeg.safeGet().getDomain(),
                                 })}
                                 onChange={this.onNoFederateChange}
-                                value={this.state.noFederate}
+                                checked={this.state.noFederate}
+                                helpMessage={federateLabel}
                             />
-                            <p>{federateLabel}</p>
                         </details>
                     </div>
-                </form>
+                </Form.Root>
                 <DialogButtons
                     primaryButton={
                         isVideoRoom ? _t("create_room|action_create_video_room") : _t("create_room|action_create_room")

src/components/views/dialogs/DeclineAndBlockInviteDialog.tsx

@@ -6,12 +6,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEventHandler, useCallback, useState } from "react";
-import { Field, Label, Root } from "@vector-im/compound-web";
+import { Field, Label, Root, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 
 interface IProps {
     onFinished: (shouldReject: boolean, ignoreUser: boolean, reportRoom: false | string) => void;
@@ -22,6 +21,14 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent<IProps> = ({ o
     const [shouldReport, setShouldReport] = useState<boolean>(false);
     const [ignoreUser, setIgnoreUser] = useState<boolean>(false);
 
+    const onShouldReportChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setShouldReport(e.target.checked),
+        [setShouldReport],
+    );
+    const onIgnoreUserChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setIgnoreUser(e.target.checked),
+        [setIgnoreUser],
+    );
     const [reportReason, setReportReason] = useState<string>("");
     const reportReasonChanged = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
         (e) => setReportReason(e.target.value),
@@ -43,17 +50,19 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent<IProps> = ({ o
         >
             <Root>
                 <p>{_t("decline_invitation_dialog|confirm", { roomName })}</p>
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="ignore-user"
                     label={_t("report_content|ignore_user")}
-                    onChange={setIgnoreUser}
-                    caption={_t("decline_invitation_dialog|ignore_user_help")}
-                    value={ignoreUser}
+                    onChange={onIgnoreUserChanged}
+                    helpMessage={_t("decline_invitation_dialog|ignore_user_help")}
+                    checked={ignoreUser}
                 />
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="report-room"
                     label={_t("action|report_room")}
-                    onChange={setShouldReport}
-                    caption={_t("decline_invitation_dialog|report_room_description")}
-                    value={shouldReport}
+                    onChange={onShouldReportChanged}
+                    helpMessage={_t("decline_invitation_dialog|report_room_description")}
+                    checked={shouldReport}
                 />
                 <Field name="report-reason" aria-disabled={!shouldReport}>
                     <Label htmlFor="mx_DeclineAndBlockInviteDialog_reason">

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useState } from "react";
+import { Form } from "@vector-im/compound-web";
 
 import { _t, _td, type TranslationKey } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -97,13 +98,18 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                         })}
                     </div>
                 ))}
-                <div>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
                     <h3>{_t("common|options")}</h3>
                     <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                     <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
                     <SettingsField settingKey="Developer.elementCallUrl" level={SettingLevel.DEVICE} />
-                </div>
+                </Form.Root>
             </BaseTool>
         );
     }

src/components/views/dialogs/ReportRoomDialog.tsx

@@ -6,7 +6,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, type ChangeEventHandler, useCallback, useState } from "react";
-import { Root, Field, Label, InlineSpinner, ErrorMessage, HelpMessage } from "@vector-im/compound-web";
+import {
+    Root,
+    Field,
+    Label,
+    InlineSpinner,
+    ErrorMessage,
+    HelpMessage,
+    SettingsToggleInput,
+} from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
@@ -14,7 +22,6 @@ import Markdown from "../../../Markdown";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 
 interface IProps {
     roomId: string;
@@ -33,6 +40,10 @@ export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished
     const client = MatrixClientPeg.safeGet();
 
     const onReasonChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>((e) => setReason(e.target.value), []);
+    const onLeaveRoomChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setLeaveRoom(e.target.checked),
+        [setLeaveRoom],
+    );
     const onCancel = useCallback(() => onFinished(false), [onFinished]);
     const onSubmit = useCallback(async () => {
         setBusy(true);
@@ -78,10 +89,11 @@ export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished
                 </Field>
                 {adminMessage}
                 {busy ? <InlineSpinner /> : null}
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="leave-room"
                     label={_t("room_list|more_options|leave_room")}
-                    value={leaveRoom}
-                    onChange={setLeaveRoom}
+                    checked={leaveRoom}
+                    onChange={onLeaveRoomChanged}
                 />
                 <DialogButtons
                     primaryButton={_t("action|send_report")}

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactNode, type SyntheticEvent } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode, type SyntheticEvent } from "react";
 import { EventType, JoinRule } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import BugReportDialog from "./BugReportDialog";
@@ -87,8 +87,8 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         this.props.onFinished({ continue: false, invite: false });
     };
 
-    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean): void => {
-        this.setState({ inviteUsersToNewRoom });
+    private onInviteUsersToggle: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ inviteUsersToNewRoom: evt.target.checked });
     };
 
     private openBugReportDialog = (e: SyntheticEvent): void => {
@@ -104,11 +104,19 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         let inviteToggle: JSX.Element | undefined;
         if (this.isInviteOrKnockRoom) {
             inviteToggle = (
-                <LabelledToggleSwitch
-                    value={this.state.inviteUsersToNewRoom}
-                    onChange={this.onInviteUsersToggle}
-                    label={_t("room_settings|advanced|upgrade_warning_dialog_invite_label")}
-                />
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsToggleInput
+                        name="room-upgrade-warning"
+                        checked={this.state.inviteUsersToNewRoom}
+                        onChange={this.onInviteUsersToggle}
+                        label={_t("room_settings|advanced|upgrade_warning_dialog_invite_label")}
+                    />
+                </Form.Root>
             );
         }
 

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import {
     type Capability,
     isTimelineCapability,
@@ -15,13 +15,13 @@ import {
     type WidgetKind,
 } from "matrix-widget-api";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import BaseDialog from "./BaseDialog";
 import { _t } from "../../../languageHandler";
 import { objectShallowClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import DialogButtons from "../elements/DialogButtons";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
 
 interface IProps {
@@ -64,8 +64,8 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         this.setState({ booleanStates: newStates });
     };
 
-    private onRememberSelectionChange = (newVal: boolean): void => {
-        this.setState({ rememberSelection: newVal });
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ rememberSelection: evt.target.checked });
     };
 
     private onSubmit = async (): Promise<void> => {
@@ -116,7 +116,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
                 onFinished={this.props.onFinished}
                 title={_t("widget|capabilities_dialog|title")}
             >
-                <form onSubmit={this.onSubmit}>
+                <Form.Root onSubmit={this.onSubmit}>
                     <div className="mx_Dialog_content">
                         <div className="text-muted">{_t("widget|capabilities_dialog|content_starting_text")}</div>
                         {checkboxRows}
@@ -126,16 +126,16 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
                             onPrimaryButtonClick={this.onSubmit}
                             onCancel={this.onReject}
                             additive={
-                                <LabelledToggleSwitch
-                                    value={this.state.rememberSelection}
-                                    toggleInFront={true}
+                                <SettingsToggleInput
+                                    name="remember-selection"
+                                    checked={this.state.rememberSelection}
                                     onChange={this.onRememberSelectionChange}
                                     label={_t("widget|capabilities_dialog|remember_Selection")}
                                 />
                             }
                         />
                     </div>
-                </form>
+                </Form.Root>
             </BaseDialog>
         );
     }

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx

@@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import { type Widget, type WidgetKind } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
@@ -61,8 +61,8 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
         this.props.onFinished(allowed);
     }
 
-    private onRememberSelectionChange = (newVal: boolean): void => {
-        this.setState({ rememberSelection: newVal });
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ rememberSelection: evt.target.checked });
     };
 
     public render(): React.ReactNode {
@@ -85,12 +85,19 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
                     onPrimaryButtonClick={this.onAllow}
                     onCancel={this.onDeny}
                     additive={
-                        <LabelledToggleSwitch
-                            value={this.state.rememberSelection}
-                            toggleInFront={true}
-                            onChange={this.onRememberSelectionChange}
-                            label={_t("widget|open_id_permissions_dialog|remember_selection")}
-                        />
+                        <Form.Root
+                            onSubmit={(evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                            }}
+                        >
+                            <SettingsToggleInput
+                                name="remember-selection"
+                                checked={this.state.rememberSelection}
+                                onChange={this.onRememberSelectionChange}
+                                label={_t("widget|open_id_permissions_dialog|remember_selection")}
+                            />
+                        </Form.Root>
                     }
                 />
             </BaseDialog>

src/components/views/elements/LabelledCheckbox.tsx

@@ -24,11 +24,13 @@ interface IProps {
     onChange(checked: boolean): void;
     // Optional additional CSS class to apply to the label
     className?: string;
+    // The id for the checkbox
+    id?: string;
 }
 
-const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className }) => {
+const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className, id }) => {
     return (
-        <div className={classnames("mx_LabelledCheckbox", className)}>
+        <div id={id} className={classnames("mx_LabelledCheckbox", className)}>
             <StyledCheckbox
                 description={byline}
                 disabled={disabled}

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -1,83 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019-2022 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 FC, useId } from "react";
-import classNames from "classnames";
-
-import ToggleSwitch from "./ToggleSwitch";
-import { Caption } from "../typography/Caption";
-
-interface IProps {
-    // The value for the toggle switch
-    "value": boolean;
-    // The translated label for the switch
-    "label": string;
-    // The translated caption for the switch
-    "caption"?: string;
-    // Tooltip to display
-    "tooltip"?: string;
-    // Whether or not to disable the toggle switch
-    "disabled"?: boolean;
-    // True to put the toggle in front of the label
-    // Default false.
-    "toggleInFront"?: boolean;
-    // Additional class names to append to the switch. Optional.
-    "className"?: string;
-    // The function to call when the value changes
-    onChange(checked: boolean): void;
-
-    "data-testid"?: string;
-}
-
-const LabelledToggleSwitch: FC<IProps> = ({
-    label,
-    caption,
-    value,
-    disabled,
-    onChange,
-    tooltip,
-    toggleInFront,
-    className,
-    "data-testid": testId,
-}) => {
-    // This is a minimal version of a SettingsFlag
-    const generatedId = useId();
-    const id = `mx_LabelledToggleSwitch_${generatedId}`;
-    let firstPart = (
-        <span className="mx_SettingsFlag_label">
-            <div id={id}>{label}</div>
-            {caption && <Caption id={`${id}_caption`}>{caption}</Caption>}
-        </span>
-    );
-    let secondPart = (
-        <ToggleSwitch
-            checked={value}
-            disabled={disabled}
-            onChange={onChange}
-            tooltip={tooltip}
-            aria-labelledby={id}
-            aria-describedby={caption ? `${id}_caption` : undefined}
-        />
-    );
-
-    if (toggleInFront) {
-        [firstPart, secondPart] = [secondPart, firstPart];
-    }
-
-    const classes = classNames("mx_SettingsFlag", className, {
-        mx_SettingsFlag_toggleInFront: toggleInFront,
-    });
-    return (
-        <div data-testid={testId} className={classes}>
-            {firstPart}
-            {secondPart}
-        </div>
-    );
-};
-
-export default LabelledToggleSwitch;

src/components/views/elements/SettingsFlag.tsx

@@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ChangeEvent } from "react";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { SettingsToggleInput } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import ToggleSwitch from "./ToggleSwitch";
-import StyledCheckbox from "./StyledCheckbox";
 import { type SettingLevel } from "../../../settings/SettingLevel";
 import { type BooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";
 
@@ -24,8 +24,6 @@ interface IProps {
     roomId?: string; // for per-room settings
     label?: string;
     isExplicit?: boolean;
-    // XXX: once design replaces all toggles make this the default
-    useCheckbox?: boolean;
     hideIfCannotSet?: boolean;
     onChange?(checked: boolean): void;
 }
@@ -74,14 +72,16 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         });
     };
 
-    private onChange = async (checked: boolean): Promise<void> => {
-        await this.save(checked);
-        this.setState({ value: checked });
-        this.props.onChange?.(checked);
-    };
-
-    private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        this.onChange(e.target.checked);
+    private onChange = async (evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
+        const newValue = evt.target.checked;
+        try {
+            await this.save(newValue);
+        } catch (ex) {
+            logger.info(`Failed to save setting ${this.props.name}`, ex);
+            return;
+        }
+        this.setState({ value: newValue });
+        this.props.onChange?.(newValue);
     };
 
     private save = async (val?: boolean): Promise<void> => {
@@ -101,45 +101,37 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         const label = this.props.label ?? SettingsStore.getDisplayName(this.props.name, this.props.level);
         const description = SettingsStore.getDescription(this.props.name);
         const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);
-
-        if (this.props.useCheckbox) {
-            return (
-                <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={disabled}>
-                    {label}
-                </StyledCheckbox>
-            );
-        } else {
-            return (
-                <div className="mx_SettingsFlag">
-                    <label className="mx_SettingsFlag_label" htmlFor={this.id}>
-                        <span className="mx_SettingsFlag_labelText">{label}</span>
-                        {description && (
-                            <div className="mx_SettingsFlag_microcopy">
-                                {shouldWarn
-                                    ? _t(
-                                          "settings|warning",
-                                          {},
-                                          {
-                                              w: (sub) => (
-                                                  <span className="mx_SettingsTab_microcopy_warning">{sub}</span>
-                                              ),
-                                              description,
-                                          },
-                                      )
-                                    : description}
-                            </div>
-                        )}
-                    </label>
-                    <ToggleSwitch
-                        id={this.id}
-                        checked={this.state.value}
-                        onChange={this.onChange}
-                        disabled={disabled}
-                        tooltip={disabled ? SettingsStore.disabledMessage(this.props.name) : undefined}
-                        title={label ?? undefined}
-                    />
-                </div>
+        const helpMessage = shouldWarn
+            ? _t(
+                  "settings|warning",
+                  {},
+                  {
+                      w: (sub) => <span className="mx_SettingsTab_microcopy_warning">{sub}</span>,
+                      description,
+                  },
+              )
+            : description;
+        if (this.props.name === "sendReadReceipts") {
+            console.log(
+                "Fully disabled",
+                this.props.name,
+                SettingsStore.disabledMessage(this.props.name),
+                description,
+                helpMessage,
             );
         }
+        const disabledMessage = SettingsStore.disabledMessage(this.props.name);
+        return (
+            <SettingsToggleInput
+                id={this.id}
+                checked={this.state.value}
+                onChange={disabledMessage ? undefined : this.onChange}
+                name={this.props.name}
+                disabled={disabled}
+                label={label ?? this.props.name}
+                helpMessage={helpMessage as string}
+                disabledMessage={disabledMessage}
+            />
+        );
     }
 }

src/components/views/location/EnableLiveShare.tsx

@@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useState } from "react";
+import React, { type ChangeEventHandler, type FormEventHandler, useCallback, useState } from "react";
+import { SettingsToggleInput, Form, Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon";
-import AccessibleButton from "../elements/AccessibleButton";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import Heading from "../typography/Heading";
 
 interface Props {
@@ -20,6 +19,25 @@ interface Props {
 
 export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
     const [isEnabled, setEnabled] = useState(false);
+
+    const onEnabledChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setEnabled(e.target.checked),
+        [setEnabled],
+    );
+
+    const onSubmitForm = useCallback<FormEventHandler>(
+        (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (isEnabled) {
+                onSubmit();
+            }
+        },
+        [isEnabled, onSubmit],
+    );
+
+    console.log("EnableLiveShare", isEnabled);
+
     return (
         <div data-testid="location-picker-enable-live-share" className="mx_EnableLiveShare">
             <StyledLiveBeaconIcon className="mx_EnableLiveShare_icon" />
@@ -27,22 +45,17 @@ export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
                 {_t("location_sharing|live_enable_heading")}
             </Heading>
             <p className="mx_EnableLiveShare_description">{_t("location_sharing|live_enable_description")}</p>
-            <LabelledToggleSwitch
-                data-testid="enable-live-share-toggle"
-                value={isEnabled}
-                onChange={setEnabled}
-                label={_t("location_sharing|live_toggle_label")}
-            />
-            <AccessibleButton
-                data-testid="enable-live-share-submit"
-                className="mx_EnableLiveShare_button"
-                element="button"
-                kind="primary"
-                onClick={onSubmit}
-                disabled={!isEnabled}
-            >
-                {_t("action|ok")}
-            </AccessibleButton>
+            <Form.Root onSubmit={onSubmitForm}>
+                <SettingsToggleInput
+                    name="enable-live-share-toggle"
+                    checked={isEnabled}
+                    onChange={onEnabledChanged}
+                    label={_t("location_sharing|live_toggle_label")}
+                />
+                <Button className="mx_EnableLiveShare_button" kind="primary" disabled={!isEnabled}>
+                    {_t("action|ok")}
+                </Button>
+            </Form.Root>
         </div>
     );
 };

src/components/views/room_settings/RoomPublishSetting.tsx

@@ -6,10 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import { JoinRule, Visibility } from "matrix-js-sdk/src/matrix";
+import { SettingsToggleInput } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";
 
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import DirectoryCustomisations from "../../../customisations/Directory";
@@ -24,6 +25,7 @@ interface IProps {
 
 interface IState {
     isRoomPublished: boolean;
+    busy: boolean;
 }
 
 export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
@@ -32,6 +34,7 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
 
         this.state = {
             isRoomPublished: false,
+            busy: false,
         };
     }
 
@@ -42,19 +45,23 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
         });
     }
 
-    private onRoomPublishChange = (): void => {
-        const valueBefore = this.state.isRoomPublished;
-        const newValue = !valueBefore;
-        this.setState({ isRoomPublished: newValue });
+    private onRoomPublishChange: ChangeEventHandler<HTMLInputElement> = async (evt): Promise<void> => {
+        const newValue = evt.target.checked;
+        this.setState({ busy: true });
         const client = MatrixClientPeg.safeGet();
 
-        client
-            .setRoomDirectoryVisibility(this.props.roomId, newValue ? Visibility.Public : Visibility.Private)
-            .catch(() => {
-                this.showError();
-                // Roll back the local echo on the change
-                this.setState({ isRoomPublished: valueBefore });
-            });
+        try {
+            await client.setRoomDirectoryVisibility(
+                this.props.roomId,
+                newValue ? Visibility.Public : Visibility.Private,
+            );
+            this.setState({ isRoomPublished: newValue });
+        } catch (ex) {
+            logger.error("Error while setting room directory visibility", ex);
+            this.showError();
+        } finally {
+            this.setState({ busy: false });
+        }
     };
 
     public componentDidMount(): void {
@@ -69,17 +76,26 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
 
         const room = client.getRoom(this.props.roomId);
         const isRoomPublishable = room && room.getJoinRule() !== JoinRule.Invite;
+        const canSetCanonicalAlias =
+            DirectoryCustomisations.requireCanonicalAliasAccessToPublish?.() === false ||
+            this.props.canSetCanonicalAlias;
 
-        const enabled =
-            (DirectoryCustomisations.requireCanonicalAliasAccessToPublish?.() === false ||
-                this.props.canSetCanonicalAlias) &&
-            (isRoomPublishable || this.state.isRoomPublished);
+        let disabledMessage;
+        if (!isRoomPublishable) {
+            disabledMessage = _t("room_settings|general|publish_warn_invite_only");
+        } else if (!canSetCanonicalAlias) {
+            disabledMessage = _t("room_settings|general|publish_warn_no_canonical_permission");
+        }
+
+        const enabled = canSetCanonicalAlias && (isRoomPublishable || this.state.isRoomPublished);
 
         return (
-            <LabelledToggleSwitch
-                value={this.state.isRoomPublished}
+            <SettingsToggleInput
+                name="room-publish"
+                checked={this.state.isRoomPublished}
                 onChange={this.onRoomPublishChange}
-                disabled={!enabled}
+                disabled={!enabled || this.state.busy}
+                disabledMessage={disabledMessage}
                 label={_t("room_settings|general|publish_toggle", {
                     domain: client.getDomain(),
                 })}

src/components/views/settings/Notifications.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEvent, type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import {
     type IAnnotatedPushRule,
     type IPusher,
@@ -19,6 +19,7 @@ import {
     type EmptyObject,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import Spinner from "../elements/Spinner";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -31,7 +32,6 @@ import {
     type VectorPushRuleDefinition,
 } from "../../../notifications";
 import { _t, type TranslatedString } from "../../../languageHandler";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import SettingsStore from "../../../settings/SettingsStore";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import { SettingLevel } from "../../../settings/SettingLevel";
@@ -122,9 +122,6 @@ interface IState {
     threepids?: IThreepid[];
 
     deviceNotificationsEnabled: boolean;
-    desktopNotifications: boolean;
-    desktopShowBody: boolean;
-    audioNotifications: boolean;
 
     clearingNotifications: boolean;
 
@@ -194,10 +191,15 @@ const maximumVectorState = (
 
 const NotificationActivitySettings = (): JSX.Element => {
     return (
-        <div>
+        <Form.Root
+            onSubmit={(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }}
+        >
             <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
             <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
-        </div>
+        </Form.Root>
     );
 };
 
@@ -213,9 +215,6 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         this.state = {
             phase: Phase.Loading,
             deviceNotificationsEnabled: SettingsStore.getValue("deviceNotificationsEnabled") ?? true,
-            desktopNotifications: SettingsStore.getValue("notificationsEnabled"),
-            desktopShowBody: SettingsStore.getValue("notificationBodyEnabled"),
-            audioNotifications: SettingsStore.getValue("audioNotificationsEnabled"),
             clearingNotifications: false,
             ruleIdsWithError: {},
         };
@@ -231,18 +230,9 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
     public componentDidMount(): void {
         this.settingWatchers = [
-            SettingsStore.watchSetting("notificationsEnabled", null, (...[, , , , value]) =>
-                this.setState({ desktopNotifications: value as boolean }),
-            ),
             SettingsStore.watchSetting("deviceNotificationsEnabled", null, (...[, , , , value]) => {
                 this.setState({ deviceNotificationsEnabled: value as boolean });
             }),
-            SettingsStore.watchSetting("notificationBodyEnabled", null, (...[, , , , value]) =>
-                this.setState({ desktopShowBody: value as boolean }),
-            ),
-            SettingsStore.watchSetting("audioNotificationsEnabled", null, (...[, , , , value]) =>
-                this.setState({ audioNotifications: value as boolean }),
-            ),
         ];
 
         // noinspection JSIgnoredPromiseFromCall
@@ -286,7 +276,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         const settingsEvent = cli.getAccountData(getLocalNotificationAccountDataEventType(cli.deviceId));
         if (settingsEvent) {
             const notificationsEnabled = !(settingsEvent.getContent() as LocalNotificationSettings).is_silenced;
-            await this.updateDeviceNotifications(notificationsEnabled);
+            await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, notificationsEnabled);
         }
     }
 
@@ -410,7 +400,8 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         });
     }
 
-    private onMasterRuleChanged = async (checked: boolean): Promise<void> => {
+    private onMasterRuleChanged: ChangeEventHandler<HTMLInputElement> = async (evt): Promise<void> => {
+        const { checked } = evt.target;
         this.setState({ phase: Phase.Persisting });
 
         const masterRule = this.state.masterPushRule!;
@@ -431,11 +422,8 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         }));
     };
 
-    private updateDeviceNotifications = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onEmailNotificationsChanged = async (email: string, checked: boolean): Promise<void> => {
+    private onEmailNotificationsChanged = async (email: string, evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
+        const { checked } = evt.target;
         this.setState({ phase: Phase.Persisting });
 
         try {
@@ -470,18 +458,6 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         }
     };
 
-    private onDesktopNotificationsChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onDesktopShowBodyChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onAudioNotificationsChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
     private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState): Promise<void> => {
         this.setState(({ ruleIdsWithError }) => ({
             phase: Phase.Persisting,
@@ -663,11 +639,11 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
     private renderTopSection(): JSX.Element {
         const masterSwitch = (
-            <LabelledToggleSwitch
-                data-testid="notif-master-switch"
-                value={!this.isInhibited}
+            <SettingsToggleInput
+                checked={!this.isInhibited}
+                name="notif-master-switch"
                 label={_t("settings|notifications|enable_notifications_account")}
-                caption={_t("settings|notifications|enable_notifications_account_detail")}
+                helpMessage={_t("settings|notifications|enable_notifications_account_detail")}
                 onChange={this.onMasterRuleChanged}
                 disabled={this.state.phase === Phase.Persisting}
             />
@@ -681,10 +657,10 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         const emailSwitches = (this.state.threepids || [])
             .filter((t) => t.medium === ThreepidMedium.Email)
             .map((e) => (
-                <LabelledToggleSwitch
-                    data-testid="notif-email-switch"
+                <SettingsToggleInput
+                    name="notif-email-switch"
                     key={e.address}
-                    value={!!this.state.pushers?.some((p) => p.kind === "email" && p.pushkey === e.address)}
+                    checked={!!this.state.pushers?.some((p) => p.kind === "email" && p.pushkey === e.address)}
                     label={_t("settings|notifications|enable_email_notifications", { email: e.address })}
                     onChange={this.onEmailNotificationsChanged.bind(this, e.address)}
                     disabled={this.state.phase === Phase.Persisting}
@@ -695,37 +671,13 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
             <SettingsSubsection>
                 {masterSwitch}
 
-                <LabelledToggleSwitch
-                    data-testid="notif-device-switch"
-                    value={this.state.deviceNotificationsEnabled}
-                    label={_t("settings|notifications|enable_notifications_device")}
-                    onChange={(checked) => this.updateDeviceNotifications(checked)}
-                    disabled={this.state.phase === Phase.Persisting}
-                />
+                <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
 
                 {this.state.deviceNotificationsEnabled && (
                     <>
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-notificationsEnabled"
-                            value={this.state.desktopNotifications}
-                            onChange={this.onDesktopNotificationsChanged}
-                            label={_t("settings|notifications|enable_desktop_notifications_session")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-notificationBodyEnabled"
-                            value={this.state.desktopShowBody}
-                            onChange={this.onDesktopShowBodyChanged}
-                            label={_t("settings|notifications|show_message_desktop_notification")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-audioNotificationsEnabled"
-                            value={this.state.audioNotifications}
-                            onChange={this.onAudioNotificationsChanged}
-                            label={_t("settings|notifications|enable_audible_notifications_session")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
+                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
                     </>
                 )}
 
@@ -868,7 +820,12 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
         }
 
         return (
-            <>
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
+            >
                 {this.renderTopSection()}
                 {this.renderCategory(RuleClass.VectorGlobal)}
                 {this.renderCategory(RuleClass.VectorMentions)}
@@ -876,7 +833,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
                 {this.renderTargets()}
                 <NotificationActivitySettings />
                 {clearNotifsButton}
-            </>
+            </Form.Root>
         );
     }
 }

src/components/views/settings/SetIntegrationManager.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
-import { Root, InlineField, Label, ToggleInput } from "@vector-im/compound-web";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
@@ -66,33 +66,31 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
         if (!SettingsStore.getValue(UIFeature.Widgets)) return null;
 
         return (
-            <div className="mx_SetIntegrationManager" data-testid="mx_SetIntegrationManager">
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
+                className="mx_SetIntegrationManager"
+                data-testid="mx_SetIntegrationManager"
+            >
                 <div className="mx_SettingsFlag">
                     <div className="mx_SetIntegrationManager_heading_manager">
                         <Heading size="3">{_t("integration_manager|manage_title")}</Heading>
-                        <Heading size="4">{managerName}</Heading>
+                        <Heading id="mx_SetIntegrationManager_ManagerName" size="4">
+                            {managerName}
+                        </Heading>
                     </div>
                 </div>
-                <SettingsSubsectionText>{bodyText}</SettingsSubsectionText>
+                <SettingsSubsectionText id="mx_SetIntegrationManager_BodyText">{bodyText}</SettingsSubsectionText>
                 <SettingsSubsectionText>{_t("integration_manager|explainer")}</SettingsSubsectionText>
-                <Root>
-                    <InlineField
-                        name="enable_im"
-                        control={
-                            <ToggleInput
-                                role="switch"
-                                id="mx_SetIntegrationManager_Toggle"
-                                checked={this.state.provisioningEnabled}
-                                onChange={this.onProvisioningToggled}
-                            />
-                        }
-                    >
-                        <Label htmlFor="mx_SetIntegrationManager_Toggle">
-                            {_t("integration_manager|toggle_label")}
-                        </Label>
-                    </InlineField>
-                </Root>
-            </div>
+                <SettingsToggleInput
+                    name="enable_im"
+                    label={_t("integration_manager|toggle_label")}
+                    checked={this.state.provisioningEnabled}
+                    onChange={this.onProvisioningToggled}
+                />
+            </Form.Root>
         );
     }
 }

src/components/views/settings/notifications/NotificationSettings2.tsx

@@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useState } from "react";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { useNotificationSettings } from "../../../../hooks/useNotificationSettings";
-import { useSettingValue } from "../../../../hooks/useSettings";
 import { _t } from "../../../../languageHandler";
 import {
     DefaultNotificationSettings,
@@ -19,13 +19,11 @@ import {
 } from "../../../../models/notificationsettings/NotificationSettings";
 import { RoomNotifState } from "../../../../RoomNotifs";
 import { SettingLevel } from "../../../../settings/SettingLevel";
-import SettingsStore from "../../../../settings/SettingsStore";
 import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import { clearAllNotifications } from "../../../../utils/notifications";
 import AccessibleButton from "../../elements/AccessibleButton";
 import ExternalLink from "../../elements/ExternalLink";
 import LabelledCheckbox from "../../elements/LabelledCheckbox";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 import StyledRadioGroup from "../../elements/StyledRadioGroup";
 import TagComposer from "../../elements/TagComposer";
 import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
@@ -70,10 +68,6 @@ function useHasUnreadNotifications(): boolean {
 export default function NotificationSettings2(): JSX.Element {
     const cli = useMatrixClientContext();
 
-    const desktopNotifications = useSettingValue("notificationsEnabled");
-    const desktopShowBody = useSettingValue("notificationBodyEnabled");
-    const audioNotifications = useSettingValue("audioNotificationsEnabled");
-
     const { model, hasPendingChanges, reconcile } = useNotificationSettings(cli);
 
     const disabled = model === null || hasPendingChanges;
@@ -116,267 +110,258 @@ export default function NotificationSettings2(): JSX.Element {
                 </SettingsBanner>
             )}
             <SettingsSection>
-                <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|enable_notifications_account")}
-                        value={!settings.globalMute}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                globalMute: !value,
-                            });
-                        }}
-                    />
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|enable_desktop_notifications_session")}
-                        value={desktopNotifications}
-                        onChange={(value) =>
-                            SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|desktop_notification_message_preview")}
-                        value={desktopShowBody}
-                        onChange={(value) =>
-                            SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|enable_audible_notifications_session")}
-                        value={audioNotifications}
-                        onChange={(value) =>
-                            SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                </div>
-                <SettingsSubsection
-                    heading={_t("settings|notifications|default_setting_section")}
-                    description={_t("settings|notifications|default_setting_description")}
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
                 >
-                    <StyledRadioGroup
-                        name="defaultNotificationLevel"
-                        value={toDefaultLevels(settings.defaultLevels)}
-                        disabled={disabled}
-                        definitions={NotificationOptions}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                defaultLevels: {
-                                    ...model!.defaultLevels,
-                                    dm:
-                                        value !== NotificationDefaultLevels.MentionsKeywords
-                                            ? RoomNotifState.AllMessages
-                                            : RoomNotifState.MentionsOnly,
-                                    room:
-                                        value === NotificationDefaultLevels.AllMessages
-                                            ? RoomNotifState.AllMessages
-                                            : RoomNotifState.MentionsOnly,
-                                },
-                            });
-                        }}
-                    />
-                </SettingsSubsection>
-                <SettingsSubsection
-                    heading={_t("settings|notifications|play_sound_for_section")}
-                    description={_t("settings|notifications|play_sound_for_description")}
-                >
-                    <LabelledCheckbox
-                        label={_t("common|people")}
-                        value={settings.sound.people !== undefined}
-                        disabled={disabled || settings.defaultLevels.dm === RoomNotifState.MentionsOnly}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                sound: {
-                                    ...model!.sound,
-                                    people: value ? "default" : undefined,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|mentions_keywords")}
-                        value={settings.sound.mentions !== undefined}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                sound: {
-                                    ...model!.sound,
-                                    mentions: value ? "default" : undefined,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|voip")}
-                        value={settings.sound.calls !== undefined}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                sound: {
-                                    ...model!.sound,
-                                    calls: value ? "ring" : undefined,
-                                },
-                            });
-                        }}
-                    />
-                </SettingsSubsection>
-                <SettingsSubsection heading={_t("settings|notifications|other_section")}>
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|invites")}
-                        value={settings.activity.invite}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                activity: {
-                                    ...model!.activity,
-                                    invite: value,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|room_activity")}
-                        value={settings.activity.status_event}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                activity: {
-                                    ...model!.activity,
-                                    status_event: value,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|notices")}
-                        value={settings.activity.bot_notices}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                activity: {
-                                    ...model!.activity,
-                                    bot_notices: value,
-                                },
-                            });
-                        }}
-                    />
-                </SettingsSubsection>
-                <SettingsSubsection
-                    heading={_t("settings|notifications|mentions_keywords")}
-                    description={_t(
-                        "settings|notifications|keywords",
-                        {},
-                        {
-                            badge: (
-                                <StatelessNotificationBadge
-                                    symbol="1"
-                                    count={1}
-                                    level={NotificationLevel.Notification}
-                                />
-                            ),
-                        },
-                    )}
-                >
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|notify_at_room")}
-                        value={settings.mentions.room}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                mentions: {
-                                    ...model!.mentions,
-                                    room: value,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|notify_mention", {
-                            mxid: cli.getUserId()!,
-                        })}
-                        value={settings.mentions.user}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                mentions: {
-                                    ...model!.mentions,
-                                    user: value,
-                                },
-                            });
-                        }}
-                    />
-                    <LabelledCheckbox
-                        label={_t("settings|notifications|notify_keyword")}
-                        byline={_t("settings|notifications|keywords_prompt")}
-                        value={settings.mentions.keywords}
-                        disabled={disabled}
-                        onChange={(value) => {
-                            reconcile({
-                                ...model!,
-                                mentions: {
-                                    ...model!.mentions,
-                                    keywords: value,
-                                },
-                            });
-                        }}
-                    />
-                    <TagComposer
-                        id="mx_NotificationSettings2_Keywords"
-                        tags={model?.keywords ?? []}
-                        disabled={disabled}
-                        onAdd={(keyword) => {
-                            reconcile({
-                                ...model!,
-                                keywords: [keyword, ...model!.keywords],
-                            });
-                        }}
-                        onRemove={(keyword) => {
-                            reconcile({
-                                ...model!,
-                                keywords: model!.keywords.filter((it) => it !== keyword),
-                            });
-                        }}
-                        label={_t("notifications|keyword")}
-                        placeholder={_t("notifications|keyword_new")}
-                    />
+                    <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
+                        <SettingsToggleInput
+                            name="enable_notifications_account"
+                            label={_t("settings|notifications|enable_notifications_account")}
+                            checked={!settings.globalMute}
+                            disabled={disabled}
+                            onChange={(evt) => {
+                                reconcile({
+                                    ...model!,
+                                    globalMute: !evt.target.checked,
+                                });
+                            }}
+                        />
+                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
+                    </div>
+                    <SettingsSubsection
+                        heading={_t("settings|notifications|default_setting_section")}
+                        description={_t("settings|notifications|default_setting_description")}
+                    >
+                        <StyledRadioGroup
+                            name="defaultNotificationLevel"
+                            value={toDefaultLevels(settings.defaultLevels)}
+                            disabled={disabled}
+                            definitions={NotificationOptions}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    defaultLevels: {
+                                        ...model!.defaultLevels,
+                                        dm:
+                                            value !== NotificationDefaultLevels.MentionsKeywords
+                                                ? RoomNotifState.AllMessages
+                                                : RoomNotifState.MentionsOnly,
+                                        room:
+                                            value === NotificationDefaultLevels.AllMessages
+                                                ? RoomNotifState.AllMessages
+                                                : RoomNotifState.MentionsOnly,
+                                    },
+                                });
+                            }}
+                        />
+                    </SettingsSubsection>
+                    <SettingsSubsection
+                        heading={_t("settings|notifications|play_sound_for_section")}
+                        description={_t("settings|notifications|play_sound_for_description")}
+                    >
+                        <LabelledCheckbox
+                            label={_t("common|people")}
+                            value={settings.sound.people !== undefined}
+                            disabled={disabled || settings.defaultLevels.dm === RoomNotifState.MentionsOnly}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    sound: {
+                                        ...model!.sound,
+                                        people: value ? "default" : undefined,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|mentions_keywords")}
+                            value={settings.sound.mentions !== undefined}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    sound: {
+                                        ...model!.sound,
+                                        mentions: value ? "default" : undefined,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|voip")}
+                            value={settings.sound.calls !== undefined}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    sound: {
+                                        ...model!.sound,
+                                        calls: value ? "ring" : undefined,
+                                    },
+                                });
+                            }}
+                        />
+                    </SettingsSubsection>
+                    <SettingsSubsection heading={_t("settings|notifications|other_section")}>
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|invites")}
+                            value={settings.activity.invite}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    activity: {
+                                        ...model!.activity,
+                                        invite: value,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|room_activity")}
+                            value={settings.activity.status_event}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    activity: {
+                                        ...model!.activity,
+                                        status_event: value,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|notices")}
+                            value={settings.activity.bot_notices}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    activity: {
+                                        ...model!.activity,
+                                        bot_notices: value,
+                                    },
+                                });
+                            }}
+                        />
+                    </SettingsSubsection>
+                    <SettingsSubsection
+                        heading={_t("settings|notifications|mentions_keywords")}
+                        description={_t(
+                            "settings|notifications|keywords",
+                            {},
+                            {
+                                badge: (
+                                    <StatelessNotificationBadge
+                                        symbol="1"
+                                        count={1}
+                                        level={NotificationLevel.Notification}
+                                    />
+                                ),
+                            },
+                        )}
+                    >
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|notify_at_room")}
+                            value={settings.mentions.room}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    mentions: {
+                                        ...model!.mentions,
+                                        room: value,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|notify_mention", {
+                                mxid: cli.getUserId()!,
+                            })}
+                            id="mx_NotificationSettings2_MentionCheckbox"
+                            value={settings.mentions.user}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    mentions: {
+                                        ...model!.mentions,
+                                        user: value,
+                                    },
+                                });
+                            }}
+                        />
+                        <LabelledCheckbox
+                            label={_t("settings|notifications|notify_keyword")}
+                            byline={_t("settings|notifications|keywords_prompt")}
+                            value={settings.mentions.keywords}
+                            disabled={disabled}
+                            onChange={(value) => {
+                                reconcile({
+                                    ...model!,
+                                    mentions: {
+                                        ...model!.mentions,
+                                        keywords: value,
+                                    },
+                                });
+                            }}
+                        />
+                        <TagComposer
+                            id="mx_NotificationSettings2_Keywords"
+                            tags={model?.keywords ?? []}
+                            disabled={disabled}
+                            onAdd={(keyword) => {
+                                reconcile({
+                                    ...model!,
+                                    keywords: [keyword, ...model!.keywords],
+                                });
+                            }}
+                            onRemove={(keyword) => {
+                                reconcile({
+                                    ...model!,
+                                    keywords: model!.keywords.filter((it) => it !== keyword),
+                                });
+                            }}
+                            label={_t("notifications|keyword")}
+                            placeholder={_t("notifications|keyword_new")}
+                        />
 
-                    <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
-                    <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
-                </SettingsSubsection>
-                <NotificationPusherSettings />
-                <SettingsSubsection heading={_t("settings|notifications|quick_actions_section")}>
-                    {hasUnreadNotifications && (
+                        <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
+                    </SettingsSubsection>
+                    <NotificationPusherSettings />
+                    <SettingsSubsection heading={_t("settings|notifications|quick_actions_section")}>
+                        {hasUnreadNotifications && (
+                            <AccessibleButton
+                                kind="primary_outline"
+                                disabled={updatingUnread}
+                                onClick={async () => {
+                                    setUpdatingUnread(true);
+                                    await clearAllNotifications(cli);
+                                    setUpdatingUnread(false);
+                                }}
+                            >
+                                {_t("settings|notifications|quick_actions_mark_all_read")}
+                            </AccessibleButton>
+                        )}
                         <AccessibleButton
-                            kind="primary_outline"
-                            disabled={updatingUnread}
-                            onClick={async () => {
-                                setUpdatingUnread(true);
-                                await clearAllNotifications(cli);
-                                setUpdatingUnread(false);
+                            kind="danger_outline"
+                            disabled={model === null}
+                            onClick={() => {
+                                reconcile(DefaultNotificationSettings);
                             }}
                         >
-                            {_t("settings|notifications|quick_actions_mark_all_read")}
+                            {_t("settings|notifications|quick_actions_reset")}
                         </AccessibleButton>
-                    )}
-                    <AccessibleButton
-                        kind="danger_outline"
-                        disabled={model === null}
-                        onClick={() => {
-                            reconcile(DefaultNotificationSettings);
-                        }}
-                    >
-                        {_t("settings|notifications|quick_actions_reset")}
-                    </AccessibleButton>
-                </SettingsSubsection>
+                    </SettingsSubsection>
+                </Form.Root>
             </SettingsSection>
         </div>
     );

src/components/views/settings/shared/SettingsSubsection.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React, { type HTMLAttributes } from "react";
-import { Separator } from "@vector-im/compound-web";
+import { Form, Separator } from "@vector-im/compound-web";
 
 import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
 
@@ -23,6 +23,11 @@ export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement>
      * @default true
      */
     legacy?: boolean;
+
+    /**
+     * Wrap in a Form Root component, for compatibility with compound components.
+     */
+    formWrap?: boolean;
 }
 
 export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => (
@@ -37,31 +42,48 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
     children,
     stretchContent,
     legacy = true,
+    formWrap,
     ...rest
-}) => (
-    <div
-        {...rest}
-        className={classNames("mx_SettingsSubsection", {
-            mx_SettingsSubsection_newUi: !legacy,
-        })}
-    >
-        {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
-        {!!description && (
-            <div className="mx_SettingsSubsection_description">
-                <SettingsSubsectionText>{description}</SettingsSubsectionText>
-            </div>
-        )}
-        {!!children && (
-            <div
-                className={classNames("mx_SettingsSubsection_content", {
-                    mx_SettingsSubsection_contentStretch: !!stretchContent,
-                    mx_SettingsSubsection_noHeading: !heading && !description,
-                    mx_SettingsSubsection_content_newUi: !legacy,
-                })}
+}) => {
+    const content = (
+        <div
+            {...rest}
+            className={classNames("mx_SettingsSubsection", {
+                mx_SettingsSubsection_newUi: !legacy,
+            })}
+        >
+            {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
+            {!!description && (
+                <div className="mx_SettingsSubsection_description">
+                    <SettingsSubsectionText>{description}</SettingsSubsectionText>
+                </div>
+            )}
+            {!!children && (
+                <div
+                    className={classNames("mx_SettingsSubsection_content", {
+                        mx_SettingsSubsection_contentStretch: !!stretchContent,
+                        mx_SettingsSubsection_noHeading: !heading && !description,
+                        mx_SettingsSubsection_content_newUi: !legacy,
+                    })}
+                >
+                    {children}
+                </div>
+            )}
+            {!legacy && <Separator />}
+        </div>
+    );
+
+    if (formWrap) {
+        return (
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
             >
-                {children}
-            </div>
-        )}
-        {!legacy && <Separator />}
-    </div>
-);
+                {content}
+            </Form.Root>
+        );
+    }
+    return content;
+};

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ContextType } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
@@ -78,26 +79,33 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
 
         return (
             <SettingsTab data-testid="General">
-                <SettingsSection heading={_t("common|general")}>
-                    <RoomProfileSettings roomId={room.roomId} />
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("common|general")}>
+                        <RoomProfileSettings roomId={room.roomId} />
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("room_settings|general|aliases_section")}>
-                    <AliasSettings
-                        roomId={room.roomId}
-                        canSetCanonicalAlias={canSetCanonical}
-                        canSetAliases={canSetAliases}
-                        canonicalAliasEvent={canonicalAliasEv}
-                    />
-                </SettingsSection>
+                    <SettingsSection heading={_t("room_settings|general|aliases_section")}>
+                        <AliasSettings
+                            roomId={room.roomId}
+                            canSetCanonicalAlias={canSetCanonical}
+                            canSetAliases={canSetAliases}
+                            canonicalAliasEvent={canonicalAliasEv}
+                        />
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("room_settings|general|other_section")}>
-                    {urlPreviewSettings}
-                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
-                        <MediaPreviewAccountSettings roomId={room.roomId} />
-                    </SettingsSubsection>
-                    {leaveSection}
-                </SettingsSection>
+                    <SettingsSection heading={_t("room_settings|general|other_section")}>
+                        {urlPreviewSettings}
+                        <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                            <MediaPreviewAccountSettings roomId={room.roomId} />
+                        </SettingsSubsection>
+                        {leaveSection}
+                    </SettingsSection>
+                </Form.Root>
             </SettingsTab>
         );
     }

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import {
     GuestAccess,
     HistoryVisibility,
@@ -17,11 +17,10 @@ import {
     EventType,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { InlineSpinner } from "@vector-im/compound-web";
+import { Form, InlineSpinner, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg";
 import { _t } from "../../../../../languageHandler";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
@@ -184,7 +183,8 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         });
     };
 
-    private onGuestAccessChange = (allowed: boolean): void => {
+    private onGuestAccessChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        const allowed = evt.target.checked;
         const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden;
         const beforeGuestAccess = this.state.guestAccess;
         if (beforeGuestAccess === guestAccess) return;
@@ -405,13 +405,14 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         return (
             <div className="mx_SecurityRoomSettingsTab_advancedSection">
-                <LabelledToggleSwitch
-                    value={guestAccess === GuestAccess.CanJoin}
+                <SettingsToggleInput
+                    name="guest-access"
+                    checked={guestAccess === GuestAccess.CanJoin}
                     onChange={this.onGuestAccessChange}
                     disabled={!canSetGuestAccess}
                     label={_t("room_settings|visibility|guest_access_label")}
+                    helpMessage={_t("room_settings|security|guest_access_warning")}
                 />
-                <p>{_t("room_settings|security|guest_access_warning")}</p>
             </div>
         );
     }
@@ -445,33 +446,41 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         return (
             <SettingsTab>
                 <SettingsSection heading={_t("room_settings|security|title")}>
-                    <SettingsFieldset
-                        legend={_t("settings|security|encryption_section")}
-                        description={
-                            isEncryptionForceDisabled && !isEncrypted
-                                ? undefined
-                                : _t("room_settings|security|encryption_permanent")
-                        }
+                    <Form.Root
+                        onSubmit={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                        }}
                     >
-                        {isEncryptionLoading ? (
-                            <InlineSpinner />
-                        ) : (
-                            <>
-                                <LabelledToggleSwitch
-                                    value={isEncrypted}
-                                    onChange={this.onEncryptionChange}
-                                    label={_t("common|encrypted")}
-                                    disabled={!canEnableEncryption}
-                                />
-                                {isEncryptionForceDisabled && !isEncrypted && (
-                                    <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
-                                )}
-                                {encryptionSettings}
-                            </>
-                        )}
-                    </SettingsFieldset>
-                    {this.renderJoinRule()}
-                    {historySection}
+                        <SettingsFieldset
+                            legend={_t("settings|security|encryption_section")}
+                            description={
+                                isEncryptionForceDisabled && !isEncrypted
+                                    ? undefined
+                                    : _t("room_settings|security|encryption_permanent")
+                            }
+                        >
+                            {isEncryptionLoading ? (
+                                <InlineSpinner />
+                            ) : (
+                                <>
+                                    <SettingsToggleInput
+                                        name="enable-encryption"
+                                        checked={isEncrypted}
+                                        onChange={this.onEncryptionChange}
+                                        label={_t("common|encrypted")}
+                                        disabled={!canEnableEncryption}
+                                    />
+                                    {isEncryptionForceDisabled && !isEncrypted && (
+                                        <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
+                                    )}
+                                    {encryptionSettings}
+                                </>
+                            )}
+                        </SettingsFieldset>
+                        {this.renderJoinRule()}
+                        {historySection}
+                    </Form.Root>
                 </SettingsSection>
             </SettingsTab>
         );

src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx

@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback, useMemo, useState } from "react";
+import React, { type ChangeEventHandler, useCallback, useMemo, useState } from "react";
 import { JoinRule, EventType, type RoomState, type Room } from "matrix-js-sdk/src/matrix";
 import { type RoomPowerLevelsEventContent } from "matrix-js-sdk/src/types";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
 import { ElementCall } from "../../../../../models/Call";
@@ -45,8 +45,9 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
         return content.events?.[ElementCall.MEMBER_EVENT_TYPE.name] === 0;
     });
 
-    const onChange = useCallback(
-        (enabled: boolean): void => {
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (evt): void => {
+            const enabled = evt.target.checked;
             setElementCallEnabled(enabled);
 
             // Take a copy to avoid mutating the original
@@ -73,16 +74,17 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
     const brand = SdkConfig.get("element_call").brand ?? DEFAULTS.element_call.brand;
 
     return (
-        <LabelledToggleSwitch
-            data-testid="element-call-switch"
+        <SettingsToggleInput
+            name="element-call-switch"
+            data-test-id="element-call-switch"
             label={_t("room_settings|voip|enable_element_call_label", { brand })}
-            caption={_t("room_settings|voip|enable_element_call_caption", {
+            helpMessage={_t("room_settings|voip|enable_element_call_caption", {
                 brand,
             })}
-            value={elementCallEnabled}
+            checked={elementCallEnabled}
             onChange={onChange}
             disabled={!maySend}
-            tooltip={_t("room_settings|voip|enable_element_call_no_permissions_tooltip")}
+            disabledMessage={_t("room_settings|voip|enable_element_call_no_permissions_tooltip")}
         />
     );
 };
@@ -95,9 +97,16 @@ export const VoipRoomSettingsTab: React.FC<Props> = ({ room }) => {
     return (
         <SettingsTab>
             <SettingsSection heading={_t("settings|voip|title")}>
-                <SettingsSubsection heading={_t("room_settings|voip|call_type_section")}>
-                    <ElementCallSwitch room={room} />
-                </SettingsSubsection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSubsection heading={_t("room_settings|voip|call_type_section")}>
+                        <ElementCallSwitch room={room} />
+                    </SettingsSubsection>
+                </Form.Root>
             </SettingsSection>
         </SettingsTab>
     );

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ChangeEvent, type ReactNode } from "react";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
-import SdkConfig from "../../../../../SdkConfig";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import SettingsFlag from "../../../elements/SettingsFlag";
 import Field from "../../../elements/Field";
@@ -48,7 +48,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
     private renderAdvancedSection(): ReactNode {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
-        const brand = SdkConfig.get().brand;
         const toggle = (
             <AccessibleButton
                 kind="link"
@@ -62,21 +61,18 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
         let advanced: React.ReactNode;
 
         if (this.state.showAdvanced) {
-            const tooltipContent = _t("settings|appearance|custom_font_description", { brand });
             advanced = (
                 <>
-                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
+                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} />
 
                     <SettingsFlag
                         name="useBundledEmojiFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useBundledEmojiFont: checked })}
                     />
                     <SettingsFlag
                         name="useSystemFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useSystemFont: checked })}
                     />
                     <Field
@@ -89,8 +85,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
 
                             SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
                         }}
-                        tooltipContent={tooltipContent}
-                        forceTooltipVisible={true}
                         disabled={!this.state.useSystemFont}
                         value={this.state.systemFont}
                     />
@@ -109,11 +103,18 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
         return (
             <SettingsTab data-testid="mx_AppearanceUserSettingsTab">
                 <SettingsSection>
-                    <ThemeChoicePanel />
-                    <LayoutSwitcher />
-                    <FontScalingPanel />
-                    {this.renderAdvancedSection()}
-                    <ImageSizePanel />
+                    <Form.Root
+                        onSubmit={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                        }}
+                    >
+                        <ThemeChoicePanel />
+                        <LayoutSwitcher />
+                        <FontScalingPanel />
+                        {this.renderAdvancedSection()}
+                        <ImageSizePanel />
+                    </Form.Root>
                 </SettingsSection>
             </SettingsTab>
         );

src/components/views/settings/tabs/user/InviteRulesAccountSettings.tsx

@@ -5,26 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type FC, useCallback, useState } from "react";
-import { Root } from "@vector-im/compound-web";
+import React, { type ChangeEventHandler, type FC, useCallback, useState } from "react";
+import { Root, SettingsToggleInput } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../../languageHandler";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 
 export const InviteRulesAccountSetting: FC = () => {
     const rules = useSettingValue("inviteRules");
     const settingsDisabled = SettingsStore.disabledMessage("inviteRules");
     const [busy, setBusy] = useState(false);
 
-    const onChange = useCallback(async (checked: boolean) => {
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(async (evt) => {
         try {
             setBusy(true);
             await SettingsStore.setValue("inviteRules", null, SettingLevel.ACCOUNT, {
-                allBlocked: !checked,
+                allBlocked: !evt.target.checked,
             });
         } catch (ex) {
             logger.error(`Unable to set invite rules`, ex);
@@ -33,13 +32,20 @@ export const InviteRulesAccountSetting: FC = () => {
         }
     }, []);
     return (
-        <Root className="mx_MediaPreviewAccountSetting_Form">
-            <LabelledToggleSwitch
+        <Root
+            className="mx_MediaPreviewAccountSetting_Form"
+            onSubmit={(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }}
+        >
+            <SettingsToggleInput
                 className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+                name="invite_control_blocked"
                 label={_t("settings|invite_controls|default_label")}
-                value={!rules.allBlocked}
+                checked={!rules.allBlocked}
                 onChange={onChange}
-                tooltip={settingsDisabled}
+                disabledMessage={settingsDisabled}
                 disabled={!!settingsDisabled || busy}
             />
         </Root>

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { sortBy } from "lodash";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -106,37 +107,44 @@ export default class LabsUserSettingsTab extends React.Component<EmptyObject> {
 
         return (
             <SettingsTab>
-                <SettingsSection heading={_t("labs|beta_section")}>
-                    <SettingsSubsectionText>
-                        {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
-                    </SettingsSubsectionText>
-                    {betaSection}
-                </SettingsSection>
-
-                {labsSections && (
-                    <SettingsSection heading={_t("labs|experimental_section")}>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("labs|beta_section")}>
                         <SettingsSubsectionText>
-                            {_t(
-                                "labs|experimental_description",
-                                {},
-                                {
-                                    a: (sub) => {
-                                        return (
-                                            <a
-                                                href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
-                                                rel="noreferrer noopener"
-                                                target="_blank"
-                                            >
-                                                {sub}
-                                            </a>
-                                        );
-                                    },
-                                },
-                            )}
+                            {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
                         </SettingsSubsectionText>
-                        {labsSections}
+                        {betaSection}
                     </SettingsSection>
-                )}
+
+                    {labsSections && (
+                        <SettingsSection heading={_t("labs|experimental_section")}>
+                            <SettingsSubsectionText>
+                                {_t(
+                                    "labs|experimental_description",
+                                    {},
+                                    {
+                                        a: (sub) => {
+                                            return (
+                                                <a
+                                                    href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
+                                                    rel="noreferrer noopener"
+                                                    target="_blank"
+                                                >
+                                                    {sub}
+                                                </a>
+                                            );
+                                        },
+                                    },
+                                )}
+                            </SettingsSubsectionText>
+                            {labsSections}
+                        </SettingsSection>
+                    )}
+                </Form.Root>
             </SettingsTab>
         );
     }

src/components/views/settings/tabs/user/MediaPreviewAccountSettings.tsx

@@ -6,9 +6,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEventHandler, useCallback } from "react";
-import { Field, HelpMessage, InlineField, Label, RadioInput, Root } from "@vector-im/compound-web";
+import { Field, HelpMessage, InlineField, Label, RadioInput, Root, SettingsToggleInput } from "@vector-im/compound-web";
 
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { type MediaPreviewConfig, MediaPreviewValue } from "../../../../../@types/media_preview";
 import { _t } from "../../../../../languageHandler";
 import { useSettingValue } from "../../../../../hooks/useSettings";
@@ -30,12 +29,12 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo
         [roomId],
     );
 
-    const avatarOnChange = useCallback(
-        (c: boolean) => {
+    const avatarOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (evt) => {
             changeSetting({
                 ...currentMediaPreview,
                 // Switch is inverted. "Hide avatars..."
-                invite_avatars: c ? MediaPreviewValue.Off : MediaPreviewValue.On,
+                invite_avatars: evt.target.checked ? MediaPreviewValue.Off : MediaPreviewValue.On,
             });
         },
         [changeSetting, currentMediaPreview],
@@ -83,10 +82,10 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo
     return (
         <Root className="mx_MediaPreviewAccountSetting_Form">
             {!roomId && (
-                <LabelledToggleSwitch
-                    className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+                <SettingsToggleInput
+                    name="hide_avatars"
                     label={_t("settings|media_preview|hide_avatars")}
-                    value={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
+                    checked={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
                     onChange={avatarOnChange}
                 />
             )}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { type NonEmptyArray } from "../../../../../@types/common";
 import { _t, getCurrentLanguage } from "../../../../../languageHandler";
@@ -29,7 +30,6 @@ import LanguageDropdown from "../../../elements/LanguageDropdown";
 import PlatformPeg from "../../../../../PlatformPeg";
 import { IS_MAC } from "../../../../../Keyboard";
 import SpellCheckSettings from "../../SpellCheckSettings";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as TimezoneHandler from "../../../../../TimezoneHandler";
 import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx";
 import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";
@@ -91,9 +91,9 @@ const SpellCheckSection: React.FC = () => {
         })();
     }, []);
 
-    const onSpellCheckEnabledChange = useCallback((enabled: boolean) => {
-        setSpellCheckEnabled(enabled);
-        PlatformPeg.get()?.setSpellCheckEnabled(enabled);
+    const onSpellCheckEnabledChange = useCallback<ChangeEventHandler<HTMLInputElement>>((evt) => {
+        setSpellCheckEnabled(evt.target.checked);
+        PlatformPeg.get()?.setSpellCheckEnabled(evt.target.checked);
     }, []);
 
     const onSpellCheckLanguagesChange = useCallback((languages: string[]): void => {
@@ -105,11 +105,14 @@ const SpellCheckSection: React.FC = () => {
 
     return (
         <>
-            <LabelledToggleSwitch
-                label={_t("settings|general|allow_spellcheck")}
-                value={Boolean(spellCheckEnabled)}
-                onChange={onSpellCheckEnabledChange}
-            />
+            <Form.Root>
+                <SettingsToggleInput
+                    label={_t("settings|general|allow_spellcheck")}
+                    name="spell_check"
+                    checked={Boolean(spellCheckEnabled)}
+                    onChange={onSpellCheckEnabledChange}
+                />
+            </Form.Root>
             {spellCheckEnabled && spellCheckLanguages !== undefined && !IS_MAC && (
                 <SpellCheckSettings languages={spellCheckLanguages} onLanguagesChange={onSpellCheckLanguagesChange} />
             )}
@@ -263,8 +266,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         <LanguageSection />
                         <SpellCheckSection />
                     </SettingsSubsection>
-
-                    <SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
+                    <SettingsSubsection formWrap heading={_t("settings|preferences|room_list_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                         {/* The settings is on device level where the other room list settings are on account level  */}
                         {newRoomListEnabled && (
@@ -272,12 +274,13 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         )}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|spaces")}>
+                    <SettingsSubsection formWrap heading={_t("common|spaces")}>
                         {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
                     </SettingsSubsection>
 
                     <SettingsSubsection
                         heading={_t("settings|preferences|keyboard_heading")}
+                        formWrap
                         description={_t(
                             "settings|preferences|keyboard_view_shortcuts_button",
                             {},
@@ -293,7 +296,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|time_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|time_heading")} formWrap>
                         <div className="mx_SettingsSubsection_dropdown">
                             {_t("settings|preferences|user_timezone")}
                             <Dropdown
@@ -316,38 +319,39 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                     </SettingsSubsection>
 
                     <SettingsSubsection
+                        formWrap
                         heading={_t("common|presence")}
                         description={_t("settings|preferences|presence_description")}
                     >
                         {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|composer_heading")}>
+                    <SettingsSubsection formWrap heading={_t("settings|preferences|composer_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|code_blocks_heading")}>
+                    <SettingsSubsection formWrap heading={_t("settings|preferences|code_blocks_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|media_heading")}>
+                    <SettingsSubsection formWrap heading={_t("settings|preferences|media_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|timeline")}>
+                    <SettingsSubsection formWrap heading={_t("common|timeline")}>
                         {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                    <SettingsSubsection formWrap heading={_t("common|moderation_and_safety")} legacy={false}>
                         <MediaPreviewAccountSettings />
                         <InviteRulesAccountSetting />
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>
+                    <SettingsSubsection formWrap heading={_t("settings|preferences|room_directory_heading")}>
                         {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|general")} stretchContent>
+                    <SettingsSubsection formWrap heading={_t("common|general")} stretchContent>
                         {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
 
                         <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -11,6 +11,7 @@ import { sleep } from "matrix-js-sdk/src/utils";
 import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@@ -357,13 +358,27 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
             <SettingsTab>
                 {warning}
                 <SetIntegrationManager />
-                <SettingsSection heading={_t("settings|security|encryption_section")}>
-                    {secureBackup}
-                    {eventIndex}
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("settings|security|encryption_section")}>
+                        {secureBackup}
+                        {eventIndex}
+                    </SettingsSection>
+                </Form.Root>
                 <SettingsSection heading={_t("common|privacy")}>
                     <DiscoverySettings />
-                    {posthogSection}
+                    <Form.Root
+                        onSubmit={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                        }}
+                    >
+                        {posthogSection}
+                    </Form.Root>
                 </SettingsSection>
                 {advancedSection}
             </SettingsTab>

src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx

@@ -7,10 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { FALLBACK_ICE_SERVER } from "matrix-js-sdk/src/webrtc/call";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import MediaDeviceHandler, { type IMediaDevices, MediaDeviceKindEnum } from "../../../../../MediaDeviceHandler";
@@ -18,7 +19,6 @@ import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SettingsFlag from "../../../elements/SettingsFlag";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { requestMediaPermissions } from "../../../../../utils/media/requestMediaPermissions";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
@@ -140,6 +140,24 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
         );
     }
 
+    private onAutoGainChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioAutoGainControl(enable);
+        this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
+    };
+
+    private onNoiseSuppressionChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioNoiseSuppression(enable);
+        this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
+    };
+
+    private onEchoCancellationChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioEchoCancellation(enable);
+        this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
+    };
+
     public render(): ReactNode {
         let requestButton: ReactNode | undefined;
         let speakerDropdown: ReactNode | undefined;
@@ -169,64 +187,62 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
 
         return (
             <SettingsTab>
-                <SettingsSection>
-                    {requestButton}
-                    <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
-                        {speakerDropdown}
-                        {microphoneDropdown}
-                        <LabelledToggleSwitch
-                            value={this.state.audioAutoGainControl}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioAutoGainControl(v);
-                                this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
-                            }}
-                            label={_t("settings|voip|voice_agc")}
-                            data-testid="voice-auto-gain"
-                        />
-                    </SettingsSubsection>
-                    <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
-                        {webcamDropdown}
-                        <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
-                    </SettingsSubsection>
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection>
+                        {requestButton}
+                        <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
+                            {speakerDropdown}
+                            {microphoneDropdown}
+                            <SettingsToggleInput
+                                name="voice-auto-gain"
+                                label={_t("settings|voip|voice_agc")}
+                                checked={this.state.audioAutoGainControl}
+                                onChange={this.onAutoGainChanged}
+                            />
+                        </SettingsSubsection>
+                        <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
+                            {webcamDropdown}
+                            <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
+                        </SettingsSubsection>
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("common|advanced")}>
-                    <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
-                        <LabelledToggleSwitch
-                            value={this.state.audioNoiseSuppression}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioNoiseSuppression(v);
-                                this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
-                            }}
-                            label={_t("settings|voip|noise_suppression")}
-                            data-testid="voice-noise-suppression"
-                        />
-                        <LabelledToggleSwitch
-                            value={this.state.audioEchoCancellation}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioEchoCancellation(v);
-                                this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
-                            }}
-                            label={_t("settings|voip|echo_cancellation")}
-                            data-testid="voice-echo-cancellation"
-                        />
-                    </SettingsSubsection>
-                    <SettingsSubsection heading={_t("settings|voip|connection_section")}>
-                        <SettingsFlag
-                            name="webRtcAllowPeerToPeer"
-                            level={SettingLevel.DEVICE}
-                            onChange={this.changeWebRtcMethod}
-                        />
-                        <SettingsFlag
-                            name="fallbackICEServerAllowed"
-                            label={_t("settings|voip|enable_fallback_ice_server", {
-                                server: new URL(FALLBACK_ICE_SERVER).pathname,
-                            })}
-                            level={SettingLevel.DEVICE}
-                            hideIfCannotSet
-                        />
-                    </SettingsSubsection>
-                </SettingsSection>
+                    <SettingsSection heading={_t("common|advanced")}>
+                        <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
+                            <SettingsToggleInput
+                                name="voice-noise-suppression"
+                                label={_t("settings|voip|noise_suppression")}
+                                checked={this.state.audioNoiseSuppression}
+                                onChange={this.onNoiseSuppressionChanged}
+                            />
+                            <SettingsToggleInput
+                                name="voice-echo-cancellation"
+                                label={_t("settings|voip|echo_cancellation")}
+                                checked={this.state.audioEchoCancellation}
+                                onChange={this.onEchoCancellationChanged}
+                            />
+                        </SettingsSubsection>
+                        <SettingsSubsection heading={_t("settings|voip|connection_section")}>
+                            <SettingsFlag
+                                name="webRtcAllowPeerToPeer"
+                                level={SettingLevel.DEVICE}
+                                onChange={this.changeWebRtcMethod}
+                            />
+                            <SettingsFlag
+                                name="fallbackICEServerAllowed"
+                                label={_t("settings|voip|enable_fallback_ice_server", {
+                                    server: new URL(FALLBACK_ICE_SERVER).pathname,
+                                })}
+                                level={SettingLevel.DEVICE}
+                                hideIfCannotSet
+                            />
+                        </SettingsSubsection>
+                    </SettingsSection>
+                </Form.Root>
             </SettingsTab>
         );
     }

src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useState } from "react";
+import React, { type ChangeEventHandler, type JSX, useCallback, useState } from "react";
 import {
     type Room,
     EventType,
@@ -15,12 +15,12 @@ import {
     JoinRule,
     type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import AliasSettings from "../room_settings/AliasSettings";
 import { useStateToggle } from "../../../hooks/useStateToggle";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
 import JoinRuleSettings from "../settings/JoinRuleSettings";
 import { useRoomState } from "../../../hooks/useRoomState";
@@ -50,6 +50,7 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
     const userId = cli.getUserId()!;
 
     const joinRule = useRoomState(space, (state) => state.getJoinRule());
+
     const [guestAccessEnabled, setGuestAccessEnabled] = useLocalEcho<boolean>(
         () =>
             space.currentState.getStateEvents(EventType.RoomGuestAccess, "")?.getContent()?.guest_access ===
@@ -65,6 +66,10 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
             ),
         () => setError(_t("room_settings|visibility|error_update_guest_access")),
     );
+    const onGuestAccessEnabledChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setGuestAccessEnabled(e.target.checked),
+        [setGuestAccessEnabled],
+    );
     const [historyVisibility, setHistoryVisibility] = useLocalEcho<HistoryVisibility>(
         () =>
             space.currentState.getStateEvents(EventType.RoomHistoryVisibility, "")?.getContent()?.history_visibility ||
@@ -103,19 +108,15 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                 </AccessibleButton>
 
                 {showAdvancedSection && (
-                    <div className="mx_SettingsTab_toggleWithDescription">
-                        <LabelledToggleSwitch
-                            value={guestAccessEnabled}
-                            onChange={setGuestAccessEnabled}
-                            disabled={!canSetGuestAccess}
-                            label={_t("room_settings|visibility|guest_access_label")}
-                        />
-                        <p>
-                            {_t("room_settings|visibility|guest_access_explainer")}
-                            <br />
-                            {_t("room_settings|visibility|guest_access_explainer_public_space")}
-                        </p>
-                    </div>
+                    <SettingsToggleInput
+                        name="guest-access-enabled"
+                        checked={guestAccessEnabled}
+                        onChange={onGuestAccessEnabledChanged}
+                        disabled={!canSetGuestAccess}
+                        disabledMessage={_t("room_settings|visibility|guest_access_disabled")}
+                        helpMessage={_t("room_settings|visibility|guest_access_explainer")}
+                        label={_t("room_settings|visibility|guest_access_label")}
+                    />
                 )}
             </div>
         );
@@ -155,26 +156,32 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                         onError={(): void => setError(_t("room_settings|visibility|error_failed_save"))}
                         closeSettingsFn={closeSettingsFn}
                     />
-                    {advancedSection}
-                    <div className="mx_SettingsTab_toggleWithDescription">
-                        <LabelledToggleSwitch
-                            value={historyVisibility === HistoryVisibility.WorldReadable}
-                            onChange={(checked: boolean): void => {
+                    <Form.Root
+                        onSubmit={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                        }}
+                    >
+                        {advancedSection}
+                        <SettingsToggleInput
+                            name="space-history-visibility"
+                            checked={historyVisibility === HistoryVisibility.WorldReadable}
+                            onChange={(evt): void => {
                                 setHistoryVisibility(
-                                    checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
+                                    evt.target.checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
                                 );
                             }}
+                            helpMessage={_t("room_settings|visibility|history_visibility_anyone_space_description")}
                             disabled={!canSetHistoryVisibility}
+                            disabledMessage={_t("room_settings|visibility|history_visibility_anyone_space_disabled")}
                             label={_t("room_settings|visibility|history_visibility_anyone_space")}
                         />
                         <p>
-                            {_t("room_settings|visibility|history_visibility_anyone_space_description")}
-                            <br />
                             <strong>
                                 {_t("room_settings|visibility|history_visibility_anyone_space_recommendation")}
                             </strong>
                         </p>
-                    </div>
+                    </Form.Root>
                 </SettingsFieldset>
 
                 {addressesSection}

src/i18n/strings/en_EN.json

@@ -2278,6 +2278,8 @@
             "no_aliases_space": "This space has no local addresses",
             "other_section": "Other",
             "publish_toggle": "Publish this room to the public in %(domain)s's room directory?",
+            "publish_warn_invite_only": "You cannot publish a room that is invite-only.",
+            "publish_warn_no_canonical_permission": "You must have permission to set the main address to publish this room.",
             "published_aliases_description": "To publish an address, it needs to be set as a local address first.",
             "published_aliases_explainer_room": "Published addresses can be used by anyone on any server to join your room.",
             "published_aliases_explainer_space": "Published addresses can be used by anyone on any server to join your space.",
@@ -2428,11 +2430,12 @@
             "error_failed_save": "Failed to update the visibility of this space",
             "error_update_guest_access": "Failed to update the guest access of this space",
             "error_update_history_visibility": "Failed to update the history visibility of this space",
-            "guest_access_explainer": "Guests can join a space without having an account.",
-            "guest_access_explainer_public_space": "This may be useful for public spaces.",
+            "guest_access_explainer": "Guests can join a space without having an account. This may be useful for public spaces.",
             "guest_access_label": "Enable guest access",
+            "guest_access_disabled": "You do not have permission to change guest access.",
             "history_visibility_anyone_space": "Preview Space",
             "history_visibility_anyone_space_description": "Allow people to preview your space before they join.",
+            "history_visibility_anyone_space_disabled":"You do not have permission to change history visibilty.",
             "history_visibility_anyone_space_recommendation": "Recommended for public spaces.",
             "title": "Visibility"
         },

src/settings/Settings.tsx

@@ -945,6 +945,10 @@ export const SETTINGS: Settings = {
         default: false,
         displayName: _td("settings|appearance|custom_font"),
         controller: new SystemFontController(),
+        description: () =>
+            _t("settings|appearance|custom_font_description", {
+                brand: SdkConfig.get().brand,
+            }),
     },
     "systemFont": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
@@ -1106,10 +1110,12 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
         controller: new NotificationsEnabledController(),
+        displayName: "settings|notifications|enable_desktop_notifications_session",
     },
     "deviceNotificationsEnabled": {
         supportedLevels: [SettingLevel.DEVICE],
         default: true,
+        displayName: "settings|notifications|enable_notifications_device",
     },
     "notificationSound": {
         supportedLevels: LEVELS_ROOM_OR_ACCOUNT,
@@ -1121,10 +1127,12 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: true,
         controller: new NotificationBodyEnabledController(),
+        displayName: "settings|notifications|desktop_notification_message_preview",
     },
     "audioNotificationsEnabled": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: true,
+        displayName: "settings|notifications|enable_audible_notifications_session",
     },
     "enableWidgetScreenshots": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx

@@ -26,9 +26,6 @@ describe("<CreateRoomDialog />", () => {
     });
 
     const getE2eeEnableToggleInputElement = () => screen.getByLabelText("Enable end-to-end encryption");
-    // labelled toggle switch doesn't set the disabled attribute, only aria-disabled
-    const getE2eeEnableToggleIsDisabled = () =>
-        getE2eeEnableToggleInputElement().getAttribute("aria-disabled") === "true";
 
     beforeEach(() => {
         mockClient.doesServerForceEncryptionForPreset.mockResolvedValue(false);
@@ -66,7 +63,7 @@ describe("<CreateRoomDialog />", () => {
             await flushPromises();
 
             expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
+            expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
             expect(
                 screen.getByText(
                     "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -86,7 +83,7 @@ describe("<CreateRoomDialog />", () => {
             await flushPromises();
 
             expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
+            expect(getE2eeEnableToggleInputElement()).toBeDisabled();
             expect(
                 screen.getByText(
                     "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -106,7 +103,7 @@ describe("<CreateRoomDialog />", () => {
             await flushPromises();
             // encryption enabled
             expect(getE2eeEnableToggleInputElement()).toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
+            expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
         });
 
         it("should use defaultEncrypted prop when it is false", async () => {
@@ -122,7 +119,7 @@ describe("<CreateRoomDialog />", () => {
             // encryption disabled
             expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
             // not forced to off
-            expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
+            expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
         });
 
         it("should override defaultEncrypted when server .well-known forces disabled encryption", async () => {
@@ -137,7 +134,7 @@ describe("<CreateRoomDialog />", () => {
 
             // server forces encryption to disabled, even though defaultEncrypted is false
             expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
+            expect(getE2eeEnableToggleInputElement()).toBeDisabled();
             expect(
                 screen.getByText(
                     "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -152,7 +149,7 @@ describe("<CreateRoomDialog />", () => {
 
             // server forces encryption to enabled, even though defaultEncrypted is true
             expect(getE2eeEnableToggleInputElement()).toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
+            expect(getE2eeEnableToggleInputElement()).toBeDisabled();
             expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined();
         });
 
@@ -162,7 +159,7 @@ describe("<CreateRoomDialog />", () => {
 
             await flushPromises();
             expect(getE2eeEnableToggleInputElement()).toBeChecked();
-            expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
+            expect(getE2eeEnableToggleInputElement()).toBeDisabled();
 
             expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined();
         });
@@ -255,7 +252,7 @@ describe("<CreateRoomDialog />", () => {
 
             it("should create a knock room with public visibility", async () => {
                 fireEvent.click(
-                    screen.getByRole("checkbox", { name: "Make this room visible in the public room directory." }),
+                    screen.getByRole("switch", { name: "Make this room visible in the public room directory." }),
                 );
                 fireEvent.click(screen.getByText("Create room"));
                 await flushPromises();

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

@@ -31,67 +31,77 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
         Are you sure you want to decline the invitation to join "foo"?
       </p>
       <div
-        class="mx_SettingsFlag"
+        class="_inline-field_19upo_32"
       >
-        <span
-          class="mx_SettingsFlag_label"
+        <div
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r7»"
+            class="_container_19o42_10"
+          >
+            <input
+              class="_input_19o42_24"
+              id="«rb»"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_19o42_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="«rb»"
           >
             Ignore user
-          </div>
+          </label>
           <span
-            class="mx_Caption"
-            id="mx_LabelledToggleSwitch_«r7»_caption"
+            class="_message_19upo_85 _help-message_19upo_91"
+            id="radix-«rd»"
           >
             You will not see any messages or room invites from this user.
           </span>
-        </span>
-        <div
-          aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch_«r7»_caption"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r7»"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
         </div>
       </div>
       <div
-        class="mx_SettingsFlag"
+        class="_inline-field_19upo_32"
       >
-        <span
-          class="mx_SettingsFlag_label"
+        <div
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r8»"
+            class="_container_19o42_10"
+          >
+            <input
+              class="_input_19o42_24"
+              id="«re»"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_19o42_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="«re»"
           >
             Report room
-          </div>
+          </label>
           <span
-            class="mx_Caption"
-            id="mx_LabelledToggleSwitch_«r8»_caption"
+            class="_message_19upo_85 _help-message_19upo_91"
+            id="radix-«rg»"
           >
             Report this room to your account provider.
           </span>
-        </span>
-        <div
-          aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch_«r8»_caption"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r8»"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
         </div>
       </div>
       <div

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

@@ -105,117 +105,127 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           End-to-end encryption
         </button>
       </div>
-      <div>
+      <form
+        class="_root_19upo_16"
+      >
         <h3>
           Options
         </h3>
         <div
-          class="mx_SettingsFlag"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_vY7Q4uEh9K38"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Developer mode
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Developer mode"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_vY7Q4uEh9K38"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <div
-          class="mx_SettingsFlag"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_QgU2PomxwKpa"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Show hidden events in timeline
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Show hidden events in timeline"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_QgU2PomxwKpa"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <div
-          class="mx_SettingsFlag"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_6hpi3YEetmBG"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Enable widget screenshots on supported widgets
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Enable widget screenshots on supported widgets"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_6hpi3YEetmBG"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <form
-          class="_root_19upo_16"
+          class="_inline-field_19upo_32"
         >
           <div
-            class="_field_19upo_26"
+            class="_inline-field-control_19upo_44"
           >
-            <label
-              class="_label_19upo_59"
-              for="radix-«r4»"
-            >
-              Element Call URL
-            </label>
             <div
-              class="_controls_17lij_8"
+              class="_container_19o42_10"
             >
               <input
-                class="_control_sqdq4_10"
-                id="radix-«r4»"
-                name="input"
-                title=""
-                value=""
+                class="_input_19o42_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
               />
             </div>
           </div>
-        </form>
-      </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_vY7Q4uEh9K38"
+            >
+              Developer mode
+            </label>
+          </div>
+        </div>
+        <div
+          class="_inline-field_19upo_32"
+        >
+          <div
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_19o42_10"
+            >
+              <input
+                class="_input_19o42_24"
+                id="mx_SettingsFlag_QgU2PomxwKpa"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_QgU2PomxwKpa"
+            >
+              Show hidden events in timeline
+            </label>
+          </div>
+        </div>
+        <div
+          class="_inline-field_19upo_32"
+        >
+          <div
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_19o42_10"
+            >
+              <input
+                class="_input_19o42_24"
+                id="mx_SettingsFlag_6hpi3YEetmBG"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_6hpi3YEetmBG"
+            >
+              Enable widget screenshots on supported widgets
+            </label>
+          </div>
+        </div>
+        <div
+          class="_field_19upo_26"
+        >
+          <label
+            class="_label_19upo_59"
+            for="radix-«ra»"
+          >
+            Element Call URL
+          </label>
+          <div
+            class="_controls_17lij_8"
+          >
+            <input
+              class="_control_sqdq4_10"
+              id="radix-«ra»"
+              name="input"
+              title=""
+              value=""
+            />
+          </div>
+        </div>
+      </form>
     </div>
     <div
       class="mx_Dialog_buttons"

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

@@ -43,7 +43,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         />
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-«r8»"
+          id="radix-«r9»"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -65,28 +65,34 @@ exports[`ReportRoomDialog displays admin message 1`] = `
 
       </p>
       <div
-        class="mx_SettingsFlag"
+        class="_inline-field_19upo_32"
       >
-        <span
-          class="mx_SettingsFlag_label"
+        <div
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r9»"
+            class="_container_19o42_10"
+          >
+            <input
+              class="_input_19o42_24"
+              id="«ra»"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_19o42_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="«ra»"
           >
             Leave room
-          </div>
-        </span>
-        <div
-          aria-checked="false"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r9»"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
+          </label>
         </div>
       </div>
       <div

test/unit-tests/components/views/location/LocationShareMenu-test.tsx

@@ -300,7 +300,7 @@ describe("<LocationShareMenu />", () => {
 
             setShareType(getByText, LocationShareType.Live);
 
-            expect(getByText("OK").hasAttribute("disabled")).toBeTruthy();
+            expect(getByText("OK")).toHaveAttribute("aria-disabled", "true");
         });
 
         it("enables OK button when labs flag is toggled to enabled", () => {
@@ -310,7 +310,7 @@ describe("<LocationShareMenu />", () => {
 
             fireEvent.click(getByLabelText("Enable live location sharing"));
 
-            expect(getByText("OK").hasAttribute("disabled")).toBeFalsy();
+            expect(getByText("OK")).not.toHaveAttribute("aria-disabled", "true");
         });
 
         it("enables live share setting on ok button submit", () => {

test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -18,41 +18,50 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
   >
     Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
   </p>
-  <div
-    class="mx_SettingsFlag"
-    data-testid="enable-live-share-toggle"
+  <form
+    class="_root_19upo_16"
   >
-    <span
-      class="mx_SettingsFlag_label"
+    <div
+      class="_inline-field_19upo_32"
     >
       <div
-        id="mx_LabelledToggleSwitch_«r0»"
+        class="_inline-field-control_19upo_44"
       >
-        Enable live location sharing
+        <div
+          class="_container_19o42_10"
+        >
+          <input
+            class="_input_19o42_24"
+            id="«r0»"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_19o42_34"
+          />
+        </div>
       </div>
-    </span>
-    <div
-      aria-checked="false"
-      aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_«r0»"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      role="switch"
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="«r0»"
+        >
+          Enable live location sharing
+        </label>
+      </div>
+    </div>
+    <button
+      aria-disabled="true"
+      class="_button_vczzf_8 mx_EnableLiveShare_button"
+      data-kind="primary"
+      data-size="lg"
+      role="button"
       tabindex="0"
     >
-      <div
-        class="mx_ToggleSwitch_ball"
-      />
-    </div>
-  </div>
-  <button
-    aria-disabled="true"
-    class="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
-    data-testid="enable-live-share-submit"
-    disabled=""
-    role="button"
-    tabindex="0"
-  >
-    OK
-  </button>
+      OK
+    </button>
+  </form>
 </div>
 `;

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap

@@ -213,6 +213,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«rv»"
+              role="switch"
               type="checkbox"
             />
             <div
@@ -935,6 +936,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«r5»"
+              role="switch"
               type="checkbox"
             />
             <div
@@ -1695,6 +1697,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«ri»"
+              role="switch"
               type="checkbox"
             />
             <div

test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx

@@ -9,6 +9,7 @@ import React from "react";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { render, screen } from "jest-matrix-react";
 import { waitFor } from "@testing-library/dom";
+import { Form } from "@vector-im/compound-web";
 
 import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../test-utils";
 import { UrlPreviewSettings } from "../../../../../src/components/views/room_settings/UrlPreviewSettings.tsx";
@@ -30,7 +31,12 @@ describe("UrlPreviewSettings", () => {
     });
 
     function renderComponent() {
-        return render(<UrlPreviewSettings room={room} />, withClientContextRenderOptions(client));
+        return render(
+            <Form.Root>
+                <UrlPreviewSettings room={room} />
+            </Form.Root>,
+            withClientContextRenderOptions(client),
+        );
     }
 
     it("should display the correct preview when the setting is in a loading state", () => {

test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap

@@ -2,235 +2,269 @@
 
 exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = `
 <DocumentFragment>
-  <fieldset
-    class="mx_SettingsFieldset"
+  <form
+    class="_root_19upo_16"
   >
-    <legend
-      class="mx_SettingsFieldset_legend"
+    <fieldset
+      class="mx_SettingsFieldset"
     >
-      URL Previews
-    </legend>
-    <div
-      class="mx_SettingsFieldset_description"
-    >
-      <div
-        class="mx_SettingsSubsection_text"
+      <legend
+        class="mx_SettingsFieldset_legend"
       >
-        <p>
-          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-        </p>
-        <p>
-          In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
-        </p>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsFieldset_content"
-    >
+        URL Previews
+      </legend>
       <div
-        class="mx_SettingsFlag"
+        class="mx_SettingsFieldset_description"
       >
-        <label
-          class="mx_SettingsFlag_label"
-          for="mx_SettingsFlag_vY7Q4uEh9K38"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          />
-        </label>
         <div
-          aria-checked="true"
-          aria-disabled="false"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          id="mx_SettingsFlag_vY7Q4uEh9K38"
-          role="switch"
-          tabindex="0"
+          class="mx_SettingsSubsection_text"
         >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
+          <p>
+            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+          </p>
+          <p>
+            In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
+          </p>
         </div>
       </div>
-    </div>
-  </fieldset>
+      <div
+        class="mx_SettingsFieldset_content"
+      >
+        <div
+          class="_inline-field_19upo_32"
+        >
+          <div
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_19o42_10"
+            >
+              <input
+                checked=""
+                class="_input_19o42_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_vY7Q4uEh9K38"
+            >
+              urlPreviewsEnabled_e2ee
+            </label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = `
 <DocumentFragment>
-  <fieldset
-    class="mx_SettingsFieldset"
+  <form
+    class="_root_19upo_16"
   >
-    <legend
-      class="mx_SettingsFieldset_legend"
+    <fieldset
+      class="mx_SettingsFieldset"
     >
-      URL Previews
-    </legend>
-    <div
-      class="mx_SettingsFieldset_description"
-    >
-      <div
-        class="mx_SettingsSubsection_text"
+      <legend
+        class="mx_SettingsFieldset_legend"
+      >
+        URL Previews
+      </legend>
+      <div
+        class="mx_SettingsFieldset_description"
       >
-        <p>
-          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-        </p>
-        <p>
-          <span>
-            You have 
-          </span>
-        </p>
         <div
-          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-          role="button"
-          tabindex="0"
+          class="mx_SettingsSubsection_text"
         >
-          disabled
-        </div>
-         URL previews by default.
-        <p />
-      </div>
-    </div>
-    <div
-      class="mx_SettingsFieldset_content"
-    >
-      <div>
-        URL previews are disabled by default for participants in this room.
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-          for="mx_SettingsFlag_vY7Q4uEh9K38"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+          <p>
+            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+          </p>
+          <p>
+            <span>
+              You have 
+            </span>
+          </p>
+          <div
+            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
           >
-            Enable inline URL previews by default
-          </span>
-        </label>
+            disabled
+          </div>
+           URL previews by default.
+          <p />
+        </div>
+      </div>
+      <div
+        class="mx_SettingsFieldset_content"
+      >
+        <div>
+          URL previews are disabled by default for participants in this room.
+        </div>
         <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Enable inline URL previews by default"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          id="mx_SettingsFlag_vY7Q4uEh9K38"
-          role="switch"
-          tabindex="0"
+          class="_inline-field_19upo_32"
         >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_19o42_10"
+            >
+              <input
+                class="_input_19o42_24"
+                disabled=""
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_vY7Q4uEh9K38"
+            >
+              Enable inline URL previews by default
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-  </fieldset>
+    </fieldset>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = `
 <DocumentFragment>
-  <fieldset
-    class="mx_SettingsFieldset"
+  <form
+    class="_root_19upo_16"
   >
-    <legend
-      class="mx_SettingsFieldset_legend"
+    <fieldset
+      class="mx_SettingsFieldset"
     >
-      URL Previews
-    </legend>
-    <div
-      class="mx_SettingsFieldset_description"
-    >
-      <div
-        class="mx_SettingsSubsection_text"
+      <legend
+        class="mx_SettingsFieldset_legend"
+      >
+        URL Previews
+      </legend>
+      <div
+        class="mx_SettingsFieldset_description"
       >
-        <p>
-          When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-        </p>
-        <p>
-          <span>
-            You have 
-          </span>
-        </p>
         <div
-          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-          role="button"
-          tabindex="0"
+          class="mx_SettingsSubsection_text"
         >
-          enabled
-        </div>
-         URL previews by default.
-        <p />
-      </div>
-    </div>
-    <div
-      class="mx_SettingsFieldset_content"
-    >
-      <div>
-        URL previews are enabled by default for participants in this room.
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-          for="mx_SettingsFlag_vY7Q4uEh9K38"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+          <p>
+            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
+          </p>
+          <p>
+            <span>
+              You have 
+            </span>
+          </p>
+          <div
+            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
           >
-            Enable inline URL previews by default
-          </span>
-        </label>
+            enabled
+          </div>
+           URL previews by default.
+          <p />
+        </div>
+      </div>
+      <div
+        class="mx_SettingsFieldset_content"
+      >
+        <div>
+          URL previews are enabled by default for participants in this room.
+        </div>
         <div
-          aria-checked="true"
-          aria-disabled="false"
-          aria-label="Enable inline URL previews by default"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          id="mx_SettingsFlag_vY7Q4uEh9K38"
-          role="switch"
-          tabindex="0"
+          class="_inline-field_19upo_32"
         >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_19o42_10"
+            >
+              <input
+                checked=""
+                class="_input_19o42_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_19o42_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="mx_SettingsFlag_vY7Q4uEh9K38"
+            >
+              Enable inline URL previews by default
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-  </fieldset>
+    </fieldset>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
 <DocumentFragment>
-  <fieldset
-    class="mx_SettingsFieldset"
+  <form
+    class="_root_19upo_16"
   >
-    <legend
-      class="mx_SettingsFieldset_legend"
+    <fieldset
+      class="mx_SettingsFieldset"
     >
-      URL Previews
-    </legend>
-    <div
-      class="mx_SettingsFieldset_content"
-    >
-      <svg
-        class="_icon_11k6c_18"
-        fill="currentColor"
-        height="1em"
-        style="width: 20px; height: 20px;"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <legend
+        class="mx_SettingsFieldset_legend"
       >
-        <path
-          clip-rule="evenodd"
-          d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </div>
-  </fieldset>
+        URL Previews
+      </legend>
+      <div
+        class="mx_SettingsFieldset_content"
+      >
+        <svg
+          class="_icon_11k6c_18"
+          fill="currentColor"
+          height="1em"
+          style="width: 20px; height: 20px;"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+    </fieldset>
+  </form>
 </DocumentFragment>
 `;

test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx

@@ -70,12 +70,12 @@ describe("<LayoutSwitcher />", () => {
             await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
             await renderLayoutSwitcher();
 
-            expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeChecked();
+            expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeChecked();
         });
 
         it("should change the setting when toggled", async () => {
             await renderLayoutSwitcher();
-            act(() => screen.getByRole("checkbox", { name: "Show compact text and messages" }).click());
+            act(() => screen.getByRole("switch", { name: "Show compact text and messages" }).click());
 
             await waitFor(() => expect(SettingsStore.getValue("useCompactLayout")).toBe(true));
         });
@@ -83,7 +83,7 @@ describe("<LayoutSwitcher />", () => {
         it("should be disabled when the modern layout is not enabled", async () => {
             await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
             await renderLayoutSwitcher();
-            expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeDisabled();
+            expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeDisabled();
         });
     });
 });

test/unit-tests/components/views/settings/Notifications-test.tsx

@@ -347,11 +347,11 @@ describe("<Notifications />", () => {
         it("renders switches correctly", async () => {
             await getComponentAndWait();
 
-            expect(screen.getByTestId("notif-master-switch")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-device-switch")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-notificationsEnabled")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-notificationBodyEnabled")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-audioNotificationsEnabled")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable notifications for this account")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable notifications for this device")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable desktop notifications for this session")).toBeInTheDocument();
+            expect(screen.getByLabelText("Show message preview in desktop notification")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable audible notifications for this session")).toBeInTheDocument();
         });
 
         describe("email switches", () => {
@@ -370,7 +370,7 @@ describe("<Notifications />", () => {
 
             it("renders email switches correctly when email 3pids exist", async () => {
                 await getComponentAndWait();
-                expect(screen.getByTestId("notif-email-switch")).toBeInTheDocument();
+                expect(screen.getByLabelText(`Enable email notifications for ${testEmail}`)).toBeInTheDocument();
             });
 
             it("renders email switches correctly when notifications are on for email", async () => {
@@ -379,14 +379,14 @@ describe("<Notifications />", () => {
                 });
                 await getComponentAndWait();
 
-                const emailSwitch = screen.getByTestId("notif-email-switch");
-                expect(emailSwitch.querySelector('[aria-checked="true"]')).toBeInTheDocument();
+                const emailSwitch = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
+                expect(emailSwitch).toBeChecked();
             });
 
             it("enables email notification when toggling on", async () => {
                 await getComponentAndWait();
 
-                const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
+                const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
                 fireEvent.click(emailToggle);
 
                 expect(mockClient.setPusher).toHaveBeenCalledWith(
@@ -405,7 +405,7 @@ describe("<Notifications />", () => {
                 mockClient.setPusher.mockRejectedValue({});
                 await getComponentAndWait();
 
-                const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
+                const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
                 fireEvent.click(emailToggle);
 
                 // force render
@@ -431,7 +431,7 @@ describe("<Notifications />", () => {
                 mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] });
                 await getComponentAndWait();
 
-                const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
+                const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
                 fireEvent.click(emailToggle);
 
                 expect(mockClient.removePusher).toHaveBeenCalledWith(testPusher.pushkey, testPusher.app_id);
@@ -452,22 +452,20 @@ describe("<Notifications />", () => {
 
         it("toggles and sets settings correctly", async () => {
             await getComponentAndWait();
-            let audioNotifsToggle!: HTMLDivElement;
+            let audioNotifsToggle!: HTMLInputElement;
 
             const update = () => {
-                audioNotifsToggle = screen
-                    .getByTestId("notif-setting-audioNotificationsEnabled")
-                    .querySelector('div[role="switch"]')!;
+                audioNotifsToggle = screen.getByLabelText("Enable audible notifications for this session");
             };
             update();
 
-            expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("true");
+            expect(audioNotifsToggle).toBeChecked();
             expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(true);
 
             fireEvent.click(audioNotifsToggle);
             update();
 
-            expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("false");
+            expect(audioNotifsToggle).not.toBeChecked();
             expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(false);
         });
     });

test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx

@@ -56,24 +56,24 @@ describe("<ThemeChoicePanel />", () => {
         describe("system theme", () => {
             it("should disable Match system theme", async () => {
                 render(<ThemeChoicePanel />);
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).not.toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).not.toBeChecked();
             });
 
             it("should enable Match system theme", async () => {
                 await enableSystemTheme(true);
 
                 render(<ThemeChoicePanel />);
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
             });
 
             it("should change the system theme when clicked", async () => {
                 jest.spyOn(SettingsStore, "setValue");
 
                 render(<ThemeChoicePanel />);
-                act(() => screen.getByRole("checkbox", { name: "Match system theme" }).click());
+                act(() => screen.getByRole("switch", { name: "Match system theme" }).click());
 
                 // The system theme should be enabled
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
                 expect(SettingsStore.setValue).toHaveBeenCalledWith("use_system_theme", null, "device", true);
             });
         });

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

@@ -418,6 +418,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 class="_input_19o42_24"
                 id="radix-«rr»"
                 name="compactLayout"
+                role="switch"
                 title=""
                 type="checkbox"
               />

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

@@ -2,94 +2,114 @@
 
 exports[`<Notifications /> main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
 <div>
-  <div
-    class="mx_SettingsFlag"
-    data-testid="notif-master-switch"
+  <form
+    class="_root_19upo_16"
   >
-    <span
-      class="mx_SettingsFlag_label"
-    >
-      <div
-        id="mx_LabelledToggleSwitch_«r0»"
-      >
-        Enable notifications for this account
-      </div>
-      <span
-        class="mx_Caption"
-        id="mx_LabelledToggleSwitch_«r0»_caption"
-      >
-        Turn off to disable notifications on all your devices and sessions
-      </span>
-    </span>
     <div
-      aria-checked="false"
-      aria-describedby="mx_LabelledToggleSwitch_«r0»_caption"
-      aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_«r0»"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      role="switch"
-      tabindex="0"
+      class="_inline-field_19upo_32"
     >
       <div
-        class="mx_ToggleSwitch_ball"
-      />
-    </div>
-  </div>
-  <div>
-    <div
-      class="mx_SettingsFlag"
-    >
-      <label
-        class="mx_SettingsFlag_label"
-        for="mx_SettingsFlag_testid_0"
-      >
-        <span
-          class="mx_SettingsFlag_labelText"
-        >
-          Show all activity in the room list (dots or number of unread messages)
-        </span>
-      </label>
-      <div
-        aria-checked="true"
-        aria-disabled="false"
-        aria-label="Show all activity in the room list (dots or number of unread messages)"
-        class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        id="mx_SettingsFlag_testid_0"
-        role="switch"
-        tabindex="0"
+        class="_inline-field-control_19upo_44"
       >
         <div
-          class="mx_ToggleSwitch_ball"
-        />
+          class="_container_19o42_10"
+        >
+          <input
+            class="_input_19o42_24"
+            id="«r0»"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_19o42_34"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="«r0»"
+        >
+          Enable notifications for this account
+        </label>
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-«r2»"
+        >
+          Turn off to disable notifications on all your devices and sessions
+        </span>
       </div>
     </div>
-    <div
-      class="mx_SettingsFlag"
+    <form
+      class="_root_19upo_16"
     >
-      <label
-        class="mx_SettingsFlag_label"
-        for="mx_SettingsFlag_testid_1"
-      >
-        <span
-          class="mx_SettingsFlag_labelText"
-        >
-          Only show notifications in the thread activity centre
-        </span>
-      </label>
       <div
-        aria-checked="true"
-        aria-disabled="false"
-        aria-label="Only show notifications in the thread activity centre"
-        class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        id="mx_SettingsFlag_testid_1"
-        role="switch"
-        tabindex="0"
+        class="_inline-field_19upo_32"
       >
         <div
-          class="mx_ToggleSwitch_ball"
-        />
+          class="_inline-field-control_19upo_44"
+        >
+          <div
+            class="_container_19o42_10"
+          >
+            <input
+              checked=""
+              class="_input_19o42_24"
+              id="mx_SettingsFlag_testid_0"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_19o42_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="mx_SettingsFlag_testid_0"
+          >
+            Show all activity in the room list (dots or number of unread messages)
+          </label>
+        </div>
       </div>
-    </div>
-  </div>
+      <div
+        class="_inline-field_19upo_32"
+      >
+        <div
+          class="_inline-field-control_19upo_44"
+        >
+          <div
+            class="_container_19o42_10"
+          >
+            <input
+              checked=""
+              class="_input_19o42_24"
+              id="mx_SettingsFlag_testid_1"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_19o42_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="mx_SettingsFlag_testid_1"
+          >
+            Only show notifications in the thread activity centre
+          </label>
+        </div>
+      </div>
+    </form>
+  </form>
 </div>
 `;

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SetIntegrationManager should render manage integrations sections 1`] = `
-<div
-  class="mx_SetIntegrationManager"
+<form
+  class="_root_19upo_16 mx_SetIntegrationManager"
   data-testid="mx_SetIntegrationManager"
 >
   <div
@@ -18,6 +18,7 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
       </h3>
       <h4
         class="mx_Heading_h4"
+        id="mx_SetIntegrationManager_ManagerName"
       >
         (scalar.vector.im)
       </h4>
@@ -25,6 +26,7 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
   </div>
   <div
     class="mx_SettingsSubsection_text"
+    id="mx_SetIntegrationManager_BodyText"
   >
     <span>
       Use an integration manager 
@@ -39,40 +41,36 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
   >
     Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
   </div>
-  <form
-    class="_root_19upo_16"
+  <div
+    class="_inline-field_19upo_32"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field-control_19upo_44"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_container_19o42_10"
       >
+        <input
+          class="_input_19o42_24"
+          id="«r0»"
+          role="switch"
+          type="checkbox"
+        />
         <div
-          class="_container_19o42_10"
-        >
-          <input
-            class="_input_19o42_24"
-            id="mx_SetIntegrationManager_Toggle"
-            role="switch"
-            type="checkbox"
-          />
-          <div
-            class="_ui_19o42_34"
-          />
-        </div>
-      </div>
-      <div
-        class="_inline-field-body_19upo_38"
-      >
-        <label
-          class="_label_19upo_59"
-          for="mx_SetIntegrationManager_Toggle"
-        >
-          Enable the integration manager
-        </label>
+          class="_ui_19o42_34"
+        />
       </div>
     </div>
-  </form>
-</div>
+    <div
+      class="_inline-field-body_19upo_38"
+    >
+      <label
+        class="_label_19upo_59"
+        for="«r0»"
+      >
+        Enable the integration manager
+      </label>
+    </div>
+  </div>
+</form>
 `;

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

@@ -34,6 +34,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 class="_input_19o42_24"
                 id="radix-«r28»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />
@@ -312,6 +313,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 class="_input_19o42_24"
                 id="radix-«r10»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />
@@ -590,6 +592,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 class="_input_19o42_24"
                 id="radix-«r0»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />

test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx

@@ -74,7 +74,7 @@ describe("<AdvancedPanel />", () => {
             await renderAdvancedPanel();
 
             expect(screen.getByTestId("otherSettings")).toMatchSnapshot();
-            const checkbox = screen.getByRole("checkbox", {
+            const checkbox = screen.getByRole("switch", {
                 name: "In encrypted rooms, only send messages to verified users",
             });
             expect(checkbox).toBeChecked();

test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap

@@ -224,6 +224,7 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
           class="_input_19o42_24"
           id="radix-«r6»"
           name="neverSendEncrypted"
+          role="switch"
           title=""
           type="checkbox"
         />

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

@@ -114,7 +114,7 @@ describe("<Notifications />", () => {
             expect(screen.container).toMatchSnapshot();
 
             const globalMute = screen.getByLabelText(labelGlobalMute);
-            expect(globalMute).toHaveAttribute("aria-disabled", "true");
+            expect(globalMute).toBeDisabled();
 
             const levelAllMessages = screen.getByLabelText(labelLevelAllMessage);
             expect(levelAllMessages).toBeDisabled();

test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx

@@ -169,7 +169,7 @@ describe("<SecurityRoomSettingsTab />", () => {
 
             fireEvent.click(screen.getByText("Show advanced"));
 
-            expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false");
+            expect(screen.getByLabelText("Enable guest access")).not.toBeChecked();
         });
 
         it("updates guest access on toggle", () => {
@@ -181,7 +181,7 @@ describe("<SecurityRoomSettingsTab />", () => {
             fireEvent.click(screen.getByLabelText("Enable guest access"));
 
             // toggle set immediately
-            expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true");
+            expect(screen.getByLabelText("Enable guest access")).toBeChecked();
 
             expect(client.sendStateEvent).toHaveBeenCalledWith(
                 room.roomId,
@@ -202,14 +202,14 @@ describe("<SecurityRoomSettingsTab />", () => {
             fireEvent.click(screen.getByLabelText("Enable guest access"));
 
             // toggle set immediately
-            expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false");
+            expect(screen.getByLabelText("Enable guest access")).not.toBeChecked();
 
             await flushPromises();
             expect(client.sendStateEvent).toHaveBeenCalled();
             expect(logger.error).toHaveBeenCalledWith("oups");
 
             // toggle reset to old value
-            expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true");
+            expect(screen.getByLabelText("Enable guest access")).toBeChecked();
         });
     });
 
@@ -305,7 +305,7 @@ describe("<SecurityRoomSettingsTab />", () => {
 
             await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked());
             // can't disable encryption once enabled
-            expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
+            expect(screen.getByLabelText("Encrypted")).toBeDisabled();
         });
 
         it("asks users to confirm when setting room to encrypted", async () => {
@@ -412,7 +412,7 @@ describe("<SecurityRoomSettingsTab />", () => {
                 getComponent(room);
 
                 await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked());
-                expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
+                expect(screen.getByLabelText("Encrypted")).toBeDisabled();
                 expect(screen.getByText("Once enabled, encryption cannot be disabled.")).toBeInTheDocument();
             });
 
@@ -422,7 +422,7 @@ describe("<SecurityRoomSettingsTab />", () => {
                 getComponent(room);
 
                 await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
-                expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
+                expect(screen.getByLabelText("Encrypted")).toBeDisabled();
                 expect(screen.queryByText("Once enabled, encryption cannot be disabled.")).not.toBeInTheDocument();
                 expect(screen.getByText("Your server requires encryption to be disabled.")).toBeInTheDocument();
             });

test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx

@@ -43,7 +43,7 @@ describe("VoipRoomSettingsTab", () => {
         };
 
         const getElementCallSwitch = (tab: RenderResult): HTMLElement => {
-            return tab.container.querySelector("[data-testid='element-call-switch']")!;
+            return tab.getByLabelText("Enable Element Call as an additional calling option in this room")!;
         };
 
         describe("correct state", () => {
@@ -52,7 +52,7 @@ describe("VoipRoomSettingsTab", () => {
 
                 const tab = renderTab();
 
-                expect(getElementCallSwitch(tab).querySelector("[aria-checked='true']")).toBeTruthy();
+                expect(getElementCallSwitch(tab)).toBeChecked();
             });
 
             it.each([1, 50, 100])("shows disabled when call member power level is 0", (level: number) => {
@@ -60,7 +60,7 @@ describe("VoipRoomSettingsTab", () => {
 
                 const tab = renderTab();
 
-                expect(getElementCallSwitch(tab).querySelector("[aria-checked='false']")).toBeTruthy();
+                expect(getElementCallSwitch(tab)).not.toBeChecked();
             });
         });
 
@@ -75,7 +75,7 @@ describe("VoipRoomSettingsTab", () => {
 
                     const tab = renderTab();
 
-                    fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
+                    fireEvent.click(getElementCallSwitch(tab));
                     await waitFor(() =>
                         expect(cli.sendStateEvent).toHaveBeenCalledWith(
                             room.roomId,
@@ -95,7 +95,7 @@ describe("VoipRoomSettingsTab", () => {
 
                     const tab = renderTab();
 
-                    fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
+                    fireEvent.click(getElementCallSwitch(tab));
                     await waitFor(() =>
                         expect(cli.sendStateEvent).toHaveBeenCalledWith(
                             room.roomId,
@@ -116,7 +116,7 @@ describe("VoipRoomSettingsTab", () => {
 
                 const tab = renderTab();
 
-                fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
+                fireEvent.click(getElementCallSwitch(tab));
                 await waitFor(() =>
                     expect(cli.sendStateEvent).toHaveBeenCalledWith(
                         room.roomId,

test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx

@@ -89,7 +89,7 @@ describe("PreferencesUserSettingsTab", () => {
 
         renderTab();
         const toggle = await screen.findByRole("switch", { name: "Allow spell check" });
-        expect(toggle).toHaveAttribute("aria-checked", "false");
+        expect(toggle).not.toBeDisabled();
 
         await userEvent.click(toggle);
 
@@ -149,7 +149,7 @@ describe("PreferencesUserSettingsTab", () => {
                 mockGetValue(false);
                 const toggle = getToggle();
 
-                await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
+                await waitFor(() => expect(toggle).not.toBeDisabled());
                 fireEvent.click(toggle);
                 expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, true);
             });
@@ -158,7 +158,7 @@ describe("PreferencesUserSettingsTab", () => {
                 mockGetValue(true);
                 const toggle = getToggle();
 
-                await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
+                await waitFor(() => expect(toggle).not.toBeDisabled());
                 fireEvent.click(toggle);
                 expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, false);
             });
@@ -172,8 +172,8 @@ describe("PreferencesUserSettingsTab", () => {
             it("is forcibly enabled", async () => {
                 const toggle = getToggle();
                 await waitFor(() => {
-                    expect(toggle).toHaveAttribute("aria-checked", "true");
-                    expect(toggle).toHaveAttribute("aria-disabled", "true");
+                    expect(toggle).toBeChecked();
+                    expect(toggle).toBeDisabled();
                 });
             });
 
@@ -181,7 +181,8 @@ describe("PreferencesUserSettingsTab", () => {
                 mockGetValue(true);
                 const toggle = getToggle();
 
-                await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "true"));
+                await waitFor(() => expect(toggle).toBeDisabled());
+                console.log(toggle.innerHTML);
                 fireEvent.click(toggle);
                 expect(SettingsStore.setValue).not.toHaveBeenCalled();
             });

test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx

@@ -113,10 +113,10 @@ describe("<VoiceUserSettingsTab />", () => {
     });
 
     it("renders audio processing settings", () => {
-        const { getByTestId } = render(getComponent());
-        expect(getByTestId("voice-auto-gain")).toBeTruthy();
-        expect(getByTestId("voice-noise-suppression")).toBeTruthy();
-        expect(getByTestId("voice-echo-cancellation")).toBeTruthy();
+        const { getByRole } = render(getComponent());
+        expect(getByRole("switch", { name: "Automatically adjust the microphone volume" })).toBeTruthy();
+        expect(getByRole("switch", { name: "Noise suppression" })).toBeTruthy();
+        expect(getByRole("switch", { name: "Echo cancellation" })).toBeTruthy();
     });
 
     it("sets and displays audio processing settings", () => {

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

@@ -15,24 +15,24 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
         <div
           class="mx_SettingsSection_subSections"
         >
-          <div
-            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
-            data-testid="themePanel"
+          <form
+            class="_root_19upo_16"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+              data-testid="themePanel"
             >
-              <h3
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              <div
+                class="mx_SettingsSubsectionHeading"
               >
-                Theme
-              </h3>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
-            >
-              <form
-                class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+                <h3
+                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+                >
+                  Theme
+                </h3>
+              </div>
+              <div
+                class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
               >
                 <div
                   class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
@@ -136,15 +136,15 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </label>
                   </div>
                 </div>
-              </form>
+              </div>
+              <div
+                class="_separator_7ckbw_8"
+                data-kind="primary"
+                data-orientation="horizontal"
+                role="separator"
+              />
             </div>
-            <div
-              class="_separator_7ckbw_8"
-              data-kind="primary"
-              data-orientation="horizontal"
-              role="separator"
-            />
-          </div>
+          </form>
           <div
             class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
             data-testid="layoutPanel"
@@ -561,6 +561,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         class="_input_19o42_24"
                         id="radix-«ru»"
                         name="compactLayout"
+                        role="switch"
                         title=""
                         type="checkbox"
                       />

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

@@ -34,8 +34,8 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
     <div
       class="mx_SettingsTab_sections"
     >
-      <div
-        class="mx_SetIntegrationManager"
+      <form
+        class="_root_19upo_16 mx_SetIntegrationManager"
         data-testid="mx_SetIntegrationManager"
       >
         <div
@@ -51,6 +51,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
             </h3>
             <h4
               class="mx_Heading_h4"
+              id="mx_SetIntegrationManager_ManagerName"
             >
               (scalar.vector.im)
             </h4>
@@ -58,6 +59,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
         </div>
         <div
           class="mx_SettingsSubsection_text"
+          id="mx_SetIntegrationManager_BodyText"
         >
           <span>
             Use an integration manager 
@@ -72,92 +74,92 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
         >
           Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
         </div>
-        <form
-          class="_root_19upo_16"
+        <div
+          class="_inline-field_19upo_32"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field-control_19upo_44"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_container_19o42_10"
             >
+              <input
+                checked=""
+                class="_input_19o42_24"
+                id="«r0»"
+                role="switch"
+                type="checkbox"
+              />
               <div
-                class="_container_19o42_10"
-              >
-                <input
-                  checked=""
-                  class="_input_19o42_24"
-                  id="mx_SetIntegrationManager_Toggle"
-                  role="switch"
-                  type="checkbox"
-                />
-                <div
-                  class="_ui_19o42_34"
-                />
-              </div>
-            </div>
-            <div
-              class="_inline-field-body_19upo_38"
-            >
-              <label
-                class="_label_19upo_59"
-                for="mx_SetIntegrationManager_Toggle"
-              >
-                Enable the integration manager
-              </label>
+                class="_ui_19o42_34"
+              />
             </div>
           </div>
-        </form>
-      </div>
-      <div
-        class="mx_SettingsSection"
-      >
-        <h2
-          class="mx_Heading_h3"
-        >
-          Encryption
-        </h2>
-        <div
-          class="mx_SettingsSection_subSections"
-        >
           <div
-            class="mx_SettingsSubsection"
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="«r0»"
+            >
+              Enable the integration manager
+            </label>
+          </div>
+        </div>
+      </form>
+      <form
+        class="_root_19upo_16"
+      >
+        <div
+          class="mx_SettingsSection"
+        >
+          <h2
+            class="mx_Heading_h3"
+          >
+            Encryption
+          </h2>
+          <div
+            class="mx_SettingsSection_subSections"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h3
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Message search
-              </h3>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
+              class="mx_SettingsSubsection"
             >
               <div
-                class="mx_SettingsSubsection_text"
+                class="mx_SettingsSubsectionHeading"
               >
-                <span>
-                  Element can't securely cache encrypted messages locally while running in a web browser. Use 
-                  <a
-                    class="mx_ExternalLink"
-                    href="https://element.io/get-started"
-                    rel="noreferrer noopener"
-                    target="_blank"
-                  >
-                    Element Desktop
-                    <i
-                      class="mx_ExternalLink_icon"
-                    />
-                  </a>
-                   for encrypted messages to appear in search results.
-                </span>
+                <h3
+                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+                >
+                  Message search
+                </h3>
+              </div>
+              <div
+                class="mx_SettingsSubsection_content"
+              >
+                <div
+                  class="mx_SettingsSubsection_text"
+                >
+                  <span>
+                    Element can't securely cache encrypted messages locally while running in a web browser. Use 
+                    <a
+                      class="mx_ExternalLink"
+                      href="https://element.io/get-started"
+                      rel="noreferrer noopener"
+                      target="_blank"
+                    >
+                      Element Desktop
+                      <i
+                        class="mx_ExternalLink_icon"
+                      />
+                    </a>
+                     for encrypted messages to appear in search results.
+                  </span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </form>
       <div
         class="mx_SettingsSection"
       >
@@ -213,7 +215,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                     >
                       <label
                         class="_label_19upo_59"
-                        for="radix-«r1»"
+                        for="radix-«r2»"
                       >
                         Enter a new identity server
                       </label>
@@ -222,7 +224,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                       >
                         <input
                           class="_control_sqdq4_10"
-                          id="radix-«r1»"
+                          id="radix-«r2»"
                           name="input"
                           placeholder=""
                           title=""
@@ -235,6 +237,9 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               </fieldset>
             </div>
           </div>
+          <form
+            class="_root_19upo_16"
+          />
         </div>
       </div>
       <div

test/unit-tests/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -150,7 +150,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 await toggleGuestAccessSection(component);
                 const guestAccessInput = getGuestAccessToggle(component);
 
-                expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("true");
+                expect(guestAccessInput).toBeChecked();
 
                 fireEvent.click(guestAccessInput!);
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
@@ -162,7 +162,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 );
 
                 // toggled off
-                expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("false");
+                expect(guestAccessInput).not.toBeChecked();
             });
 
             it("renders error message when update fails", async () => {
@@ -184,7 +184,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
                 await toggleGuestAccessSection(component);
 
-                expect(getGuestAccessToggle(component)?.getAttribute("aria-disabled")).toEqual("true");
+                expect(getGuestAccessToggle(component)).toBeDisabled();
             });
         });
 
@@ -194,7 +194,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 const component = getComponent({ space });
 
                 // toggle off because space settings is != WorldReadable
-                expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
+                expect(getHistoryVisibilityToggle(component)).not.toBeChecked();
             });
 
             it("updates history visibility on toggle", () => {
@@ -202,7 +202,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 const component = getComponent({ space });
 
                 // toggle off because space settings is != WorldReadable
-                expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
+                expect(getHistoryVisibilityToggle(component)).not.toBeChecked();
 
                 fireEvent.click(getHistoryVisibilityToggle(component)!);
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
@@ -212,7 +212,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                     "",
                 );
 
-                expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("true");
+                expect(getHistoryVisibilityToggle(component)).toBeChecked();
             });
 
             it("renders error message when history update fails", async () => {
@@ -231,7 +231,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule);
                 (space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false);
                 const component = getComponent({ space });
-                expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-disabled")).toEqual("true");
+                expect(getHistoryVisibilityToggle(component)).toBeDisabled();
             });
         });
 

test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -1,18 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest access section toggle 1`] = `
-<div
-  aria-checked="true"
-  aria-disabled="false"
-  aria-labelledby="mx_LabelledToggleSwitch_«rb»"
-  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+<input
+  checked=""
+  class="_input_19o42_24"
+  id="«rh»"
   role="switch"
-  tabindex="0"
->
-  <div
-    class="mx_ToggleSwitch_ball"
-  />
-</div>
+  type="checkbox"
+/>
 `;
 
 exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
@@ -112,42 +107,53 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
               >
                 Anyone can find and join.
               </span>
-              <div
-                class="mx_SettingsTab_toggleWithDescription"
+              <form
+                class="_root_19upo_16"
               >
                 <div
-                  class="mx_SettingsFlag"
+                  class="_inline-field_19upo_32"
                 >
-                  <span
-                    class="mx_SettingsFlag_label"
+                  <div
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch_«r0»"
+                      class="_container_19o42_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_19o42_24"
+                        id="«r0»"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_19o42_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="«r0»"
                     >
                       Preview Space
-                    </div>
-                  </span>
-                  <div
-                    aria-checked="true"
-                    aria-disabled="false"
-                    aria-labelledby="mx_LabelledToggleSwitch_«r0»"
-                    class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                    role="switch"
-                    tabindex="0"
-                  >
-                    <div
-                      class="mx_ToggleSwitch_ball"
-                    />
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id="radix-«r2»"
+                    >
+                      Allow people to preview your space before they join.
+                    </span>
                   </div>
                 </div>
                 <p>
-                  Allow people to preview your space before they join.
-                  <br />
                   <strong>
                     Recommended for public spaces.
                   </strong>
                 </p>
-              </div>
+              </form>
             </div>
           </fieldset>
         </div>

yarn.lock

@@ -3866,10 +3866,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-5.0.1.tgz#341edcc860a7200ad38ba1f4a0a8f5f43ff5174f"
   integrity sha512-PbxhjfHsVGBmrioM7iZ1wgcG8KIZRcnHIJhhEpWascWQwJ9lRm1K7ixV7sjwPWYQlmweSUB8jz4qmp7VTrxWng==
 
-"@vector-im/compound-web@^8.1.2":
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.1.2.tgz#a8af8681b442e63e07b8f25204528b1b022c1db2"
-  integrity sha512-F9UyQBwRThwju+STz84iJy6JGWQ7UIxaprstfsGpiyS/3ror4E6m/mfwbrNjT0l3fhrhk6sRiTAMlcBRzYgdMQ==
+"@vector-im/compound-web@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.2.0.tgz#64193ce8d0c62a99e566cdb3bf4602160575ef3e"
+  integrity sha512-we+EQ/pw2YCEl7EMPdpeqP3HZpnQcCuOHoiAYKFwF4doXBDENLpTyA8ZdX0cViT3sqvExPT0RHZ2Nlt5Y6dQNQ==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.1"
@@ -3883,6 +3883,7 @@
 
 "@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.4-fb0001dea01010a1e3ffc7042596e2d001ce9389-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
+  uid ""
 
 "@vector-im/matrix-wysiwyg@2.38.4":
   version "2.38.4"