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

Half-Shot · 2025-06-19T13:58:21Z

This PR effectively changes all the various places we expose a ToggleSwitch (or a handful of places we used a checkbox) to use a standard SettingsToggle switch that always keeps the settings toggle to the left of the label, which provides the best accessibility. This also ensures that all toggles have their descriptions and disabled messages where possible.

This PR is absolutely enormous (sorry!!!!) due to the number of places require to change, so to break the changes down further the following things have been changed:

All areas of Element with a toggle switch, which do not have playwright tests, now have playwright tests.
Some playwright/jest tests have been adjusted to use the "switch" role, rather than "checkbox" or other less-ideal ways to identify a setting switch.
Some areas of Element, such as the legacy settings panel did not use our SettingsFlag component where they could trivially include it. This has been fixed.
LabelledToggleSwitch has been removed in favour of Compound's SettingsToggle
Due to Radix inputs (from Compouund) requiring components be wrapped in Forms, a careful dance of wrapping aspects of the settings components in forms has been performed.

I'd suggest reviewing by checking the code changes first, then jest, then playwright changes in that order which will make the most sense. While the PR is huge, the majority of the trivial changes are component swicheroos or screenshot tests.

Changes areas with screenshot test:

Checklist

Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

…etting-toggle

…gsToggleInput with a warning

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

t3chguy · 2025-07-15T07:47:20Z

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

+          <form
+            class="_root_19upo_16"
+          />


Any idea why there's an empty form here? seems odd

t3chguy · 2025-07-15T07:54:25Z

playwright/e2e/spaces/spaces.spec.ts

@@ -369,4 +369,16 @@ test.describe("Spaces", () => {
        await app.viewSpaceByName("Root Space");
        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
    });
+
+    test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {


could/should we also run the axe a11y suite in the new tests?

t3chguy · 2025-07-15T07:57:15Z

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

-                    {secureBackup}
-                    {eventIndex}
-                </SettingsSection>
+                <Form.Root


Wouldn't it be saner to just have a form root span the whole settings tab rather than some things needing one and some things bringing their own?

t3chguy · 2025-07-15T08:02:10Z

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

+              class="_control_sqdq4_10"
+              id="radix-«ra»"
+              name="input"
+              title=""


this seems odd, surely if there's no title the attribute should be omitted rather than an empty string?

t3chguy · 2025-07-15T08:02:47Z

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

@@ -310,7 +310,7 @@ describe("<LocationShareMenu />", () => {

            fireEvent.click(getByLabelText("Enable live location sharing"));

-            expect(getByText("OK").hasAttribute("disabled")).toBeFalsy();
+            expect(getByText("OK")).not.toHaveAttribute("aria-disabled", "true");


Why did all other tests move to toBeDisabled except this one?

t3chguy · 2025-07-15T08:03:46Z

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

+    </form>
+  </form>


A quick google suggests nesting forms is not ok https://www.w3.org/TR/html5/forms.html#the-form-element

Flow content, but with no form element descendants.

t3chguy · 2025-07-15T08:06:38Z

...s/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id="radix-«rg»"
+                    >
+                      settings|send_read_receipts_unsupported


This doesn't look right

t3chguy · 2025-07-15T08:08:11Z

...s/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

+                      <input
+                        class="_input_19o42_24"
+                        disabled=""
+                        id="mx_SettingsFlag_cmt3PZSyNp3v"
+                        role="switch"
+                        type="checkbox"
+                      />


Any clue why some switches snapshot with checked="" some without any checked attribute?

t3chguy · 2025-07-15T08:11:13Z

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

+        await encryptedToggle.click();
+
+        // Accept the dialog.
+        await page.getByRole("button", { name: "Ok " }).click();


Why does the name have a trailing space?

t3chguy · 2025-07-15T08:28:31Z

...gs/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png

The margin between the switches & global seems to have gone walkies

Also between Global & M&K sections

andybalaam

Looks good from a purely crypto point of view.

Half-Shot added 28 commits February 21, 2025 13:45

Use EditInPlace for identity server picker.

8a9eb35

Update test

5aca14d

Add a test for setting an ID server.

ef4d9ea

fix tests

956d936

Reformat other :not sections

206304b

forgot a comma

03da3b5

Update Apperance settings to use toggle switches.

ffedde2

Remove unused checkbox setting.

51cb4a5

Remove unused import.

88e5260

Update tests

a413ae3

lint

b4c926f

update apperance screenshot

57e8e51

Merge branch 'develop' into hs/remove-legacy-setting-toggle

a3f1a8c

Merge remote-tracking branch 'origin/develop' into hs/remove-legacy-s…

7723c0f

…etting-toggle

Begin replacing settings

e06e421

Refactor RoomPublishSetting

b4e0979

Remove LabelledToggleSwitch

0c40f53

Refactor SettingsFlag to use SettingsToggleInput

052cc07

Refactor CreateRoomDialog to use SettingsToggleInput

c59c724

Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput

1ef5ba0

Update DevtoolsDialog

c72ebed

Refactor ReportRoomDialog to use SettingsToggle

6ff4ac8

Update RoomUpgradeWarningDialog to use SettingsToggleInput

4a85b7c

Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput

58f59b2

Update trivial switchovers

1a2aeb1

Update Notifications settings to use SettingsFlag where possible

b58492f

Update RoomPublishSetting and SpaceSettingVisibilityTab to use Settin…

5454c2b

…gsToggleInput with a warning

revert changes to field

cfb2f71

Half-Shot mentioned this pull request Jun 19, 2025

Remove legacy "checkbox" settings option #29282

Closed

4 tasks

Half-Shot added the T-Enhancement label Jun 19, 2025

github-actions bot deployed to Netlify July 14, 2025 14:46 View deployment

github-actions bot deployed to Netlify July 14, 2025 14:56 View deployment

github-actions bot deployed to Netlify July 14, 2025 15:23 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 15:39 View deployment

github-actions bot deployed to Netlify July 14, 2025 15:54 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 16:06 View deployment

github-actions bot deployed to Netlify July 14, 2025 17:00 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 17:02 View deployment

github-actions bot deployed to Netlify July 14, 2025 17:07 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 17:18 View deployment

github-actions bot deployed to Netlify July 14, 2025 17:24 View deployment

github-actions bot deployed to Netlify July 14, 2025 17:34 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 17:47 View deployment

github-actions bot deployed to Netlify July 14, 2025 17:58 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 18:09 View deployment

Cleanup tests

59df028

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

Half-Shot force-pushed the hs/update-toggles-to-use-consistent-style branch from 90b60cf to 59df028 Compare July 14, 2025 18:14

Half-Shot marked this pull request as ready for review July 14, 2025 18:15

Merge branch 'develop' into hs/update-toggles-to-use-consistent-style

7fe9d61

Half-Shot requested review from a team as code owners July 14, 2025 18:15

Half-Shot requested review from dbkr, MidhunSureshR and andybalaam July 14, 2025 18:15

github-actions bot deployed to Netlify July 14, 2025 18:18 View deployment

github-actions bot deployed to EndToEndTests July 14, 2025 18:29 View deployment

t3chguy requested changes Jul 15, 2025

View reviewed changes

Half-Shot mentioned this pull request Jul 15, 2025

Add Playwright tests for settings toggles #30318

Open

4 tasks

andybalaam approved these changes Jul 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

Half-Shot commented Jun 19, 2025 •

edited

Loading

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

t3chguy Jul 15, 2025

Uh oh!

andybalaam left a comment

Uh oh!

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

Half-Shot commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andybalaam left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Half-Shot commented Jun 19, 2025 •

edited

Loading