diff --git a/playwright/e2e/room-directory/room-directory.spec.ts b/playwright/e2e/room-directory/room-directory.spec.ts
index 6d08650895..5068f8e5cc 100644
--- a/playwright/e2e/room-directory/room-directory.spec.ts
+++ b/playwright/e2e/room-directory/room-directory.spec.ts
@@ -41,9 +41,9 @@ test.describe("Room Directory", () => {
         // Publish into the public rooms directory
         const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
         await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue("#gaming:localhost");
-        const checkbox = publishedAddresses.getByLabel(
-            "Publish this room to the public in localhost's room directory?",
-        );
+        const checkbox = publishedAddresses
+            .locator(".mx_SettingsFlag", { hasText: "Publish this room to the public in localhost's room directory?" })
+            .getByRole("switch");
         await checkbox.check();
         await expect(checkbox).toBeChecked();
 
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 29bb165e7b..c807689dd3 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -56,6 +56,11 @@ limitations under the License.
     /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
     contain: strict;
 }
+.mx_Dialog_StaticContainer,
+.mx_Dialog_Container {
+    /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
+    isolation: isolate;
+}
 
 /**
  * We need to increase the specificity of the selector to override the
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 09bfa5d241..df4a08c1d5 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
@@ -44,6 +45,8 @@ interface IState {
 }
 
 export default class SettingsFlag extends React.Component<IProps, IState> {
+    private readonly id = `mx_SettingsFlag_${randomString(12)}`;
+
     public constructor(props: IProps) {
         super(props);
 
@@ -119,7 +122,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         } else {
             return (
                 <div className="mx_SettingsFlag">
-                    <label className="mx_SettingsFlag_label">
+                    <label className="mx_SettingsFlag_label" htmlFor={this.id}>
                         <span className="mx_SettingsFlag_labelText">{label}</span>
                         {description && (
                             <div className="mx_SettingsFlag_microcopy">
@@ -139,6 +142,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         )}
                     </label>
                     <ToggleSwitch
+                        id={this.id}
                         checked={this.state.value}
                         onChange={this.onChange}
                         disabled={disabled}
diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 1262a0840b..f50f013006 100644
--- a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -120,6 +120,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         >
           <label
             class="mx_SettingsFlag_label"
+            for="mx_SettingsFlag_vY7Q4uEh9K38"
           >
             <span
               class="mx_SettingsFlag_labelText"
@@ -132,6 +133,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             aria-disabled="false"
             aria-label="Developer mode"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+            id="mx_SettingsFlag_vY7Q4uEh9K38"
             role="switch"
             tabindex="0"
           >
@@ -145,6 +147,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         >
           <label
             class="mx_SettingsFlag_label"
+            for="mx_SettingsFlag_QgU2PomxwKpa"
           >
             <span
               class="mx_SettingsFlag_labelText"
@@ -157,6 +160,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             aria-disabled="false"
             aria-label="Show hidden events in timeline"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+            id="mx_SettingsFlag_QgU2PomxwKpa"
             role="switch"
             tabindex="0"
           >
@@ -170,6 +174,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         >
           <label
             class="mx_SettingsFlag_label"
+            for="mx_SettingsFlag_6hpi3YEetmBG"
           >
             <span
               class="mx_SettingsFlag_labelText"
@@ -182,6 +187,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             aria-disabled="false"
             aria-label="Enable widget screenshots on supported widgets"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+            id="mx_SettingsFlag_6hpi3YEetmBG"
             role="switch"
             tabindex="0"
           >
@@ -195,6 +201,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         >
           <label
             class="mx_SettingsFlag_label"
+            for="mx_SettingsFlag_4yVCeEefiPqp"
           >
             <span
               class="mx_SettingsFlag_labelText"
@@ -207,6 +214,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             aria-disabled="false"
             aria-label="Force 15s voice broadcast chunk length"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+            id="mx_SettingsFlag_4yVCeEefiPqp"
             role="switch"
             tabindex="0"
           >
diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index 58aff6595b..d7ac318608 100644
--- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
@@ -74,11 +74,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
         class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
       >
         <input
-          id="checkbox_vY7Q4uEh9K"
+          id="checkbox_QgU2PomxwK"
           type="checkbox"
         />
         <label
-          for="checkbox_vY7Q4uEh9K"
+          for="checkbox_QgU2PomxwK"
         >
           <div
             class="mx_Checkbox_background"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index a069de69a5..d6574b659e 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -303,11 +303,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_vY7Q4uEh9K"
+                  id="checkbox_QgU2PomxwK"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_vY7Q4uEh9K"
+                  for="checkbox_QgU2PomxwK"
                 >
                   <div
                     class="mx_Checkbox_background"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index e0fce74b89..45e1999af6 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -40,6 +40,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_vY7Q4uEh9K38"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -52,6 +53,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show shortcuts to recently viewed rooms above the room list"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_vY7Q4uEh9K38"
                   role="switch"
                   tabindex="0"
                 >
@@ -82,6 +84,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_QgU2PomxwKpa"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -99,6 +102,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show all rooms in Home"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_QgU2PomxwKpa"
                   role="switch"
                   tabindex="0"
                 >
@@ -148,6 +152,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_6hpi3YEetmBG"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -160,6 +165,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Use Ctrl + F to search timeline"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_6hpi3YEetmBG"
                   role="switch"
                   tabindex="0"
                 >
@@ -190,6 +196,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_4yVCeEefiPqp"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -202,6 +209,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_4yVCeEefiPqp"
                   role="switch"
                   tabindex="0"
                 >
@@ -215,6 +223,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_MRMwbPDmfGtm"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -227,6 +236,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Always show message timestamps"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_MRMwbPDmfGtm"
                   role="switch"
                   tabindex="0"
                 >
@@ -266,6 +276,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_GQvdMWe954DV"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -278,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Send read receipts"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_GQvdMWe954DV"
                   role="switch"
                   tabindex="0"
                 >
@@ -291,6 +303,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_IAu5CsiHRD7n"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -303,6 +316,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Send typing notifications"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_IAu5CsiHRD7n"
                   role="switch"
                   tabindex="0"
                 >
@@ -333,6 +347,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_yrA2ohjWVJIP"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -345,6 +360,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Automatically replace plain text Emoji"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_yrA2ohjWVJIP"
                   role="switch"
                   tabindex="0"
                 >
@@ -358,6 +374,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_auy1OmnTidX4"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -381,6 +398,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Enable Markdown"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_auy1OmnTidX4"
                   role="switch"
                   tabindex="0"
                 >
@@ -394,6 +412,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_ePDS0OpWwAHG"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -406,6 +425,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Enable Emoji suggestions while typing"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_ePDS0OpWwAHG"
                   role="switch"
                   tabindex="0"
                 >
@@ -419,6 +439,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_75JNTNkNU64r"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -431,6 +452,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Use Ctrl + Enter to send a message"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_75JNTNkNU64r"
                   role="switch"
                   tabindex="0"
                 >
@@ -444,6 +466,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_aTLcRsQRlYy7"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -456,6 +479,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Surround selected text when typing special characters"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_aTLcRsQRlYy7"
                   role="switch"
                   tabindex="0"
                 >
@@ -469,6 +493,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_5nfv5bOEPN1s"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -481,6 +506,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show stickers button"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_5nfv5bOEPN1s"
                   role="switch"
                   tabindex="0"
                 >
@@ -494,6 +520,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_u1JYVtOyR5kb"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -506,6 +533,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Insert a trailing colon after user mentions at the start of a message"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_u1JYVtOyR5kb"
                   role="switch"
                   tabindex="0"
                 >
@@ -536,6 +564,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_u3pEwuLn9Enn"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -548,6 +577,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Enable automatic language detection for syntax highlighting"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_u3pEwuLn9Enn"
                   role="switch"
                   tabindex="0"
                 >
@@ -561,6 +591,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_YuxfFEpOsztW"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -573,6 +604,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Expand code blocks by default"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_YuxfFEpOsztW"
                   role="switch"
                   tabindex="0"
                 >
@@ -586,6 +618,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_hQkBerF1ejc4"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -598,6 +631,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show line numbers in code blocks"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_hQkBerF1ejc4"
                   role="switch"
                   tabindex="0"
                 >
@@ -628,6 +662,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_GFes1UFzOK2n"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -640,6 +675,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Enable inline URL previews by default"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_GFes1UFzOK2n"
                   role="switch"
                   tabindex="0"
                 >
@@ -653,6 +689,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_vfGFMldL2r2v"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -665,6 +702,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Autoplay GIFs"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_vfGFMldL2r2v"
                   role="switch"
                   tabindex="0"
                 >
@@ -678,6 +716,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_bsSwicmKUiOB"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -690,6 +729,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Autoplay videos"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_bsSwicmKUiOB"
                   role="switch"
                   tabindex="0"
                 >
@@ -703,6 +743,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dvqsxEaZtl3A"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -715,6 +756,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show previews/thumbnails for images"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_dvqsxEaZtl3A"
                   role="switch"
                   tabindex="0"
                 >
@@ -745,6 +787,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_NIiWzqsApP1c"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -757,6 +800,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show typing notifications"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_NIiWzqsApP1c"
                   role="switch"
                   tabindex="0"
                 >
@@ -770,6 +814,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_q1SIAPqLMVXh"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -782,6 +827,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show a placeholder for removed messages"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_q1SIAPqLMVXh"
                   role="switch"
                   tabindex="0"
                 >
@@ -795,6 +841,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dXFDGgBsKXay"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -807,6 +854,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show read receipts sent by other users"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_dXFDGgBsKXay"
                   role="switch"
                   tabindex="0"
                 >
@@ -820,6 +868,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_7Az0xw4Bs4Tt"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -832,6 +881,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show join/leave messages (invites/removes/bans unaffected)"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_7Az0xw4Bs4Tt"
                   role="switch"
                   tabindex="0"
                 >
@@ -845,6 +895,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_8jmzPIlPoBCv"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -857,6 +908,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show display name changes"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_8jmzPIlPoBCv"
                   role="switch"
                   tabindex="0"
                 >
@@ -870,6 +922,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_enFRaTjdsFou"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -882,6 +935,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show chat effects (animations when receiving e.g. confetti)"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_enFRaTjdsFou"
                   role="switch"
                   tabindex="0"
                 >
@@ -895,6 +949,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_bfwnd5rz4XNX"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -907,6 +962,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show profile picture changes"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_bfwnd5rz4XNX"
                   role="switch"
                   tabindex="0"
                 >
@@ -920,6 +976,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_gs5uWEzYzZrS"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -932,6 +989,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show avatars in user, room and event mentions"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_gs5uWEzYzZrS"
                   role="switch"
                   tabindex="0"
                 >
@@ -945,6 +1003,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_qWg7OgID1yRR"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -957,6 +1016,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Enable big emoji in chat"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_qWg7OgID1yRR"
                   role="switch"
                   tabindex="0"
                 >
@@ -970,6 +1030,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_pOPewl7rtMbV"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -982,6 +1043,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Jump to the bottom of the timeline when you send a message"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_pOPewl7rtMbV"
                   role="switch"
                   tabindex="0"
                 >
@@ -995,6 +1057,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_cmt3PZSyNp3v"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1007,6 +1070,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show current profile picture and name for users in message history"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_cmt3PZSyNp3v"
                   role="switch"
                   tabindex="0"
                 >
@@ -1037,6 +1101,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dJJz3lHUv9XX"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1049,6 +1114,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show NSFW content"
                   class="mx_AccessibleButton mx_ToggleSwitch"
+                  id="mx_SettingsFlag_dJJz3lHUv9XX"
                   role="switch"
                   tabindex="0"
                 >
@@ -1079,6 +1145,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_SBSSOZDRlzlA"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1091,6 +1158,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Prompt before sending invites to potentially invalid matrix IDs"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_SBSSOZDRlzlA"
                   role="switch"
                   tabindex="0"
                 >
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index ea53192542..7e2940026f 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -293,6 +293,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_vY7Q4uEh9K38"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -305,6 +306,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                   aria-disabled="false"
                   aria-label="Never send encrypted messages to unverified sessions from this session"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+                  id="mx_SettingsFlag_vY7Q4uEh9K38"
                   role="switch"
                   tabindex="0"
                 >
@@ -370,6 +372,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_QgU2PomxwKpa"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -382,6 +385,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                   aria-disabled="false"
                   aria-label="Manually verify all remote sessions"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+                  id="mx_SettingsFlag_QgU2PomxwKpa"
                   role="switch"
                   tabindex="0"
                 >