Move toggle switch for integration manager for a11y

Author: Half-Shot

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>
         );
     }
 }

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>
 `;