Update settings toggles to use consistent design across app. (#30169)

* Use EditInPlace for identity server picker.

* Update test

* Add a test for setting an ID server.

* fix tests

* Reformat other :not sections

* forgot a comma

* Update Apperance settings to use toggle switches.

* Remove unused checkbox setting.

* Remove unused import.

* Update tests

* lint

* update apperance screenshot

* Begin replacing settings

* Refactor RoomPublishSetting

* Remove LabelledToggleSwitch

* Refactor SettingsFlag to use SettingsToggleInput

* Refactor CreateRoomDialog to use SettingsToggleInput

* Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput

* Update DevtoolsDialog

* Refactor ReportRoomDialog to use SettingsToggle

* Update RoomUpgradeWarningDialog to use SettingsToggleInput

* Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput

* Update trivial switchovers

* Update Notifications settings to use SettingsFlag where possible

* Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning

* revert changes to field

* Updated screenshots

* Prevent accidental submits

* Replace test ID tests

* Create new snapshot tests

* Add screenshot test for DeclineAndBlockDialog

* Add screenshot for create room dialog.

* Add devtools test

* Add upgrade rooms test

* Add widget capabilites prompt test

* Fix spec

* Add a test for the live location sharing prompt.

* fix copyright

* Add tests for notification settings

* Add tests for user security tab.

* Add test for room security tab.

* Add test for video settings tab.

* remove .only

* Test creating a video room

* Mask the IM name in the header.

* Add spaces vis tab test.

* Fixup unit tests to check correct attributes.

* Various fixes to components for tests.

* lint

* Update compound

* update setting names

* Cleanup tests

prettier

Updates some more playwright tests

Update more snapshots

Update switch

more fixes

drop .only

last screenshot round

fix video room flake

Remove console.logs

Remove roomId from devtools view.

lint

final screenshot

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/

* lint lint

* Update headings

* fix snap

* remove unused

* update snapshot

* update tab screenshot

* Update snapshots

* Fix margins

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -428,7 +428,9 @@ test.describe("Room list", () => {
             await app.settings.closeDialog();
 
             await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
             await app.settings.closeDialog();
 
             // Switch to the other room to avoid the notification to be cleared

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

@@ -38,12 +38,11 @@ test.describe("Room Directory", () => {
             // Publish into the public rooms directory
             const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
             await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue(`#gaming:${user.homeServer}`);
-            const checkbox = publishedAddresses
+            const checkbox = publishedAddresses.getByRole("switch", {
-                .locator(".mx_SettingsFlag", {
+                name: `Publish this room to the public in ${user.homeServer}'s room directory?`,
-                    hasText: `Publish this room to the public in ${user.homeServer}'s room directory?`,
+            });
-                })
+            // .click() rather than .check() as checking happens after publish
-                .getByRole("switch");
+            await checkbox.click();
-            await checkbox.check();
             await expect(checkbox).toBeChecked();
 
             await app.closeDialog();

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.getByRole("switch", { name: "Use bundled emoji font" }).click();
-        await tab.getByLabel("Use a system 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/appearance-user-settings-tab/index.ts

@@ -84,7 +84,7 @@ class Helpers {
     /**
      * Return the system theme toggle
      */
-    getMatchSystemThemeCheckbox() {
+    getMatchSystemThemeSwitch() {
         return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
     }
 
@@ -216,9 +216,9 @@ class Helpers {
     }
 
     /**
-     * Return the compact layout checkbox
+     * Return the compact layout switch
      */
-    getCompactLayoutCheckbox() {
+    getCompactLayoutSwitch() {
         return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
     }
 

playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts

@@ -40,9 +40,9 @@ test.describe("Appearance user settings tab", () => {
         );
 
         test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
+            await expect(util.getCompactLayoutSwitch()).not.toBeChecked();
 
-            await util.getCompactLayoutCheckbox().click();
+            await util.getCompactLayoutSwitch().click();
             await util.assertCompactLayout();
         });
 
@@ -52,11 +52,11 @@ test.describe("Appearance user settings tab", () => {
             user,
             util,
         }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).not.toBeDisabled();
 
             // Select the bubble layout, which should disable the compact layout checkbox
             await util.getBubbleLayout().click();
-            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).toBeDisabled();
         });
     });
 });

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -25,7 +25,7 @@ test.describe("Appearance user settings tab", () => {
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
                 // Assert that 'Match system theme' is not checked
-                await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+                await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
 
                 // Assert that the light theme is selected
                 await expect(util.getLightTheme()).toBeChecked();
@@ -41,7 +41,7 @@ test.describe("Appearance user settings tab", () => {
             "should disable the themes when the system theme is clicked",
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
-                await util.getMatchSystemThemeCheckbox().click();
+                await util.getMatchSystemThemeSwitch().click();
 
                 // Assert that the themes are disabled
                 await expect(util.getLightTheme()).toBeDisabled();

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -184,11 +184,9 @@ test.describe("Sliding Sync", () => {
 
     test("should update user settings promptly", async ({ page, app }) => {
         await app.settings.openUserSettings("Preferences");
-        const locator = page.locator(".mx_SettingsFlag").filter({ hasText: "Show timestamps in 12 hour format" });
+        const locator = page.getByRole("switch", { name: "Show timestamps in 12 hour format" });
         await expect(locator).toBeVisible();
-        await expect(locator.locator(".mx_ToggleSwitch_on")).not.toBeAttached();
+        await locator.check();
-        await locator.locator(".mx_ToggleSwitch_ball").click();
-        await expect(locator.locator(".mx_ToggleSwitch_on")).toBeAttached();
     });
 
     test("should send subscribe_rooms on room switch if room not already subscribed", async ({ page, app }) => {

res/css/components/views/settings/shared/_SettingsSubsection.pcss

@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsSubsection_content {
     width: 100%;
     display: grid;
-    gap: $spacing-8;
+    gap: var(--cpd-space-4x);
     /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
     grid-template-columns: minmax(0, 1fr);
     justify-items: flex-start;

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -57,16 +57,9 @@ Please see LICENSE files in the repository root for full details.
     width: 100%;
 }
 
-/* needed to make the alias field only grow as wide as needed */
-/* as opposed to full width */
 .mx_CreateRoomDialog_aliasContainer {
+    /* needed to make the alias field only grow as wide as needed as opposed to full width */
     display: flex;
-    /* put margin on container so it can collapse with siblings */
-    margin: 24px 0 10px;
-
-    .mx_RoomAliasField {
-        margin: 0;
-    }
 }
 
 .mx_CreateRoomDialog {
@@ -102,6 +95,14 @@ Please see LICENSE files in the repository root for full details.
         margin-top: 24px;
     }
 
+    .mx_Field {
+        margin: 0;
+    }
+
+    form {
+        gap: var(--cpd-space-4x);
+    }
+
     p {
         margin: 0 85px 0 0;
         font-size: $font-12px;

res/css/views/dialogs/_DevtoolsDialog.pcss

@@ -22,6 +22,10 @@ Please see LICENSE files in the repository root for full details.
             margin-bottom: 0;
         }
     }
+
+    .mx_DevTools_toggleForm {
+        gap: var(--cpd-space-2x);
+    }
 }
 
 .mx_DevTools_toolHeading {

res/css/views/settings/_NotificationSettings2.pcss

@@ -6,20 +6,24 @@ 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.
 */
 
-.mx_NotificationSettings2 {
+.mx_SettingsTab .mx_NotificationSettings2 {
     .mx_SettingsSection_subSections {
         color: $primary-content;
         gap: 32px;
         display: flex;
         flex-direction: column;
+
+        > form {
+            gap: 32px;
+            display: flex;
+            flex-direction: column;
+        }
     }
 
     .mx_SettingsSubsection_description {
         margin-bottom: 20px;
 
         .mx_SettingsSubsection_text {
-            font-size: 1.2rem;
-
             .mx_NotificationBadge {
                 vertical-align: baseline;
                 display: inline-flex;
@@ -35,14 +39,6 @@ Please see LICENSE files in the repository root for full details.
         justify-content: stretch;
     }
 
-    .mx_SettingsBanner {
-        margin-bottom: 32px;
-    }
-
-    .mx_NotificationSettings2_flags {
-        gap: 4px;
-    }
-
     .mx_StyledRadioButton_content {
         margin-left: 10px;
         margin-right: 10px;

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 */
+    /* Line up with Settings field toggle button */
-    margin-inline-start: calc($font-16px + 10px);
+    margin-inline-start: 0;
 }

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

@@ -35,3 +35,8 @@ Please see LICENSE files in the repository root for full details.
         color: $alert;
     }
 }
+
+form.mx_SecurityUserSettingsTab_posthogSection {
+    /* Inhibit compound spacing here as it clashes with pre-compound UI */
+    display: contents !important;
+}

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";
 import { UIFeature } from "../../../settings/UIFeature";
 
 interface IProps {
@@ -226,8 +232,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         this.setState({ joinRule });
     };
 
-    private onEncryptedChange = (isEncrypted: boolean): void => {
+    private onEncryptedChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ isEncrypted });
+        this.setState({ isEncrypted: evt.target.checked });
     };
 
     private onAliasChange = (alias: string): void => {
@@ -238,8 +244,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
     };
 
-    private onNoFederateChange = (noFederate: boolean): void => {
+    private onNoFederateChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ noFederate });
+        this.setState({ noFederate: evt.target.checked });
     };
 
     private onNameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
@@ -248,8 +254,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         return result;
     };
 
-    private onIsPublicKnockRoomChange = (isPublicKnockRoom: boolean): void => {
+    private onIsPublicKnockRoomChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ isPublicKnockRoom });
+        this.setState({ isPublicKnockRoom: evt.target.checked });
     };
 
     private static validateRoomName = withValidation({
@@ -336,11 +342,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}
                 />
             );
         }
@@ -360,16 +367,14 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                 microcopy = _t("settings|security|e2ee_default_disabled_warning");
             }
             e2eeSection = (
-                <React.Fragment>
+                <SettingsToggleInput
-                    <LabelledToggleSwitch
+                    name="encryption-toggle"
-                        label={_t("create_room|encryption_label")}
+                    label={_t("create_room|encryption_label")}
-                        onChange={this.onEncryptedChange}
+                    onChange={this.onEncryptedChange}
-                        value={this.state.isEncrypted}
+                    checked={this.state.isEncrypted}
-                        className="mx_CreateRoomDialog_e2eSwitch" // for end-to-end tests
+                    disabled={!this.state.canChangeEncryption}
-                        disabled={!this.state.canChangeEncryption}
+                    helpMessage={microcopy}
-                    />
+                />
-                    <p>{microcopy}</p>
-                </React.Fragment>
             );
         }
 
@@ -399,8 +404,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                 title={title}
                 screenName="CreateRoom"
             >
-                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
+                <div className="mx_Dialog_content">
-                    <div className="mx_Dialog_content">
+                    <Form.Root onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                         <Field
                             ref={this.nameField}
                             label={_t("common|name")}
@@ -416,21 +421,24 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             className="mx_CreateRoomDialog_topic"
                         />
 
-                        <JoinRuleDropdown
+                        <div>
-                            label={_t("create_room|room_visibility_label")}
+                            <JoinRuleDropdown
-                            labelInvite={_t("create_room|join_rule_invite")}
+                                label={_t("create_room|room_visibility_label")}
-                            labelKnock={
+                                labelInvite={_t("create_room|join_rule_invite")}
-                                this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
+                                labelKnock={
-                            }
+                                    this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
-                            labelPublic={this.allowCreatingPublicRooms ? _t("common|public_room") : undefined}
+                                }
-                            labelRestricted={
+                                labelPublic={this.allowCreatingPublicRooms ? _t("common|public_room") : undefined}
-                                this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
+                                labelRestricted={
-                            }
+                                    this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
-                            value={this.state.joinRule}
+                                }
-                            onChange={this.onJoinRuleChange}
+                                value={this.state.joinRule}
-                        />
+                                onChange={this.onJoinRuleChange}
+                            />
+
+                            {publicPrivateLabel}
+                        </div>
 
-                        {publicPrivateLabel}
                         {visibilitySection}
                         {e2eeSection}
                         {aliasField}
@@ -439,18 +447,20 @@ 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>
+                                z<p>{federateLabel}</p>
                             </details>
                         )}
-                    </div>
+                    </Form.Root>
-                </form>
+                </div>
                 <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}
+                    onChange={onIgnoreUserChanged}
-                    caption={_t("decline_invitation_dialog|ignore_user_help")}
+                    helpMessage={_t("decline_invitation_dialog|ignore_user_help")}
-                    value={ignoreUser}
+                    checked={ignoreUser}
                 />
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="report-room"
                     label={_t("action|report_room")}
-                    onChange={setShouldReport}
+                    onChange={onShouldReportChanged}
-                    caption={_t("decline_invitation_dialog|report_room_description")}
+                    helpMessage={_t("decline_invitation_dialog|report_room_description")}
-                    value={shouldReport}
+                    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";
@@ -101,13 +102,19 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                         })}
                     </div>
                 ))}
-                <div>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                    className="mx_DevTools_toggleForm"
+                >
                     <h2 className="mx_DevTools_toolHeading">{_t("common|options")}</h2>
                     <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}
+                    checked={leaveRoom}
-                    onChange={setLeaveRoom}
+                    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 => {
+    private onInviteUsersToggle: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ inviteUsersToNewRoom });
+        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
+                <Form.Root
-                    value={this.state.inviteUsersToNewRoom}
+                    onSubmit={(evt) => {
-                    onChange={this.onInviteUsersToggle}
+                        evt.preventDefault();
-                    label={_t("room_settings|advanced|upgrade_warning_dialog_invite_label")}
+                        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 => {
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ rememberSelection: newVal });
+        this.setState({ rememberSelection: evt.target.checked });
     };
 
     private onSubmit = async (): Promise<void> => {
@@ -117,7 +117,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}
@@ -127,16 +127,16 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
                             onPrimaryButtonClick={this.onSubmit}
                             onCancel={this.onReject}
                             additive={
-                                <LabelledToggleSwitch
+                                <SettingsToggleInput
-                                    value={this.state.rememberSelection}
+                                    name="remember-selection"
-                                    toggleInFront={true}
+                                    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 => {
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
-        this.setState({ rememberSelection: newVal });
+        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
+                        <Form.Root
-                            value={this.state.rememberSelection}
+                            onSubmit={(evt) => {
-                            toggleInFront={true}
+                                evt.preventDefault();
-                            onChange={this.onRememberSelectionChange}
+                                evt.stopPropagation();
-                            label={_t("widget|open_id_permissions_dialog|remember_selection")}
+                            }}
-                        />
+                        >
+                            <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/dialogs/devtools/RoomState.tsx

@@ -7,9 +7,10 @@ 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, { useContext, useEffect, useMemo, useState } from "react";
+import React, { type ChangeEventHandler, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { type IContent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t, _td } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
@@ -19,7 +20,6 @@ import FilteredList from "./FilteredList";
 import Spinner from "../../elements/Spinner";
 import SyntaxHighlight from "../../elements/SyntaxHighlight";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 
 export const StateEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const context = useContext(DevtoolsContext);
@@ -116,6 +116,10 @@ const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBa
     const [event, setEvent] = useState<MatrixEvent | null>(null);
     const [history, setHistory] = useState(false);
     const [showEmptyState, setShowEmptyState] = useState(true);
+    const onEmptyStateToggled = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setShowEmptyState(e.target.checked),
+        [setShowEmptyState],
+    );
 
     const events = context.room.currentState.events.get(eventType)!;
 
@@ -157,11 +161,19 @@ const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBa
                         <StateEventButton key={stateKey} label={stateKey} onClick={() => setEvent(ev)} />
                     ))}
             </FilteredList>
-            <LabelledToggleSwitch
+            <Form.Root
-                label={_t("devtools|show_empty_content_events")}
+                onSubmit={(evt) => {
-                onChange={setShowEmptyState}
+                    evt.preventDefault();
-                value={showEmptyState}
+                    evt.stopPropagation();
-            />
+                }}
+            >
+                <SettingsToggleInput
+                    name="empty_state_toggle"
+                    label={_t("devtools|show_empty_content_events")}
+                    onChange={onEmptyStateToggled}
+                    checked={showEmptyState}
+                />
+            </Form.Root>
         </BaseTool>
     );
 };

src/components/views/dialogs/devtools/Users.tsx

@@ -12,11 +12,11 @@
 import React, { type JSX, useContext, useState } from "react";
 import { type Device, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
 import FilteredList from "./FilteredList";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import CopyableText from "../../elements/CopyableText";
 import E2EIcon from "../../rooms/E2EIcon";
@@ -57,11 +57,21 @@ export const UserList: React.FC<Pick<IDevtoolsProps, "onBack">> = ({ onBack }) =
                     <UserButton key={member.userId} member={member} onClick={() => setMember(member)} />
                 ))}
             </FilteredList>
-            <LabelledToggleSwitch
+            <Form.Root
-                label={_t("devtools|only_joined_members")}
+                onSubmit={(evt) => {
-                onChange={setShowOnlyJoined}
+                    evt.preventDefault();
-                value={showOnlyJoined}
+                    evt.stopPropagation();
-            />
+                }}
+            >
+                <SettingsToggleInput
+                    name="only_joined_members"
+                    label={_t("devtools|only_joined_members")}
+                    onChange={(e) => {
+                        setShowOnlyJoined(e.target.checked);
+                    }}
+                    checked={showOnlyJoined}
+                />
+            </Form.Root>
         </BaseTool>
     );
 };

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> => {
+    private onChange = async (evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
-        await this.save(checked);
+        const newValue = evt.target.checked;
-        this.setState({ value: checked });
+        try {
-        this.props.onChange?.(checked);
+            await this.save(newValue);
-    };
+        } catch (ex) {
-
+            logger.info(`Failed to save setting ${this.props.name}`, ex);
-    private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+            return;
-        this.onChange(e.target.checked);
+        }
+        this.setState({ value: newValue });
+        this.props.onChange?.(newValue);
     };
 
     private save = async (val?: boolean): Promise<void> => {
@@ -101,45 +101,28 @@ 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);
-
+        const helpMessage = shouldWarn
-        if (this.props.useCheckbox) {
+            ? _t(
-            return (
+                  "settings|warning",
-                <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={disabled}>
+                  {},
-                    {label}
+                  {
-                </StyledCheckbox>
+                      w: (sub) => <span className="mx_SettingsTab_microcopy_warning">{sub}</span>,
-            );
+                      description,
-        } else {
+                  },
-            return (
+              )
-                <div className="mx_SettingsFlag">
+            : description;
-                    <label className="mx_SettingsFlag_label" htmlFor={this.id}>
+        const disabledMessage = SettingsStore.disabledMessage(this.props.name);
-                        <span className="mx_SettingsFlag_labelText">{label}</span>
+        return (
-                        {description && (
+            <SettingsToggleInput
-                            <div className="mx_SettingsFlag_microcopy">
+                id={this.id}
-                                {shouldWarn
+                checked={this.state.value}
-                                    ? _t(
+                onChange={disabledMessage ? undefined : this.onChange}
-                                          "settings|warning",
+                name={this.props.name}
-                                          {},
+                disabled={disabled}
-                                          {
+                label={label ?? this.props.name}
-                                              w: (sub) => (
+                helpMessage={helpMessage as string}
-                                                  <span className="mx_SettingsTab_microcopy_warning">{sub}</span>
+                disabledMessage={disabledMessage}
-                                              ),
+            />
-                                              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>
-            );
-        }
     }
 }

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,23 @@ 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],
+    );
+
     return (
         <div data-testid="location-picker-enable-live-share" className="mx_EnableLiveShare">
             <StyledLiveBeaconIcon className="mx_EnableLiveShare_icon" />
@@ -27,22 +43,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
+            <Form.Root onSubmit={onSubmitForm}>
-                data-testid="enable-live-share-toggle"
+                <SettingsToggleInput
-                value={isEnabled}
+                    name="enable-live-share-toggle"
-                onChange={setEnabled}
+                    checked={isEnabled}
-                label={_t("location_sharing|live_toggle_label")}
+                    onChange={onEnabledChanged}
-            />
+                    label={_t("location_sharing|live_toggle_label")}
-            <AccessibleButton
+                />
-                data-testid="enable-live-share-submit"
+                <Button className="mx_EnableLiveShare_button" kind="primary" disabled={!isEnabled}>
-                className="mx_EnableLiveShare_button"
+                    {_t("action|ok")}
-                element="button"
+                </Button>
-                kind="primary"
+            </Form.Root>
-                onClick={onSubmit}
-                disabled={!isEnabled}
-            >
-                {_t("action|ok")}
-            </AccessibleButton>
         </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 => {
+    private onRoomPublishChange: ChangeEventHandler<HTMLInputElement> = async (evt): Promise<void> => {
-        const valueBefore = this.state.isRoomPublished;
+        const newValue = evt.target.checked;
-        const newValue = !valueBefore;
+        this.setState({ busy: true });
-        this.setState({ isRoomPublished: newValue });
         const client = MatrixClientPeg.safeGet();
 
-        client
+        try {
-            .setRoomDirectoryVisibility(this.props.roomId, newValue ? Visibility.Public : Visibility.Private)
+            await client.setRoomDirectoryVisibility(
-            .catch(() => {
+                this.props.roomId,
-                this.showError();
+                newValue ? Visibility.Public : Visibility.Private,
-                // Roll back the local echo on the change
+            );
-                this.setState({ isRoomPublished: valueBefore });
+            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 =
+        let disabledMessage;
-            (DirectoryCustomisations.requireCanonicalAliasAccessToPublish?.() === false ||
+        if (!isRoomPublishable) {
-                this.props.canSetCanonicalAlias) &&
+            disabledMessage = _t("room_settings|general|publish_warn_invite_only");
-            (isRoomPublishable || this.state.isRoomPublished);
+        } else if (!canSetCanonicalAlias) {
+            disabledMessage = _t("room_settings|general|publish_warn_no_canonical_permission");
+        }
+
+        const enabled = canSetCanonicalAlias && (isRoomPublishable || this.state.isRoomPublished);
 
         return (
-            <LabelledToggleSwitch
+            <SettingsToggleInput
-                value={this.state.isRoomPublished}
+                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> => {
+    private onEmailNotificationsChanged = async (email: string, evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
-        await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, checked);
+        const { checked } = evt.target;
-    };
-
-    private onEmailNotificationsChanged = async (email: string, checked: boolean): Promise<void> => {
         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
+            <SettingsToggleInput
-                data-testid="notif-master-switch"
+                checked={!this.isInhibited}
-                value={!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
+                <SettingsToggleInput
-                    data-testid="notif-email-switch"
+                    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
+                <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
-                    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}
-                />
 
                 {this.state.deviceNotificationsEnabled && (
                     <>
-                        <LabelledToggleSwitch
+                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
-                            data-testid="notif-setting-notificationsEnabled"
+                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
-                            value={this.state.desktopNotifications}
+                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
-                            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}
-                        />
                     </>
                 )}
 

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>
+                <SettingsToggleInput
-                    <InlineField
+                    name="enable_im"
-                        name="enable_im"
+                    label={_t("integration_manager|toggle_label")}
-                        control={
+                    checked={this.state.provisioningEnabled}
-                            <ToggleInput
+                    onChange={this.onProvisioningToggled}
-                                role="switch"
+                />
-                                id="mx_SetIntegrationManager_Toggle"
+            </Form.Root>
-                                checked={this.state.provisioningEnabled}
-                                onChange={this.onProvisioningToggled}
-                            />
-                        }
-                    >
-                        <Label htmlFor="mx_SetIntegrationManager_Toggle">
-                            {_t("integration_manager|toggle_label")}
-                        </Label>
-                    </InlineField>
-                </Root>
-            </div>
         );
     }
 }

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

@@ -86,6 +86,7 @@ export function NotificationPusherSettings(): JSX.Element {
             <SettingsSubsection
                 className="mx_NotificationPusherSettings"
                 heading={_t("settings|notifications|email_section")}
+                legacy={false}
             >
                 <SettingsSubsectionText className="mx_NotificationPusherSettings_description">
                     {_t("settings|notifications|email_description")}
@@ -109,7 +110,7 @@ export function NotificationPusherSettings(): JSX.Element {
                 </SettingsIndent>
             </SettingsSubsection>
             {notificationTargets.length > 0 && (
-                <SettingsSubsection heading={_t("settings|notifications|push_targets")}>
+                <SettingsSubsection heading={_t("settings|notifications|push_targets")} legacy={false}>
                     <ul>
                         {pushers
                             .filter((it) => it.kind !== "email")

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 { 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";
@@ -71,10 +69,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;
@@ -118,38 +112,25 @@ export default function NotificationSettings2(): JSX.Element {
             )}
             <SettingsSection>
                 <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
-                    <LabelledToggleSwitch
+                    <SettingsToggleInput
+                        name="enable_notifications_account"
                         label={_t("settings|notifications|enable_notifications_account")}
-                        value={!settings.globalMute}
+                        checked={!settings.globalMute}
                         disabled={disabled}
-                        onChange={(value) => {
+                        onChange={(evt) => {
                             reconcile({
                                 ...model!,
-                                globalMute: !value,
+                                globalMute: !evt.target.checked,
                             });
                         }}
                     />
-                    <LabelledToggleSwitch
+                    <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
-                        label={_t("settings|notifications|enable_desktop_notifications_session")}
+                    <SettingsFlag
-                        value={desktopNotifications}
+                        name="notificationBodyEnabled"
-                        onChange={(value) =>
-                            SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                    <LabelledToggleSwitch
                         label={_t("settings|notifications|desktop_notification_message_preview")}
-                        value={desktopShowBody}
+                        level={SettingLevel.DEVICE}
-                        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)
-                        }
                     />
+                    <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
                 </div>
                 <SettingsSubsection
                     heading={
@@ -317,6 +298,7 @@ export default function NotificationSettings2(): JSX.Element {
                         label={_t("settings|notifications|notify_mention", {
                             mxid: cli.getUserId()!,
                         })}
+                        id="mx_NotificationSettings2_MentionCheckbox"
                         value={settings.mentions.user}
                         disabled={disabled}
                         onChange={(value) => {

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
+    const content = (
-        {...rest}
+        <div
-        className={classNames("mx_SettingsSubsection", {
+            {...rest}
-            mx_SettingsSubsection_newUi: !legacy,
+            className={classNames("mx_SettingsSubsection", {
-        })}
+                mx_SettingsSubsection_newUi: !legacy,
-    >
+            })}
-        {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
+        >
-        {!!description && (
+            {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
-            <div className="mx_SettingsSubsection_description">
+            {!!description && (
-                <SettingsSubsectionText>{description}</SettingsSubsectionText>
+                <div className="mx_SettingsSubsection_description">
-            </div>
+                    <SettingsSubsectionText>{description}</SettingsSubsectionText>
-        )}
+                </div>
-        {!!children && (
+            )}
-            <div
+            {!!children && (
-                className={classNames("mx_SettingsSubsection_content", {
+                <div
-                    mx_SettingsSubsection_contentStretch: !!stretchContent,
+                    className={classNames("mx_SettingsSubsection_content", {
-                    mx_SettingsSubsection_noHeading: !heading && !description,
+                        mx_SettingsSubsection_contentStretch: !!stretchContent,
-                    mx_SettingsSubsection_content_newUi: !legacy,
+                        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}
+                {content}
-            </div>
+            </Form.Root>
-        )}
+        );
-        {!legacy && <Separator />}
+    }
-    </div>
+    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")}>
+                <Form.Root
-                    <RoomProfileSettings roomId={room.roomId} />
+                    onSubmit={(evt) => {
-                </SettingsSection>
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("common|general")}>
+                        <RoomProfileSettings roomId={room.roomId} />
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("room_settings|general|aliases_section")}>
+                    <SettingsSection heading={_t("room_settings|general|aliases_section")}>
-                    <AliasSettings
+                        <AliasSettings
-                        roomId={room.roomId}
+                            roomId={room.roomId}
-                        canSetCanonicalAlias={canSetCanonical}
+                            canSetCanonicalAlias={canSetCanonical}
-                        canSetAliases={canSetAliases}
+                            canSetAliases={canSetAliases}
-                        canonicalAliasEvent={canonicalAliasEv}
+                            canonicalAliasEvent={canonicalAliasEv}
-                    />
+                        />
-                </SettingsSection>
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("room_settings|general|other_section")}>
+                    <SettingsSection heading={_t("room_settings|general|other_section")}>
-                    {urlPreviewSettings}
+                        {urlPreviewSettings}
-                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                        <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
-                        <MediaPreviewAccountSettings roomId={room.roomId} />
+                            <MediaPreviewAccountSettings roomId={room.roomId} />
-                    </SettingsSubsection>
+                        </SettingsSubsection>
-                    {leaveSection}
+                        {leaveSection}
-                </SettingsSection>
+                    </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;
@@ -464,13 +464,14 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         return (
             <div className="mx_SecurityRoomSettingsTab_advancedSection">
-                <LabelledToggleSwitch
+                <SettingsToggleInput
-                    value={guestAccess === GuestAccess.CanJoin}
+                    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>
         );
     }
@@ -503,35 +504,43 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         return (
             <SettingsTab>
-                <SettingsSection heading={_t("room_settings|security|title")}>
+                <Form.Root
-                    <SettingsFieldset
+                    onSubmit={(evt) => {
-                        legend={_t("settings|security|encryption_section")}
+                        evt.preventDefault();
-                        description={
+                        evt.stopPropagation();
-                            isEncryptionForceDisabled && !isEncrypted
+                    }}
-                                ? undefined
+                >
-                                : _t("room_settings|security|encryption_permanent")
+                    <SettingsSection heading={_t("room_settings|security|title")}>
-                        }
+                        <SettingsFieldset
-                    >
+                            legend={_t("settings|security|encryption_section")}
-                        {isEncryptionLoading ? (
+                            description={
-                            <InlineSpinner />
+                                isEncryptionForceDisabled && !isEncrypted
-                        ) : (
+                                    ? undefined
-                            <>
+                                    : _t("room_settings|security|encryption_permanent")
-                                <LabelledToggleSwitch
+                            }
-                                    value={isEncrypted}
+                        >
-                                    onChange={this.onEncryptionChange}
+                            {isEncryptionLoading ? (
-                                    label={_t("common|encrypted")}
+                                <InlineSpinner />
-                                    disabled={!canEnableEncryption}
+                            ) : (
-                                />
+                                <>
-                                {isEncryptionForceDisabled && !isEncrypted && (
+                                    <SettingsToggleInput
-                                    <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
+                                        name="enable-encryption"
-                                )}
+                                        checked={isEncrypted}
-                                {encryptionSettings}
+                                        onChange={this.onEncryptionChange}
-                            </>
+                                        label={_t("common|encrypted")}
-                        )}
+                                        disabled={!canEnableEncryption}
-                    </SettingsFieldset>
+                                    />
-                    {this.renderJoinRule()}
+                                    {isEncryptionForceDisabled && !isEncrypted && (
-                    {historySection}
+                                        <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
-                </SettingsSection>
+                                    )}
+                                    {encryptionSettings}
+                                </>
+                            )}
+                        </SettingsFieldset>
+                        {this.renderJoinRule()}
+                        {historySection}
+                    </SettingsSection>
+                </Form.Root>
             </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 { useRoomState } from "../../../../../hooks/useRoomState";
@@ -45,8 +45,9 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
         return content.events?.[ElementCallMemberEventType.name] === 0;
     });
 
-    const onChange = useCallback(
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-        (enabled: boolean): void => {
+        (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
+        <SettingsToggleInput
-            data-testid="element-call-switch"
+            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")}>
+                <Form.Root
-                    <ElementCallSwitch room={room} />
+                    onSubmit={(evt) => {
-                </SettingsSubsection>
+                        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,23 @@ 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 = (
-                <>
+                <Form.Root
-                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <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,12 +90,10 @@ 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}
                     />
-                </>
+                </Form.Root>
             );
         }
         return (

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

@@ -5,15 +5,14 @@ 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 React, { type ChangeEvent, type FC, useCallback, useState } from "react";
-import { Root } from "@vector-im/compound-web";
+import { Form, 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";
 
 /**
  * A settings component which allows the user to enable/disable invite blocking.
@@ -31,10 +30,10 @@ export const InviteRulesAccountSetting: FC = () => {
     const [busy, setBusy] = useState(false);
 
     const onChange = useCallback(
-        async (allowInvites: boolean) => {
+        async (e: ChangeEvent<HTMLInputElement>) => {
             try {
                 setBusy(true);
-                if (allowInvites) {
+                if (e.target.checked) {
                     // When allowing invites, clear the block setting on both bits of account data.
                     await SettingsStore.setValue("blockInvites", null, SettingLevel.ACCOUNT, false);
                     await SettingsStore.setValue("inviteRules", null, SettingLevel.ACCOUNT, { allBlocked: false });
@@ -58,15 +57,22 @@ export const InviteRulesAccountSetting: FC = () => {
     const disabledMessage = msc4155Disabled && msc4380Disabled;
     const invitesBlocked = (!msc4155Disabled && msc4155Rules.allBlocked) || (!msc4380Disabled && msc4380BlockInvites);
     return (
-        <Root className="mx_MediaPreviewAccountSetting_Form">
+        <Form.Root
-            <LabelledToggleSwitch
+            className="mx_MediaPreviewAccountSetting_Form"
-                className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+            onSubmit={(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }}
+        >
+            <SettingsToggleInput
+                name="invite_controls"
                 label={_t("settings|invite_controls|default_label")}
-                value={!invitesBlocked}
+                checked={!invitesBlocked}
                 onChange={onChange}
-                tooltip={disabledMessage}
+                className="mx_MediaPreviewAccountSetting_ToggleSwitch"
                 disabled={!!disabledMessage || busy}
+                disabledMessage={disabledMessage}
             />
-        </Root>
+        </Form.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")}>
+                <Form.Root
-                    <SettingsSubsectionText>
+                    onSubmit={(evt) => {
-                        {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
+                        evt.preventDefault();
-                    </SettingsSubsectionText>
+                        evt.stopPropagation();
-                    {betaSection}
+                    }}
-                </SettingsSection>
+                >
-
+                    <SettingsSection heading={_t("labs|beta_section")}>
-                {labsSections && (
-                    <SettingsSection heading={_t("labs|experimental_section")}>
                         <SettingsSubsectionText>
-                            {_t(
+                            {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
-                                "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}
+                        {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(
+    const avatarOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-        (c: boolean) => {
+        (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
+                <SettingsToggleInput
-                    className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+                    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/NotificationUserSettingsTab.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { Form } from "@vector-im/compound-web";
 
 import { Features } from "../../../../../settings/Settings";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -21,13 +22,20 @@ export default class NotificationUserSettingsTab extends React.Component {
 
         return (
             <SettingsTab>
-                {newNotificationSettingsEnabled ? (
+                <Form.Root
-                    <NotificationSettings2 />
+                    onSubmit={(evt) => {
-                ) : (
+                        evt.preventDefault();
-                    <SettingsSection>
+                        evt.stopPropagation();
-                        <Notifications />
+                    }}
-                    </SettingsSection>
+                >
-                )}
+                    {newNotificationSettingsEnabled ? (
+                        <NotificationSettings2 />
+                    ) : (
+                        <SettingsSection>
+                            <Notifications />
+                        </SettingsSection>
+                    )}
+                </Form.Root>
             </SettingsTab>
         );
     }

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 ChangeEvent, type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
+import { 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";
@@ -92,7 +92,8 @@ const SpellCheckSection: React.FC = () => {
         })();
     }, []);
 
-    const onSpellCheckEnabledChange = useCallback((enabled: boolean) => {
+    const onSpellCheckEnabledChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        const enabled = e.target.checked;
         setSpellCheckEnabled(enabled);
         PlatformPeg.get()?.setSpellCheckEnabled(enabled);
     }, []);
@@ -106,10 +107,11 @@ const SpellCheckSection: React.FC = () => {
 
     return (
         <>
-            <LabelledToggleSwitch
+            <SettingsToggleInput
+                name="allow_spellcheck"
                 label={_t("settings|general|allow_spellcheck")}
-                value={Boolean(spellCheckEnabled)}
                 onChange={onSpellCheckEnabledChange}
+                checked={Boolean(spellCheckEnabled)}
             />
             {spellCheckEnabled && spellCheckLanguages !== undefined && !IS_MAC && (
                 <SpellCheckSettings languages={spellCheckLanguages} onLanguagesChange={onSpellCheckLanguagesChange} />
@@ -261,13 +263,16 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
             <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
                 <SettingsSection>
                     {/* The heading string is still 'general' from where it was moved, but this section should become 'general' */}
-                    <SettingsSubsection heading={_t("settings|general|language_section")}>
+                    <SettingsSubsection heading={_t("settings|general|language_section")} formWrap>
                         <LanguageSection />
                         <SpellCheckSection />
                     </SettingsSubsection>
 
                     {SettingsStore.canSetValue("Electron.autoLaunch", null, SettingLevel.PLATFORM) && (
-                        <SettingsSubsection heading={_t("settings|preferences|startup_window_behaviour_label")}>
+                        <SettingsSubsection
+                            heading={_t("settings|preferences|startup_window_behaviour_label")}
+                            formWrap
+                        >
                             <SettingsDropdown
                                 settingKey="Electron.autoLaunch"
                                 label={_t("settings|start_automatically|label", { brand })}
@@ -277,7 +282,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         </SettingsSubsection>
                     )}
 
-                    <SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|room_list_heading")} formWrap>
                         {!newRoomListEnabled && this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                         {/* The settings is on device level where the other room list settings are on account level  */}
                         {newRoomListEnabled && (
@@ -285,7 +290,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         )}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|spaces")}>
+                    <SettingsSubsection heading={_t("common|spaces")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
                     </SettingsSubsection>
 
@@ -302,11 +307,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                                 ),
                             },
                         )}
+                        formWrap
                     >
                         {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
@@ -331,23 +337,24 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                     <SettingsSubsection
                         heading={_t("common|presence")}
                         description={_t("settings|preferences|presence_description")}
+                        formWrap
                     >
                         {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|composer_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|composer_heading")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|code_blocks_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|code_blocks_heading")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|media_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|media_heading")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|timeline")}>
+                    <SettingsSubsection heading={_t("common|timeline")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                     </SettingsSubsection>
 
@@ -356,11 +363,11 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         <InviteRulesAccountSetting />
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("common|general")} stretchContent>
+                    <SettingsSubsection heading={_t("common|general")} stretchContent formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
 
                         <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />

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

@@ -12,6 +12,7 @@ import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/ma
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@@ -321,7 +322,13 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                 });
             };
             posthogSection = (
-                <>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                    className="mx_SecurityUserSettingsTab_posthogSection"
+                >
                     <SettingsSubsection
                         heading={_t("common|analytics")}
                         description={_t("settings|security|analytics_description")}
@@ -336,7 +343,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     <SettingsSubsection heading={_t("settings|sessions|title")}>
                         <SettingsFlag name="deviceClientInformationOptIn" level={SettingLevel.ACCOUNT} />
                     </SettingsSubsection>
-                </>
+                </Form.Root>
             );
         }
 

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>
+                <Form.Root
-                    {requestButton}
+                    onSubmit={(evt) => {
-                    <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
+                        evt.preventDefault();
-                        {speakerDropdown}
+                        evt.stopPropagation();
-                        {microphoneDropdown}
+                    }}
-                        <LabelledToggleSwitch
+                >
-                            value={this.state.audioAutoGainControl}
+                    <SettingsSection>
-                            onChange={async (v): Promise<void> => {
+                        {requestButton}
-                                await MediaDeviceHandler.setAudioAutoGainControl(v);
+                        <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
-                                this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
+                            {speakerDropdown}
-                            }}
+                            {microphoneDropdown}
-                            label={_t("settings|voip|voice_agc")}
+                            <SettingsToggleInput
-                            data-testid="voice-auto-gain"
+                                name="voice-auto-gain"
-                        />
+                                label={_t("settings|voip|voice_agc")}
-                    </SettingsSubsection>
+                                checked={this.state.audioAutoGainControl}
-                    <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
+                                onChange={this.onAutoGainChanged}
-                        {webcamDropdown}
+                            />
-                        <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
+                        </SettingsSubsection>
-                    </SettingsSubsection>
+                        <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
-                </SettingsSection>
+                            {webcamDropdown}
+                            <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
+                        </SettingsSubsection>
+                    </SettingsSection>
 
-                <SettingsSection heading={_t("common|advanced")}>
+                    <SettingsSection heading={_t("common|advanced")}>
-                    <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
+                        <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
-                        <LabelledToggleSwitch
+                            <SettingsToggleInput
-                            value={this.state.audioNoiseSuppression}
+                                name="voice-noise-suppression"
-                            onChange={async (v): Promise<void> => {
+                                label={_t("settings|voip|noise_suppression")}
-                                await MediaDeviceHandler.setAudioNoiseSuppression(v);
+                                checked={this.state.audioNoiseSuppression}
-                                this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
+                                onChange={this.onNoiseSuppressionChanged}
-                            }}
+                            />
-                            label={_t("settings|voip|noise_suppression")}
+                            <SettingsToggleInput
-                            data-testid="voice-noise-suppression"
+                                name="voice-echo-cancellation"
-                        />
+                                label={_t("settings|voip|echo_cancellation")}
-                        <LabelledToggleSwitch
+                                checked={this.state.audioEchoCancellation}
-                            value={this.state.audioEchoCancellation}
+                                onChange={this.onEchoCancellationChanged}
-                            onChange={async (v): Promise<void> => {
+                            />
-                                await MediaDeviceHandler.setAudioEchoCancellation(v);
+                        </SettingsSubsection>
-                                this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
+                        <SettingsSubsection heading={_t("settings|voip|connection_section")}>
-                            }}
+                            <SettingsFlag
-                            label={_t("settings|voip|echo_cancellation")}
+                                name="webRtcAllowPeerToPeer"
-                            data-testid="voice-echo-cancellation"
+                                level={SettingLevel.DEVICE}
-                        />
+                                onChange={this.changeWebRtcMethod}
-                    </SettingsSubsection>
+                            />
-                    <SettingsSubsection heading={_t("settings|voip|connection_section")}>
+                            <SettingsFlag
-                        <SettingsFlag
+                                name="fallbackICEServerAllowed"
-                            name="webRtcAllowPeerToPeer"
+                                label={_t("settings|voip|enable_fallback_ice_server", {
-                            level={SettingLevel.DEVICE}
+                                    server: new URL(FALLBACK_ICE_SERVER).pathname,
-                            onChange={this.changeWebRtcMethod}
+                                })}
-                        />
+                                level={SettingLevel.DEVICE}
-                        <SettingsFlag
+                                hideIfCannotSet
-                            name="fallbackICEServerAllowed"
+                            />
-                            label={_t("settings|voip|enable_fallback_ice_server", {
+                        </SettingsSubsection>
-                                server: new URL(FALLBACK_ICE_SERVER).pathname,
+                    </SettingsSection>
-                            })}
+                </Form.Root>
-                            level={SettingLevel.DEVICE}
-                            hideIfCannotSet
-                        />
-                    </SettingsSubsection>
-                </SettingsSection>
             </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">
+                    <SettingsToggleInput
-                        <LabelledToggleSwitch
+                        name="guest-access-enabled"
-                            value={guestAccessEnabled}
+                        checked={guestAccessEnabled}
-                            onChange={setGuestAccessEnabled}
+                        onChange={onGuestAccessEnabledChanged}
-                            disabled={!canSetGuestAccess}
+                        disabled={!canSetGuestAccess}
-                            label={_t("room_settings|visibility|guest_access_label")}
+                        disabledMessage={_t("room_settings|visibility|guest_access_disabled")}
-                        />
+                        helpMessage={_t("room_settings|visibility|guest_access_explainer")}
-                        <p>
+                        label={_t("room_settings|visibility|guest_access_label")}
-                            {_t("room_settings|visibility|guest_access_explainer")}
+                    />
-                            <br />
-                            {_t("room_settings|visibility|guest_access_explainer_public_space")}
-                        </p>
-                    </div>
                 )}
             </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}
+                    <Form.Root
-                    <div className="mx_SettingsTab_toggleWithDescription">
+                        onSubmit={(evt) => {
-                        <LabelledToggleSwitch
+                            evt.preventDefault();
-                            value={historyVisibility === HistoryVisibility.WorldReadable}
+                            evt.stopPropagation();
-                            onChange={(checked: boolean): void => {
+                        }}
+                    >
+                        {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

@@ -2333,6 +2333,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.",
@@ -2488,11 +2490,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_disabled": "You do not have permission to change guest access.",
-            "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",
             "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

@@ -974,6 +974,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,
@@ -1135,10 +1139,12 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
         controller: new NotificationsEnabledController(),
+        displayName: _td("settings|notifications|enable_desktop_notifications_session"),
     },
     "deviceNotificationsEnabled": {
         supportedLevels: [SettingLevel.DEVICE],
         default: true,
+        displayName: _td("settings|notifications|enable_notifications_device"),
     },
     "notificationSound": {
         supportedLevels: LEVELS_ROOM_OR_ACCOUNT,
@@ -1150,10 +1156,12 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: true,
         controller: new NotificationBodyEnabledController(),
+        displayName: _td("settings|notifications|show_message_desktop_notification"),
     },
     "audioNotificationsEnabled": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: true,
+        displayName: _td("settings|notifications|enable_audible_notifications_session"),
     },
     "enableWidgetScreenshots": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

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

@@ -19,9 +19,6 @@ describe("<CreateRoomDialog />", () => {
     const userId = "@alice:server.org";
 
     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";
 
     let mockClient: ReturnType<typeof getMockClientWithEventEmitter>;
     beforeEach(() => {
@@ -121,7 +118,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.",
@@ -141,7 +138,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.",
@@ -161,7 +158,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 () => {
@@ -177,7 +174,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 () => {
@@ -192,7 +189,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.",
@@ -207,7 +204,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();
         });
 
@@ -217,7 +214,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();
         });
@@ -319,7 +316,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/WidgetOpenIDPermissionsDialog-test.tsx

@@ -0,0 +1,37 @@
+/*
+Copyright 2025 Element Creations 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 React from "react";
+import { render } from "jest-matrix-react";
+import { WidgetKind } from "matrix-widget-api";
+
+import { stubClient } from "../../../../test-utils";
+import WidgetOpenIDPermissionsDialog from "../../../../../src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx";
+
+describe("WidgetOpenIDPermissionsDialog", () => {
+    const mockWidget = {
+        id: "test-widget",
+        name: "Test Widget",
+        templateUrl: "https://imawidget",
+    } as any;
+
+    const onFinished = jest.fn();
+
+    beforeEach(() => {
+        stubClient();
+        onFinished.mockClear();
+    });
+
+    it("should render", () => {
+        const dialog = render(
+            <WidgetOpenIDPermissionsDialog widget={mockWidget} widgetKind={WidgetKind.Room} onFinished={onFinished} />,
+        );
+
+        expect(dialog.getByText("Allow this widget to verify your identity")).toBeInTheDocument();
+        expect(dialog.asFragment()).toMatchSnapshot();
+    });
+});

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

@@ -32,67 +32,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
+        <div
-          class="mx_SettingsFlag_label"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch__r_7_"
+            class="_container_udcm8_10"
+          >
+            <input
+              class="_input_udcm8_24"
+              id="_r_b_"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="_r_b_"
           >
             Ignore user
-          </div>
+          </label>
           <span
-            class="mx_Caption"
+            class="_message_19upo_85 _help-message_19upo_91"
-            id="mx_LabelledToggleSwitch__r_7__caption"
+            id="radix-_r_d_"
           >
             You will not see any messages or room invites from this user.
           </span>
-        </span>
-        <div
-          aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch__r_7__caption"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch__r_7_"
-          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
+        <div
-          class="mx_SettingsFlag_label"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch__r_8_"
+            class="_container_udcm8_10"
+          >
+            <input
+              class="_input_udcm8_24"
+              id="_r_e_"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="_r_e_"
           >
             Report room
-          </div>
+          </label>
           <span
-            class="mx_Caption"
+            class="_message_19upo_85 _help-message_19upo_91"
-            id="mx_LabelledToggleSwitch__r_8__caption"
+            id="radix-_r_g_"
           >
             Report this room to your account provider.
           </span>
-        </span>
-        <div
-          aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch__r_8__caption"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch__r_8_"
-          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__/CreateRoomDialog-test.tsx.snap

@@ -24,9 +24,11 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
         Create a private room
       </h1>
     </div>
-    <form>
+    <div
-      <div
+      class="mx_Dialog_content"
-        class="mx_Dialog_content"
+    >
+      <form
+        class="_root_19upo_16"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -60,74 +62,86 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             Topic (optional)
           </label>
         </div>
-        <div
+        <div>
-          class="mx_Dropdown mx_JoinRuleDropdown"
-        >
           <div
-            aria-describedby="mx_JoinRuleDropdown_value"
+            class="mx_Dropdown mx_JoinRuleDropdown"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-label="Room visibility"
-            aria-owns="mx_JoinRuleDropdown_input"
-            class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
-            role="button"
-            tabindex="0"
           >
             <div
-              class="mx_Dropdown_option"
+              aria-describedby="mx_JoinRuleDropdown_value"
-              id="mx_JoinRuleDropdown_value"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Room visibility"
+              aria-owns="mx_JoinRuleDropdown_input"
+              class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+              role="button"
+              tabindex="0"
             >
               <div
-                class="mx_JoinRuleDropdown_invite"
+                class="mx_Dropdown_option"
+                id="mx_JoinRuleDropdown_value"
               >
-                Private room (invite only)
+                <div
+                  class="mx_JoinRuleDropdown_invite"
+                >
+                  Private room (invite only)
+                </div>
               </div>
+              <svg
+                class="mx_Dropdown_arrow"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
             </div>
-            <svg
-              class="mx_Dropdown_arrow"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-              />
-            </svg>
           </div>
+          <p>
+            Only people invited will be able to find and join this room. You can change this at any time from room settings.
+          </p>
         </div>
-        <p>
-          Only people invited will be able to find and join this room. You can change this at any time from room settings.
-        </p>
         <div
-          class="mx_SettingsFlag mx_CreateRoomDialog_e2eSwitch"
+          class="_inline-field_19upo_32"
         >
-          <span
+          <div
-            class="mx_SettingsFlag_label"
+            class="_inline-field-control_19upo_44"
           >
             <div
-              id="mx_LabelledToggleSwitch__r_5i_"
+              class="_container_udcm8_10"
+            >
+              <input
+                checked=""
+                class="_input_udcm8_24"
+                id="_r_72_"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="_r_72_"
             >
               Enable end-to-end encryption
-            </div>
+            </label>
-          </span>
+            <span
-          <div
+              class="_message_19upo_85 _help-message_19upo_91"
-            aria-checked="true"
+              id="radix-_r_74_"
-            aria-disabled="false"
+            >
-            aria-labelledby="mx_LabelledToggleSwitch__r_5i_"
+              You can't disable this later. Bridges & most bots won't work yet.
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+            </span>
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
           </div>
         </div>
-        <p>
-          You can't disable this later. Bridges & most bots won't work yet.
-        </p>
         <details
           class="mx_CreateRoomDialog_details"
         >
@@ -137,36 +151,49 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             Show advanced
           </summary>
           <div
-            class="mx_SettingsFlag"
+            class="_inline-field_19upo_32"
           >
-            <span
+            <div
-              class="mx_SettingsFlag_label"
+              class="_inline-field-control_19upo_44"
             >
               <div
-                id="mx_LabelledToggleSwitch__r_5j_"
+                class="_container_udcm8_10"
+              >
+                <input
+                  class="_input_udcm8_24"
+                  id="_r_75_"
+                  role="switch"
+                  type="checkbox"
+                />
+                <div
+                  class="_ui_udcm8_34"
+                />
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
+              <label
+                class="_label_19upo_59"
+                for="_r_75_"
               >
                 Block anyone not part of server.org from ever joining this room.
-              </div>
+              </label>
-            </span>
+              <span
-            <div
+                class="_message_19upo_85 _help-message_19upo_91"
-              aria-checked="false"
+                id="radix-_r_77_"
-              aria-disabled="false"
+              >
-              aria-labelledby="mx_LabelledToggleSwitch__r_5j_"
+                You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
-              class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+              </span>
-              role="switch"
-              tabindex="0"
-            >
-              <div
-                class="mx_ToggleSwitch_ball"
-              />
             </div>
           </div>
+          z
           <p>
             You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
           </p>
         </details>
-      </div>
+      </form>
-    </form>
+    </div>
     <div
       class="mx_Dialog_buttons"
     >
@@ -227,9 +254,11 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
         Create a private room
       </h1>
     </div>
-    <form>
+    <div
-      <div
+      class="mx_Dialog_content"
-        class="mx_Dialog_content"
+    >
+      <form
+        class="_root_19upo_16"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -263,76 +292,88 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             Topic (optional)
           </label>
         </div>
-        <div
+        <div>
-          class="mx_Dropdown mx_JoinRuleDropdown"
-        >
           <div
-            aria-describedby="mx_JoinRuleDropdown_value"
+            class="mx_Dropdown mx_JoinRuleDropdown"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-label="Room visibility"
-            aria-owns="mx_JoinRuleDropdown_input"
-            class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
-            role="button"
-            tabindex="0"
           >
             <div
-              class="mx_Dropdown_option"
+              aria-describedby="mx_JoinRuleDropdown_value"
-              id="mx_JoinRuleDropdown_value"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Room visibility"
+              aria-owns="mx_JoinRuleDropdown_input"
+              class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+              role="button"
+              tabindex="0"
             >
               <div
-                class="mx_JoinRuleDropdown_invite"
+                class="mx_Dropdown_option"
+                id="mx_JoinRuleDropdown_value"
               >
-                Private room (invite only)
+                <div
+                  class="mx_JoinRuleDropdown_invite"
+                >
+                  Private room (invite only)
+                </div>
               </div>
+              <svg
+                class="mx_Dropdown_arrow"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
             </div>
-            <svg
-              class="mx_Dropdown_arrow"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-              />
-            </svg>
           </div>
+          <p>
+            Only people invited will be able to find and join this room. You can change this at any time from room settings.
+          </p>
         </div>
-        <p>
-          Only people invited will be able to find and join this room. You can change this at any time from room settings.
-        </p>
         <div
-          class="mx_SettingsFlag mx_CreateRoomDialog_e2eSwitch"
+          class="_inline-field_19upo_32"
         >
-          <span
+          <div
-            class="mx_SettingsFlag_label"
+            class="_inline-field-control_19upo_44"
           >
             <div
-              id="mx_LabelledToggleSwitch__r_60_"
+              class="_container_udcm8_10"
+            >
+              <input
+                checked=""
+                class="_input_udcm8_24"
+                id="_r_7k_"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_34"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="_r_7k_"
             >
               Enable end-to-end encryption
-            </div>
+            </label>
-          </span>
+            <span
-          <div
+              class="_message_19upo_85 _help-message_19upo_91"
-            aria-checked="true"
+              id="radix-_r_7m_"
-            aria-disabled="false"
+            >
-            aria-labelledby="mx_LabelledToggleSwitch__r_60_"
+              You can't disable this later. Bridges & most bots won't work yet.
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+            </span>
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
           </div>
         </div>
-        <p>
+      </form>
-          You can't disable this later. Bridges & most bots won't work yet.
+    </div>
-        </p>
-      </div>
-    </form>
     <div
       class="mx_Dialog_buttons"
     >

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

@@ -116,119 +116,129 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           End-to-end encryption
         </button>
       </div>
-      <div>
+      <form
+        class="_root_19upo_16 mx_DevTools_toggleForm"
+      >
         <h2
           class="mx_DevTools_toolHeading"
         >
           Options
         </h2>
         <div
-          class="mx_SettingsFlag"
+          class="_inline-field_19upo_32"
-        >
-          <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"
         >
           <div
-            class="_field_19upo_26"
+            class="_inline-field-control_19upo_44"
           >
-            <label
-              class="_label_19upo_59"
-              for="radix-_r_4_"
-            >
-              Element Call URL
-            </label>
             <div
-              class="_controls_17lij_8"
+              class="_container_udcm8_10"
             >
               <input
-                class="_control_sqdq4_10"
+                class="_input_udcm8_24"
-                id="radix-_r_4_"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
-                name="input"
+                role="switch"
-                title=""
+                type="checkbox"
-                value=""
+              />
+              <div
+                class="_ui_udcm8_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_udcm8_10"
+            >
+              <input
+                class="_input_udcm8_24"
+                id="mx_SettingsFlag_QgU2PomxwKpa"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_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_udcm8_10"
+            >
+              <input
+                class="_input_udcm8_24"
+                id="mx_SettingsFlag_6hpi3YEetmBG"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_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-_r_a_"
+          >
+            Element Call URL
+          </label>
+          <div
+            class="_controls_17lij_8"
+          >
+            <input
+              class="_control_sqdq4_10"
+              id="radix-_r_a_"
+              name="input"
+              title=""
+              value=""
+            />
+          </div>
+        </div>
+      </form>
     </div>
     <div
       class="mx_Dialog_buttons"

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

@@ -44,7 +44,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         />
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_8_"
+          id="radix-_r_9_"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -66,28 +66,34 @@ exports[`ReportRoomDialog displays admin message 1`] = `
 
       </p>
       <div
-        class="mx_SettingsFlag"
+        class="_inline-field_19upo_32"
       >
-        <span
+        <div
-          class="mx_SettingsFlag_label"
+          class="_inline-field-control_19upo_44"
         >
           <div
-            id="mx_LabelledToggleSwitch__r_9_"
+            class="_container_udcm8_10"
+          >
+            <input
+              class="_input_udcm8_24"
+              id="_r_a_"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="_r_a_"
           >
             Leave room
-          </div>
+          </label>
-        </span>
-        <div
-          aria-checked="false"
-          aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch__r_9_"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
         </div>
       </div>
       <div

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

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_WidgetOpenIDPermissionsDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Allow this widget to verify your identity
+      </h1>
+    </div>
+    <div
+      class="mx_WidgetOpenIDPermissionsDialog_content"
+    >
+      <p>
+        The widget will verify your user ID, but won't be able to perform actions for you:
+      </p>
+      <p
+        class="text-muted"
+      >
+        https://imawidget
+      </p>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <div
+        class="mx_Dialog_buttons_additive"
+      >
+        <form
+          class="_root_19upo_16"
+        >
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_udcm8_10"
+              >
+                <input
+                  class="_input_udcm8_24"
+                  id="_r_0_"
+                  role="switch"
+                  type="checkbox"
+                />
+                <div
+                  class="_ui_udcm8_34"
+                />
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
+              <label
+                class="_label_19upo_59"
+                for="_r_0_"
+              >
+                Remember this
+              </label>
+            </div>
+          </div>
+        </form>
+      </div>
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Continue
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

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

@@ -417,31 +417,42 @@ exports[`<Users /> should render a user list 1`] = `
       </label>
     </div>
     No results found
-    <div
+    <form
-      class="mx_SettingsFlag"
+      class="_root_19upo_16"
     >
-      <span
-        class="mx_SettingsFlag_label"
-      >
-        <div
-          id="mx_LabelledToggleSwitch__r_4_"
-        >
-          Only joined users
-        </div>
-      </span>
       <div
-        aria-checked="true"
+        class="_inline-field_19upo_32"
-        aria-disabled="false"
-        aria-labelledby="mx_LabelledToggleSwitch__r_4_"
-        class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        role="switch"
-        tabindex="0"
       >
         <div
-          class="mx_ToggleSwitch_ball"
+          class="_inline-field-control_19upo_44"
-        />
+        >
+          <div
+            class="_container_udcm8_10"
+          >
+            <input
+              checked=""
+              class="_input_udcm8_24"
+              id="_r_4_"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_34"
+            />
+          </div>
+        </div>
+        <div
+          class="_inline-field-body_19upo_38"
+        >
+          <label
+            class="_label_19upo_59"
+            for="_r_4_"
+          >
+            Only joined users
+          </label>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
   <div
     class="mx_Dialog_buttons"

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

@@ -301,7 +301,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", () => {
@@ -311,7 +311,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
+  <form
-    class="mx_SettingsFlag"
+    class="_root_19upo_16"
-    data-testid="enable-live-share-toggle"
   >
-    <span
+    <div
-      class="mx_SettingsFlag_label"
+      class="_inline-field_19upo_32"
     >
       <div
-        id="mx_LabelledToggleSwitch__r_0_"
+        class="_inline-field-control_19upo_44"
       >
-        Enable live location sharing
+        <div
+          class="_container_udcm8_10"
+        >
+          <input
+            class="_input_udcm8_24"
+            id="_r_0_"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_udcm8_34"
+          />
+        </div>
       </div>
-    </span>
+      <div
-    <div
+        class="_inline-field-body_19upo_38"
-      aria-checked="false"
+      >
-      aria-disabled="false"
+        <label
-      aria-labelledby="mx_LabelledToggleSwitch__r_0_"
+          class="_label_19upo_59"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+          for="_r_0_"
-      role="switch"
+        >
+          Enable live location sharing
+        </label>
+      </div>
+    </div>
+    <button
+      aria-disabled="true"
+      class="_button_187yx_8 mx_EnableLiveShare_button"
+      data-kind="primary"
+      data-size="lg"
+      role="button"
       tabindex="0"
     >
-      <div
+      OK
-        class="mx_ToggleSwitch_ball"
+    </button>
-      />
+  </form>
-    </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>
 </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
+  <form
-    class="mx_SettingsFieldset"
+    class="_root_19upo_16"
   >
-    <legend
+    <fieldset
-      class="mx_SettingsFieldset_legend"
+      class="mx_SettingsFieldset"
     >
-      URL Previews
+      <legend
-    </legend>
+        class="mx_SettingsFieldset_legend"
-    <div
-      class="mx_SettingsFieldset_description"
-    >
-      <div
-        class="mx_SettingsSubsection_text"
       >
-        <p>
+        URL Previews
-          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.
+      </legend>
-        </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"
-    >
       <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"
+          class="mx_SettingsSubsection_text"
-          aria-disabled="false"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          id="mx_SettingsFlag_vY7Q4uEh9K38"
-          role="switch"
-          tabindex="0"
         >
-          <div
+          <p>
-            class="mx_ToggleSwitch_ball"
+            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>
+      <div
-  </fieldset>
+        class="mx_SettingsFieldset_content"
+      >
+        <div
+          class="_inline-field_19upo_32"
+        >
+          <div
+            class="_inline-field-control_19upo_44"
+          >
+            <div
+              class="_container_udcm8_10"
+            >
+              <input
+                checked=""
+                class="_input_udcm8_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_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
+  <form
-    class="mx_SettingsFieldset"
+    class="_root_19upo_16"
   >
-    <legend
+    <fieldset
-      class="mx_SettingsFieldset_legend"
+      class="mx_SettingsFieldset"
     >
-      URL Previews
+      <legend
-    </legend>
+        class="mx_SettingsFieldset_legend"
-    <div
+      >
-      class="mx_SettingsFieldset_description"
+        URL Previews
-    >
+      </legend>
-      <div
+      <div
-        class="mx_SettingsSubsection_text"
+        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"
+          class="mx_SettingsSubsection_text"
-          role="button"
-          tabindex="0"
         >
-          disabled
+          <p>
-        </div>
+            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.
-         URL previews by default.
+          </p>
-        <p />
+          <p>
-      </div>
+            <span>
-    </div>
+              You have 
-    <div
+            </span>
-      class="mx_SettingsFieldset_content"
+          </p>
-    >
+          <div
-      <div>
+            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-        URL previews are disabled by default for participants in this room.
+            role="button"
-      </div>
+            tabindex="0"
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-          for="mx_SettingsFlag_vY7Q4uEh9K38"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
           >
-            Enable inline URL previews by default
+            disabled
-          </span>
+          </div>
-        </label>
+           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"
+          class="_inline-field_19upo_32"
-          aria-disabled="true"
-          aria-label="Enable inline URL previews by default"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          id="mx_SettingsFlag_vY7Q4uEh9K38"
-          role="switch"
-          tabindex="0"
         >
           <div
-            class="mx_ToggleSwitch_ball"
+            class="_inline-field-control_19upo_44"
-          />
+          >
+            <div
+              class="_container_udcm8_10"
+            >
+              <input
+                class="_input_udcm8_24"
+                disabled=""
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_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
+  <form
-    class="mx_SettingsFieldset"
+    class="_root_19upo_16"
   >
-    <legend
+    <fieldset
-      class="mx_SettingsFieldset_legend"
+      class="mx_SettingsFieldset"
     >
-      URL Previews
+      <legend
-    </legend>
+        class="mx_SettingsFieldset_legend"
-    <div
+      >
-      class="mx_SettingsFieldset_description"
+        URL Previews
-    >
+      </legend>
-      <div
+      <div
-        class="mx_SettingsSubsection_text"
+        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"
+          class="mx_SettingsSubsection_text"
-          role="button"
-          tabindex="0"
         >
-          enabled
+          <p>
-        </div>
+            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.
-         URL previews by default.
+          </p>
-        <p />
+          <p>
-      </div>
+            <span>
-    </div>
+              You have 
-    <div
+            </span>
-      class="mx_SettingsFieldset_content"
+          </p>
-    >
+          <div
-      <div>
+            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-        URL previews are enabled by default for participants in this room.
+            role="button"
-      </div>
+            tabindex="0"
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-          for="mx_SettingsFlag_vY7Q4uEh9K38"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
           >
-            Enable inline URL previews by default
+            enabled
-          </span>
+          </div>
-        </label>
+           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"
+          class="_inline-field_19upo_32"
-          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"
         >
           <div
-            class="mx_ToggleSwitch_ball"
+            class="_inline-field-control_19upo_44"
-          />
+          >
+            <div
+              class="_container_udcm8_10"
+            >
+              <input
+                checked=""
+                class="_input_udcm8_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <div
+                class="_ui_udcm8_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
+  <form
-    class="mx_SettingsFieldset"
+    class="_root_19upo_16"
   >
-    <legend
+    <fieldset
-      class="mx_SettingsFieldset_legend"
+      class="mx_SettingsFieldset"
     >
-      URL Previews
+      <legend
-    </legend>
+        class="mx_SettingsFieldset_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
+        URL Previews
-          clip-rule="evenodd"
+      </legend>
-          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"
+      <div
-          fill-rule="evenodd"
+        class="mx_SettingsFieldset_content"
-        />
+      >
-      </svg>
+        <svg
-    </div>
+          class="_icon_11k6c_18"
-  </fieldset>
+          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/Notifications-test.tsx

@@ -37,6 +37,7 @@ import {
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
+import { Form } from "@vector-im/compound-web";
 
 import Notifications from "../../../../../src/components/views/settings/Notifications";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
@@ -248,7 +249,12 @@ const pushRules: IPushRules = {
 const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
 
 describe("<Notifications />", () => {
-    const getComponent = () => render(<Notifications />);
+    const getComponent = () =>
+        render(
+            <Form.Root>
+                <Notifications />
+            </Form.Root>,
+        );
 
     // get component, wait for async data and force a render
     const getComponentAndWait = async () => {
@@ -347,11 +353,11 @@ describe("<Notifications />", () => {
         it("renders switches correctly", async () => {
             await getComponentAndWait();
 
-            expect(screen.getByTestId("notif-master-switch")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable notifications for this account")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-device-switch")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable notifications for this device")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-notificationsEnabled")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable desktop notifications for this session")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-notificationBodyEnabled")).toBeInTheDocument();
+            expect(screen.getByLabelText("Show message in desktop notification")).toBeInTheDocument();
-            expect(screen.getByTestId("notif-setting-audioNotificationsEnabled")).toBeInTheDocument();
+            expect(screen.getByLabelText("Enable audible notifications for this session")).toBeInTheDocument();
         });
 
         describe("email switches", () => {
@@ -370,7 +376,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 +385,14 @@ describe("<Notifications />", () => {
                 });
                 await getComponentAndWait();
 
-                const emailSwitch = screen.getByTestId("notif-email-switch");
+                const emailSwitch = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
-                expect(emailSwitch.querySelector('[aria-checked="true"]')).toBeInTheDocument();
+                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 +411,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 +437,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 +458,20 @@ describe("<Notifications />", () => {
 
         it("toggles and sets settings correctly", async () => {
             await getComponentAndWait();
-            let audioNotifsToggle!: HTMLDivElement;
+            let audioNotifsToggle!: HTMLInputElement;
 
             const update = () => {
-                audioNotifsToggle = screen
+                audioNotifsToggle = screen.getByLabelText("Enable audible notifications for this session");
-                    .getByTestId("notif-setting-audioNotificationsEnabled")
-                    .querySelector('div[role="switch"]')!;
             };
             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/__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
+  <form
-    class="mx_SettingsFlag"
+    class="_root_19upo_16"
-    data-testid="notif-master-switch"
   >
-    <span
-      class="mx_SettingsFlag_label"
-    >
-      <div
-        id="mx_LabelledToggleSwitch__r_0_"
-      >
-        Enable notifications for this account
-      </div>
-      <span
-        class="mx_Caption"
-        id="mx_LabelledToggleSwitch__r_0__caption"
-      >
-        Turn off to disable notifications on all your devices and sessions
-      </span>
-    </span>
     <div
-      aria-checked="false"
+      class="_inline-field_19upo_32"
-      aria-describedby="mx_LabelledToggleSwitch__r_0__caption"
-      aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch__r_0_"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      role="switch"
-      tabindex="0"
     >
       <div
-        class="mx_ToggleSwitch_ball"
+        class="_inline-field-control_19upo_44"
-      />
-    </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"
       >
         <div
-          class="mx_ToggleSwitch_ball"
+          class="_container_udcm8_10"
-        />
+        >
+          <input
+            class="_input_udcm8_24"
+            id="_r_0_"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_udcm8_34"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="_r_0_"
+        >
+          Enable notifications for this account
+        </label>
+        <span
+          class="_message_19upo_85 _help-message_19upo_91"
+          id="radix-_r_2_"
+        >
+          Turn off to disable notifications on all your devices and sessions
+        </span>
       </div>
     </div>
-    <div
+    <form
-      class="mx_SettingsFlag"
+      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"
+        class="_inline-field_19upo_32"
-        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"
       >
         <div
-          class="mx_ToggleSwitch_ball"
+          class="_inline-field-control_19upo_44"
-        />
+        >
+          <div
+            class="_container_udcm8_10"
+          >
+            <input
+              checked=""
+              class="_input_udcm8_24"
+              id="mx_SettingsFlag_testid_0"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_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_udcm8_10"
+          >
+            <input
+              checked=""
+              class="_input_udcm8_24"
+              id="mx_SettingsFlag_testid_1"
+              role="switch"
+              type="checkbox"
+            />
+            <div
+              class="_ui_udcm8_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://jestjs.io/docs/snapshot-testing
 
 exports[`SetIntegrationManager should render manage integrations sections 1`] = `
-<div
+<form
-  class="mx_SetIntegrationManager"
+  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
+  <div
-    class="_root_19upo_16"
+    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_udcm8_10"
       >
+        <input
+          class="_input_udcm8_24"
+          id="_r_0_"
+          role="switch"
+          type="checkbox"
+        />
         <div
-          class="_container_udcm8_10"
+          class="_ui_udcm8_34"
-        >
+        />
-          <input
-            class="_input_udcm8_24"
-            id="mx_SetIntegrationManager_Toggle"
-            role="switch"
-            type="checkbox"
-          />
-          <div
-            class="_ui_udcm8_34"
-          />
-        </div>
-      </div>
-      <div
-        class="_inline-field-body_19upo_38"
-      >
-        <label
-          class="_label_19upo_59"
-          for="mx_SetIntegrationManager_Toggle"
-        >
-          Enable the integration manager
-        </label>
       </div>
     </div>
-  </form>
+    <div
-</div>
+      class="_inline-field-body_19upo_38"
+    >
+      <label
+        class="_label_19upo_59"
+        for="_r_0_"
+      >
+        Enable the integration manager
+      </label>
+    </div>
+  </div>
+</form>
 `;

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

@@ -18,6 +18,7 @@ import {
     RuleId,
 } from "matrix-js-sdk/src/matrix";
 import React from "react";
+import { Form } from "@vector-im/compound-web";
 
 import NotificationSettings2 from "../../../../../../src/components/views/settings/notifications/NotificationSettings2";
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
@@ -93,7 +94,9 @@ describe("<Notifications />", () => {
 
         const screen = render(
             <MatrixClientContext.Provider value={cli}>
-                <NotificationSettings2 />
+                <Form.Root>
+                    <NotificationSettings2 />
+                </Form.Root>
             </MatrixClientContext.Provider>,
         );
         await act(waitForUpdate);
@@ -106,7 +109,9 @@ describe("<Notifications />", () => {
         const user = userEvent.setup();
         const screen = render(
             <MatrixClientContext.Provider value={cli}>
-                <NotificationSettings2 />
+                <Form.Root>
+                    <NotificationSettings2 />
+                </Form.Root>
             </MatrixClientContext.Provider>,
         );
         await act(async () => {
@@ -114,7 +119,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();
@@ -167,7 +172,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -183,7 +190,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -221,7 +230,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -256,7 +267,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -285,7 +298,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -310,7 +325,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -332,7 +349,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -360,7 +379,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -384,7 +405,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -406,7 +429,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -434,7 +459,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -458,7 +485,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -485,7 +514,9 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <NotificationSettings2 />
+                        <Form.Root>
+                            <NotificationSettings2 />
+                        </Form.Root>
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -504,7 +535,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -615,7 +648,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -674,7 +709,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -694,7 +731,9 @@ describe("<Notifications />", () => {
 
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();
@@ -721,7 +760,9 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <NotificationSettings2 />
+                    <Form.Root>
+                        <NotificationSettings2 />
+                    </Form.Root>
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();

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

@@ -252,7 +252,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", () => {
@@ -264,7 +264,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,
@@ -285,14 +285,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();
         });
     });
 
@@ -388,7 +388,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 () => {
@@ -495,7 +495,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();
             });
 
@@ -505,7 +505,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).toBeChecked();
-                    expect(toggle).toHaveAttribute("aria-disabled", "true");
+                    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());
+        const { getByRole } = render(getComponent());
-        expect(getByTestId("voice-auto-gain")).toBeTruthy();
+        expect(getByRole("switch", { name: "Automatically adjust the microphone volume" })).toBeTruthy();
-        expect(getByTestId("voice-noise-suppression")).toBeTruthy();
+        expect(getByRole("switch", { name: "Noise suppression" })).toBeTruthy();
-        expect(getByTestId("voice-echo-cancellation")).toBeTruthy();
+        expect(getByRole("switch", { name: "Echo cancellation" })).toBeTruthy();
     });
 
     it("sets and displays audio processing settings", () => {

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
+      <form
-        class="mx_SetIntegrationManager"
+        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,43 +74,39 @@ 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
+        <div
-          class="_root_19upo_16"
+          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_udcm8_10"
             >
+              <input
+                checked=""
+                class="_input_udcm8_24"
+                id="_r_0_"
+                role="switch"
+                type="checkbox"
+              />
               <div
-                class="_container_udcm8_10"
+                class="_ui_udcm8_34"
-              >
+              />
-                <input
-                  checked=""
-                  class="_input_udcm8_24"
-                  id="mx_SetIntegrationManager_Toggle"
-                  role="switch"
-                  type="checkbox"
-                />
-                <div
-                  class="_ui_udcm8_34"
-                />
-              </div>
-            </div>
-            <div
-              class="_inline-field-body_19upo_38"
-            >
-              <label
-                class="_label_19upo_59"
-                for="mx_SetIntegrationManager_Toggle"
-              >
-                Enable the integration manager
-              </label>
             </div>
           </div>
-        </form>
+          <div
-      </div>
+            class="_inline-field-body_19upo_38"
+          >
+            <label
+              class="_label_19upo_59"
+              for="_r_0_"
+            >
+              Enable the integration manager
+            </label>
+          </div>
+        </div>
+      </form>
       <div
         class="mx_SettingsSection"
       >
@@ -213,7 +211,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                     >
                       <label
                         class="_label_19upo_59"
-                        for="radix-_r_1_"
+                        for="radix-_r_2_"
                       >
                         Enter a new identity server
                       </label>
@@ -222,7 +220,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                       >
                         <input
                           class="_control_sqdq4_10"
-                          id="radix-_r_1_"
+                          id="radix-_r_2_"
                           name="input"
                           placeholder=""
                           title=""

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://jestjs.io/docs/snapshot-testing
 
 exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest access section toggle 1`] = `
-<div
+<input
-  aria-checked="true"
+  checked=""
-  aria-disabled="false"
+  class="_input_udcm8_24"
-  aria-labelledby="mx_LabelledToggleSwitch__r_b_"
+  id="_r_h_"
-  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
   role="switch"
-  tabindex="0"
+  type="checkbox"
->
+/>
-  <div
-    class="mx_ToggleSwitch_ball"
-  />
-</div>
 `;
 
 exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
@@ -112,42 +107,53 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
               >
                 Anyone can find and join.
               </span>
-              <div
+              <form
-                class="mx_SettingsTab_toggleWithDescription"
+                class="_root_19upo_16"
               >
                 <div
-                  class="mx_SettingsFlag"
+                  class="_inline-field_19upo_32"
                 >
-                  <span
+                  <div
-                    class="mx_SettingsFlag_label"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch__r_0_"
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        id="_r_0_"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="_r_0_"
                     >
                       Preview Space
-                    </div>
+                    </label>
-                  </span>
+                    <span
-                  <div
+                      class="_message_19upo_85 _help-message_19upo_91"
-                    aria-checked="true"
+                      id="radix-_r_2_"
-                    aria-disabled="false"
+                    >
-                    aria-labelledby="mx_LabelledToggleSwitch__r_0_"
+                      Allow people to preview your space before they join.
-                    class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+                    </span>
-                    role="switch"
-                    tabindex="0"
-                  >
-                    <div
-                      class="mx_ToggleSwitch_ball"
-                    />
                   </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>