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

* Move toggle switch for integration manager for a11y

* Update test

* add toggle_label

* lint

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