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>
2026-11-05 12:54:39 +00:00 · 2025-12-04 15:46:21 +00:00
parent f84e2815d0
commit a2f5c49438
93 changed files with 5491 additions and 4726 deletions
@@ -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();
@@ -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();
+    });
+});
@@ -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
-          class="mx_SettingsFlag_label"
+        <div
+          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"
-            id="mx_LabelledToggleSwitch__r_7__caption"
+            class="_message_19upo_85 _help-message_19upo_91"
+            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
-          class="mx_SettingsFlag_label"
+        <div
+          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"
-            id="mx_LabelledToggleSwitch__r_8__caption"
+            class="_message_19upo_85 _help-message_19upo_91"
+            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
@@ -24,9 +24,11 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
        Create a private room
      </h1>
    </div>
-    <form>
-      <div
-        class="mx_Dialog_content"
+    <div
+      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
-          class="mx_Dropdown mx_JoinRuleDropdown"
-        >
+        <div>
          <div
-            aria-describedby="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"
+            class="mx_Dropdown mx_JoinRuleDropdown"
          >
            <div
-              class="mx_Dropdown_option"
-              id="mx_JoinRuleDropdown_value"
+              aria-describedby="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
-            class="mx_SettingsFlag_label"
+          <div
+            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>
-          </span>
-          <div
-            aria-checked="true"
-            aria-disabled="false"
-            aria-labelledby="mx_LabelledToggleSwitch__r_5i_"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
+            </label>
+            <span
+              class="_message_19upo_85 _help-message_19upo_91"
+              id="radix-_r_74_"
+            >
+              You can't disable this later. Bridges & most bots won't work yet.
+            </span>
          </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
-              class="mx_SettingsFlag_label"
+            <div
+              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>
-            </span>
-            <div
-              aria-checked="false"
-              aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch__r_5j_"
-              class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-              role="switch"
-              tabindex="0"
-            >
-              <div
-                class="mx_ToggleSwitch_ball"
-              />
+              </label>
+              <span
+                class="_message_19upo_85 _help-message_19upo_91"
+                id="radix-_r_77_"
+              >
+                You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
+              </span>
            </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
-        class="mx_Dialog_content"
+    <div
+      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
-          class="mx_Dropdown mx_JoinRuleDropdown"
-        >
+        <div>
          <div
-            aria-describedby="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"
+            class="mx_Dropdown mx_JoinRuleDropdown"
          >
            <div
-              class="mx_Dropdown_option"
-              id="mx_JoinRuleDropdown_value"
+              aria-describedby="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
-            class="mx_SettingsFlag_label"
+          <div
+            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>
-          </span>
-          <div
-            aria-checked="true"
-            aria-disabled="false"
-            aria-labelledby="mx_LabelledToggleSwitch__r_60_"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
+            </label>
+            <span
+              class="_message_19upo_85 _help-message_19upo_91"
+              id="radix-_r_7m_"
+            >
+              You can't disable this later. Bridges & most bots won't work yet.
+            </span>
          </div>
        </div>
-        <p>
-          You can't disable this later. Bridges & most bots won't work yet.
-        </p>
-      </div>
-    </form>
+      </form>
+    </div>
    <div
      class="mx_Dialog_buttons"
    >
@@ -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"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_vY7Q4uEh9K38"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Developer mode
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Developer mode"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_vY7Q4uEh9K38"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <div
-          class="mx_SettingsFlag"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_QgU2PomxwKpa"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Show hidden events in timeline
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Show hidden events in timeline"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_QgU2PomxwKpa"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <div
-          class="mx_SettingsFlag"
-        >
-          <label
-            class="mx_SettingsFlag_label"
-            for="mx_SettingsFlag_6hpi3YEetmBG"
-          >
-            <span
-              class="mx_SettingsFlag_labelText"
-            >
-              Enable widget screenshots on supported widgets
-            </span>
-          </label>
-          <div
-            aria-checked="false"
-            aria-disabled="false"
-            aria-label="Enable widget screenshots on supported widgets"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-            id="mx_SettingsFlag_6hpi3YEetmBG"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
-        </div>
-        <form
-          class="_root_19upo_16"
+          class="_inline-field_19upo_32"
        >
          <div
-            class="_field_19upo_26"
+            class="_inline-field-control_19upo_44"
          >
-            <label
-              class="_label_19upo_59"
-              for="radix-_r_4_"
-            >
-              Element Call URL
-            </label>
            <div
-              class="_controls_17lij_8"
+              class="_container_udcm8_10"
            >
              <input
-                class="_control_sqdq4_10"
-                id="radix-_r_4_"
-                name="input"
-                title=""
-                value=""
+                class="_input_udcm8_24"
+                id="mx_SettingsFlag_vY7Q4uEh9K38"
+                role="switch"
+                type="checkbox"
+              />
+              <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"
@@ -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
-          class="mx_SettingsFlag_label"
+        <div
+          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>
-        </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"
-          />
+          </label>
        </div>
      </div>
      <div
@@ -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>
+`;
@@ -417,31 +417,42 @@ exports[`<Users /> should render a user list 1`] = `
      </label>
    </div>
    No results found
-    <div
-      class="mx_SettingsFlag"
+    <form
+      class="_root_19upo_16"
    >
-      <span
-        class="mx_SettingsFlag_label"
-      >
-        <div
-          id="mx_LabelledToggleSwitch__r_4_"
-        >
-          Only joined users
-        </div>
-      </span>
      <div
-        aria-checked="true"
-        aria-disabled="false"
-        aria-labelledby="mx_LabelledToggleSwitch__r_4_"
-        class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-        role="switch"
-        tabindex="0"
+        class="_inline-field_19upo_32"
      >
        <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"