From bb8bf24e866242a2e37833a701f80f7d29fa2b14 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 27 Mar 2026 15:01:00 +0000
Subject: [PATCH] Fix more remaining issues

---
 apps/web/res/css/_common.pcss                 |  2 +-
 .../WidgetCapabilitiesPromptDialog.tsx        |  7 +-
 .../views/settings/Notifications.tsx          | 38 +++++++---
 .../tabs/user/NotificationUserSettingsTab.tsx | 10 +--
 .../__snapshots__/DialogSidebar-test.tsx.snap |  2 +-
 .../views/settings/Notifications-test.tsx     |  8 +-
 .../notifications/Notifications2-test.tsx     | 73 +++++--------------
 .../Notifications2-test.tsx.snap              |  8 +-
 8 files changed, 59 insertions(+), 89 deletions(-)

diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss
index 4aa304c543..dadd96a95b 100644
--- a/apps/web/res/css/_common.pcss
+++ b/apps/web/res/css/_common.pcss
@@ -163,7 +163,7 @@ b {
     font-weight: bold;
 }
 
-h2:not(.mx_Heading_h4) {
+h2:not([class^="mx_Heading_"]) {
     color: $primary-content;
     font: var(--cpd-font-heading-lg-regular);
     letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
diff --git a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 33ca9c510b..6f71f0762c 100644
--- a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -104,7 +104,12 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
 
             return (
                 <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap + i}>
-                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)} description={text.byline}>
+                    <StyledCheckbox
+                        checked={isChecked}
+                        onChange={() => this.onToggle(cap)}
+                        description={text.byline}
+                        formWrap={false}
+                    >
                         {text.primary}
                     </StyledCheckbox>
                 </div>
diff --git a/apps/web/src/components/views/settings/Notifications.tsx b/apps/web/src/components/views/settings/Notifications.tsx
index 15e530c57b..d308814760 100644
--- a/apps/web/src/components/views/settings/Notifications.tsx
+++ b/apps/web/src/components/views/settings/Notifications.tsx
@@ -651,7 +651,16 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
         // If all the rules are inhibited, don't show anything.
         if (this.isInhibited) {
-            return masterSwitch;
+            return (
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    {masterSwitch}
+                </Form.Root>
+            );
         }
 
         const emailSwitches = (this.state.threepids || [])
@@ -669,19 +678,26 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
         return (
             <SettingsSubsection>
-                {masterSwitch}
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    {masterSwitch}
 
-                <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
+                    <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
 
-                {this.state.deviceNotificationsEnabled && (
-                    <>
-                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
-                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
-                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
-                    </>
-                )}
+                    {this.state.deviceNotificationsEnabled && (
+                        <>
+                            <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                            <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
+                            <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
+                        </>
+                    )}
 
-                {emailSwitches}
+                    {emailSwitches}
+                </Form.Root>
             </SettingsSubsection>
         );
     }
diff --git a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
index b1c5474c3c..b63e790736 100644
--- a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
@@ -7,7 +7,6 @@ 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";
@@ -26,14 +25,7 @@ export default class NotificationUserSettingsTab extends React.Component {
                     <NotificationSettings2 />
                 ) : (
                     <SettingsSection>
-                        <Form.Root
-                            onSubmit={(evt) => {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                            }}
-                        >
-                            <Notifications />
-                        </Form.Root>
+                        <Notifications />
                     </SettingsSection>
                 )}
             </SettingsTab>
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index d060c278bf..e76d7dfb3f 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -72,7 +72,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <a
-                aria-labelledby="_r_4_"
+                aria-labelledby="_r_8_"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"
diff --git a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
index 6e349baef0..864ca485fa 100644
--- a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
@@ -37,7 +37,6 @@ 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";
@@ -249,12 +248,7 @@ const pushRules: IPushRules = {
 const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
 
 describe("<Notifications />", () => {
-    const getComponent = () =>
-        render(
-            <Form.Root>
-                <Notifications />
-            </Form.Root>,
-        );
+    const getComponent = () => render(<Notifications />);
 
     // get component, wait for async data and force a render
     const getComponentAndWait = async () => {
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx b/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
index 2c9df7e4d6..92cc5c70e0 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
@@ -18,7 +18,6 @@ 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";
@@ -168,9 +167,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -186,9 +183,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -226,9 +221,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -263,9 +256,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -294,9 +285,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -321,9 +310,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -345,9 +332,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -375,9 +360,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -401,9 +384,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -425,9 +406,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -455,9 +434,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -481,9 +458,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -510,9 +485,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -531,9 +504,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -644,9 +615,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -705,9 +674,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -727,9 +694,7 @@ describe("<Notifications />", () => {
 
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();
@@ -756,9 +721,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 5e14103fe1..d7fba02175 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   checked=""
                   class="_input_udcm8_24"
                   disabled=""
-                  id="_r_0_"
+                  id="_r_1f_"
                   role="switch"
                   type="checkbox"
                 />
@@ -41,7 +41,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             >
               <label
                 class="_label_19upo_59"
-                for="_r_0_"
+                for="_r_1f_"
               >
                 Enable notifications for this account
               </label>
@@ -786,7 +786,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_11_"
+                        aria-describedby="_r_2g_"
                         checked=""
                         class="_input_153f2_18"
                         disabled=""
@@ -826,7 +826,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_11_"
+                      id="_r_2g_"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>