Move toggle switch for integration manager for a11y (#29436)

* Move toggle switch for integration manager for a11y

* Update test

* add toggle_label

* lint

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

@@ -91,7 +91,7 @@ test.describe("Security user settings tab", () => {
             await expect(tab.getByText(`Identity server (identity.example.org)`, { exact: true })).toBeVisible();
         });
 
-        test("should enable show integrations as enabled", async ({ app, page, user }) => {
+        test("should show integrations as enabled", async ({ app, page, user }) => {
             const tab = await app.settings.openUserSettings("Security");
 
             const setIntegrationManager = tab.locator(".mx_SetIntegrationManager");
@@ -102,7 +102,9 @@ test.describe("Security user settings tab", () => {
                 }),
             ).toBeVisible();
             // Make sure integration manager's toggle switch is enabled
-            await expect(setIntegrationManager.locator(".mx_ToggleSwitch_enabled")).toBeVisible();
+            const toggleswitch = setIntegrationManager.getByLabel("Enable the integration manager");
+            await expect(toggleswitch).toBeVisible();
+            await expect(toggleswitch).toBeChecked();
             await expect(setIntegrationManager.locator(".mx_SetIntegrationManager_heading_manager")).toHaveText(
                 "Manage integrations(scalar.vector.im)",
             );

res/css/views/settings/_SetIntegrationManager.pcss

@@ -7,19 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_SetIntegrationManager {
-    .mx_SettingsFlag {
+    .mx_SetIntegrationManager_heading_manager {
+        display: flex;
         align-items: center;
-
-        .mx_SetIntegrationManager_heading_manager {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            column-gap: $spacing-4;
-        }
-
-        .mx_ToggleSwitch {
-            align-self: flex-start;
-            min-width: var(--ToggleSwitch-min-width); /* avoid compression */
-        }
+        flex-wrap: wrap;
+        column-gap: $spacing-4;
+    }
+    form {
+        margin-top: var(--cpd-space-3x);
     }
 }

src/components/views/settings/SetIntegrationManager.tsx

@@ -9,13 +9,13 @@ 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 { _t } from "../../../languageHandler";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { type IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance";
 import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
-import ToggleSwitch from "../elements/ToggleSwitch";
 import Heading from "../typography/Heading";
 import { SettingsSubsectionText } from "./shared/SettingsSubsection";
 import { UIFeature } from "../../../settings/UIFeature";
@@ -66,26 +66,33 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
         if (!SettingsStore.getValue(UIFeature.Widgets)) return null;
 
         return (
-            <label
-                className="mx_SetIntegrationManager"
-                data-testid="mx_SetIntegrationManager"
-                htmlFor="toggle_integration"
-            >
+            <div 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>
                     </div>
-                    <ToggleSwitch
-                        id="toggle_integration"
-                        checked={this.state.provisioningEnabled}
-                        disabled={false}
-                        onChange={this.onProvisioningToggled}
-                    />
                 </div>
                 <SettingsSubsectionText>{bodyText}</SettingsSubsectionText>
                 <SettingsSubsectionText>{_t("integration_manager|explainer")}</SettingsSubsectionText>
-            </label>
+                <Root>
+                    <InlineField
+                        name="enable_im"
+                        control={
+                            <ToggleInput
+                                role="switch"
+                                id="mx_SetIntegrationManager_Toggle"
+                                checked={this.state.provisioningEnabled}
+                                onChange={this.onProvisioningToggled}
+                            />
+                        }
+                    >
+                        <Label htmlFor="mx_SetIntegrationManager_Toggle">
+                            {_t("integration_manager|toggle_label")}
+                        </Label>
+                    </InlineField>
+                </Root>
+            </div>
         );
     }
 }

src/i18n/strings/en_EN.json

@@ -1306,6 +1306,7 @@
         "error_connecting_heading": "Cannot connect to integration manager",
         "explainer": "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.",
         "manage_title": "Manage integrations",
+        "toggle_label": "Enable the integration manager",
         "use_im": "Use an integration manager to manage bots, widgets, and sticker packs.",
         "use_im_default": "Use an integration manager <b>(%(serverName)s)</b> to manage bots, widgets, and sticker packs."
     },

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

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SetIntegrationManager should render manage integrations sections 1`] = `
-<label
+<div
   class="mx_SetIntegrationManager"
   data-testid="mx_SetIntegrationManager"
-  for="toggle_integration"
 >
   <div
     class="mx_SettingsFlag"
@@ -23,18 +22,6 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
         (scalar.vector.im)
       </h4>
     </div>
-    <div
-      aria-checked="false"
-      aria-disabled="false"
-      class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      id="toggle_integration"
-      role="switch"
-      tabindex="0"
-    >
-      <div
-        class="mx_ToggleSwitch_ball"
-      />
-    </div>
   </div>
   <div
     class="mx_SettingsSubsection_text"
@@ -52,5 +39,40 @@ 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>
-</label>
+  <form
+    class="_root_19upo_16"
+  >
+    <div
+      class="_inline-field_19upo_32"
+    >
+      <div
+        class="_inline-field-control_19upo_44"
+      >
+        <div
+          class="_container_19o42_10"
+        >
+          <input
+            class="_input_19o42_24"
+            id="mx_SetIntegrationManager_Toggle"
+            role="switch"
+            type="checkbox"
+          />
+          <div
+            class="_ui_19o42_34"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="mx_SetIntegrationManager_Toggle"
+        >
+          Enable the integration manager
+        </label>
+      </div>
+    </div>
+  </form>
+</div>
 `;

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

@@ -8,10 +8,9 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
     <div
       class="mx_SettingsTab_sections"
     >
-      <label
+      <div
         class="mx_SetIntegrationManager"
         data-testid="mx_SetIntegrationManager"
-        for="toggle_integration"
       >
         <div
           class="mx_SettingsFlag"
@@ -30,18 +29,6 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               (scalar.vector.im)
             </h4>
           </div>
-          <div
-            aria-checked="true"
-            aria-disabled="false"
-            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-            id="toggle_integration"
-            role="switch"
-            tabindex="0"
-          >
-            <div
-              class="mx_ToggleSwitch_ball"
-            />
-          </div>
         </div>
         <div
           class="mx_SettingsSubsection_text"
@@ -59,7 +46,43 @@ 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>
-      </label>
+        <form
+          class="_root_19upo_16"
+        >
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_19o42_10"
+              >
+                <input
+                  checked=""
+                  class="_input_19o42_24"
+                  id="mx_SetIntegrationManager_Toggle"
+                  role="switch"
+                  type="checkbox"
+                />
+                <div
+                  class="_ui_19o42_34"
+                />
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
+              <label
+                class="_label_19upo_59"
+                for="mx_SetIntegrationManager_Toggle"
+              >
+                Enable the integration manager
+              </label>
+            </div>
+          </div>
+        </form>
+      </div>
       <div
         class="mx_SettingsSection"
       >
@@ -445,7 +468,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                     >
                       <label
                         class="_label_19upo_59"
-                        for="radix-:r0:"
+                        for="radix-:r1:"
                       >
                         Enter a new identity server
                       </label>
@@ -454,7 +477,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                       >
                         <input
                           class="_control_sqdq4_10"
-                          id="radix-:r0:"
+                          id="radix-:r1:"
                           name="input"
                           placeholder=""
                           title=""