From 474eab853e65170a7b7089fd7d9a730b83c8ed5c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 11:55:26 +0000
Subject: [PATCH 1/7] Fix Compound tooltips in Dialogs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/_common.pcss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 29bb165e7b1..c807689dd38 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

From c5e159b4934f4339edfb23672c383e175cc02246 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 11:56:53 +0000
Subject: [PATCH 2/7] Fix setting labels not being correctly linked

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/LabelledToggleSwitch.tsx | 4 ++--
 src/components/views/elements/SettingsFlag.tsx         | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/LabelledToggleSwitch.tsx b/src/components/views/elements/LabelledToggleSwitch.tsx
index 2a1540920b2..a48bbe3709e 100644
--- a/src/components/views/elements/LabelledToggleSwitch.tsx
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -51,17 +51,17 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
         const { label, caption } = this.props;
         let firstPart = (
             <span className="mx_SettingsFlag_label">
-                <div id={this.id}>{label}</div>
+                <label htmlFor={this.id}>{label}</label>
                 {caption && <Caption id={`${this.id}_caption`}>{caption}</Caption>}
             </span>
         );
         let secondPart = (
             <ToggleSwitch
+                id={this.id}
                 checked={this.props.value}
                 disabled={this.props.disabled}
                 onChange={this.props.onChange}
                 tooltip={this.props.tooltip}
-                aria-labelledby={this.id}
                 aria-describedby={caption ? `${this.id}_caption` : undefined}
             />
         );
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 09bfa5d2419..df4a08c1d57 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}

From 68131cfa0c4efb141685d7b6ad32ca17c115443a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 12:21:04 +0000
Subject: [PATCH 3/7] Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../DevtoolsDialog-test.tsx.snap              |  8 +++
 .../LocationShareMenu-test.tsx.snap           |  8 +--
 .../FontScalingPanel-test.tsx.snap            |  4 +-
 .../__snapshots__/Notifications-test.tsx.snap |  8 +--
 .../Notifications2-test.tsx.snap              | 64 ++++++++---------
 .../AppearanceUserSettingsTab-test.tsx.snap   |  4 +-
 .../PreferencesUserSettingsTab-test.tsx.snap  | 68 +++++++++++++++++++
 .../SecurityUserSettingsTab-test.tsx.snap     |  4 ++
 .../SpaceSettingsVisibilityTab-test.tsx.snap  |  8 +--
 9 files changed, 128 insertions(+), 48 deletions(-)

diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 1262a0840b4..f50f013006c 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/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 6bf73720a57..a00523f1f56 100644
--- a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -25,17 +25,17 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <span
       class="mx_SettingsFlag_label"
     >
-      <div
-        id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+      <label
+        for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       >
         Enable live location sharing
-      </div>
+      </label>
     </span>
     <div
       aria-checked="false"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+      id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       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 58aff6595bf..d7ac3186080 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/__snapshots__/Notifications-test.tsx.snap b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index bf6c01e50bb..e539cc5878d 100644
--- a/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     <span
       class="mx_SettingsFlag_label"
     >
-      <div
-        id="mx_LabelledToggleSwitch_testid_0"
+      <label
+        for="mx_LabelledToggleSwitch_testid_0"
       >
         Enable notifications for this account
-      </div>
+      </label>
       <span
         class="mx_Caption"
         id="mx_LabelledToggleSwitch_testid_0_caption"
@@ -25,8 +25,8 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       aria-checked="false"
       aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_testid_0"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+      id="mx_LabelledToggleSwitch_testid_0"
       role="switch"
       tabindex="0"
     >
diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 5c75d69e0b6..a7e8456dca2 100644
--- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -25,17 +25,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              <label
+                for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
-              </div>
+              </label>
             </span>
             <div
               aria-checked="true"
               aria-disabled="true"
-              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+              id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
               tabindex="0"
             >
@@ -50,17 +50,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              <label
+                for="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
-              </div>
+              </label>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
               tabindex="0"
             >
@@ -75,17 +75,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              <label
+                for="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
-              </div>
+              </label>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
               tabindex="0"
             >
@@ -100,17 +100,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              <label
+                for="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
-              </div>
+              </label>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"
               tabindex="0"
             >
@@ -744,17 +744,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              <label
+                for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
-              </div>
+              </label>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
               tabindex="0"
             >
@@ -769,17 +769,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              <label
+                for="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
-              </div>
+              </label>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
               tabindex="0"
             >
@@ -794,17 +794,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              <label
+                for="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
-              </div>
+              </label>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
               tabindex="0"
             >
@@ -819,17 +819,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <div
-                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              <label
+                for="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
-              </div>
+              </label>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+              id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"
               tabindex="0"
             >
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 a069de69a50..d6574b659e9 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 e0fce74b89a..45e1999af68 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 ea531925421..7e2940026f2 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"
                 >
diff --git a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 60a1dac734e..4e6d854058c 100644
--- a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -121,17 +121,17 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                   <span
                     class="mx_SettingsFlag_label"
                   >
-                    <div
-                      id="mx_LabelledToggleSwitch_testid_0"
+                    <label
+                      for="mx_LabelledToggleSwitch_testid_0"
                     >
                       Preview Space
-                    </div>
+                    </label>
                   </span>
                   <div
                     aria-checked="true"
                     aria-disabled="false"
-                    aria-labelledby="mx_LabelledToggleSwitch_testid_0"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+                    id="mx_LabelledToggleSwitch_testid_0"
                     role="switch"
                     tabindex="0"
                   >

From 9f042695f57caad34b50403327ae59f75419d394 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 13:14:48 +0000
Subject: [PATCH 4/7] Fix playwright test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 playwright/e2e/room-directory/room-directory.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playwright/e2e/room-directory/room-directory.spec.ts b/playwright/e2e/room-directory/room-directory.spec.ts
index 6d086508955..5068f8e5cc0 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();
 

From 4dd12474719758b8f80da975e34761c0515bdb3b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 13:18:44 +0000
Subject: [PATCH 5/7] Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/LabelledToggleSwitch.tsx    | 3 ++-
 .../__snapshots__/LocationShareMenu-test.tsx.snap         | 7 ++++---
 .../SpaceSettingsVisibilityTab-test.tsx.snap              | 8 +++++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/LabelledToggleSwitch.tsx b/src/components/views/elements/LabelledToggleSwitch.tsx
index a48bbe3709e..a8fbf10aff5 100644
--- a/src/components/views/elements/LabelledToggleSwitch.tsx
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -51,7 +51,7 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
         const { label, caption } = this.props;
         let firstPart = (
             <span className="mx_SettingsFlag_label">
-                <label htmlFor={this.id}>{label}</label>
+                <div id={this.id}>{label}</div>
                 {caption && <Caption id={`${this.id}_caption`}>{caption}</Caption>}
             </span>
         );
@@ -62,6 +62,7 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
                 disabled={this.props.disabled}
                 onChange={this.props.onChange}
                 tooltip={this.props.tooltip}
+                aria-labelledby={this.id}
                 aria-describedby={caption ? `${this.id}_caption` : undefined}
             />
         );
diff --git a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index a00523f1f56..6554156dd68 100644
--- a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -25,15 +25,16 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <span
       class="mx_SettingsFlag_label"
     >
-      <label
-        for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+      <div
+        id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       >
         Enable live location sharing
-      </label>
+      </div>
     </span>
     <div
       aria-checked="false"
       aria-disabled="false"
+      aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       role="switch"
diff --git a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 4e6d854058c..1e19e06aa6a 100644
--- a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
   aria-disabled="false"
   aria-labelledby="mx_LabelledToggleSwitch_testid_1"
   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+  id="mx_LabelledToggleSwitch_testid_1"
   role="switch"
   tabindex="0"
 >
@@ -121,15 +122,16 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                   <span
                     class="mx_SettingsFlag_label"
                   >
-                    <label
-                      for="mx_LabelledToggleSwitch_testid_0"
+                    <div
+                      id="mx_LabelledToggleSwitch_testid_0"
                     >
                       Preview Space
-                    </label>
+                    </div>
                   </span>
                   <div
                     aria-checked="true"
                     aria-disabled="false"
+                    aria-labelledby="mx_LabelledToggleSwitch_testid_0"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
                     id="mx_LabelledToggleSwitch_testid_0"
                     role="switch"

From 8fa230e2def96db336f9db5ab7a7e09035c68b71 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 13:34:04 +0000
Subject: [PATCH 6/7] Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../__snapshots__/Notifications-test.tsx.snap |  7 ++-
 .../Notifications2-test.tsx.snap              | 56 +++++++++++--------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index e539cc5878d..5e262f61eb1 100644
--- a/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     <span
       class="mx_SettingsFlag_label"
     >
-      <label
-        for="mx_LabelledToggleSwitch_testid_0"
+      <div
+        id="mx_LabelledToggleSwitch_testid_0"
       >
         Enable notifications for this account
-      </label>
+      </div>
       <span
         class="mx_Caption"
         id="mx_LabelledToggleSwitch_testid_0_caption"
@@ -25,6 +25,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       aria-checked="false"
       aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
       aria-disabled="false"
+      aria-labelledby="mx_LabelledToggleSwitch_testid_0"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       id="mx_LabelledToggleSwitch_testid_0"
       role="switch"
diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index a7e8456dca2..db696622d1f 100644
--- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -25,15 +25,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              <div
+                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
-              </label>
+              </div>
             </span>
             <div
               aria-checked="true"
               aria-disabled="true"
+              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
               id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
@@ -50,15 +51,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              <div
+                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
-              </label>
+              </div>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
@@ -75,15 +77,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              <div
+                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
-              </label>
+              </div>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
@@ -100,15 +103,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              <div
+                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
-              </label>
+              </div>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"
@@ -744,15 +748,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
+              <div
+                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
-              </label>
+              </div>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
@@ -769,15 +774,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_QgU2PomxwKpa"
+              <div
+                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
-              </label>
+              </div>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
@@ -794,15 +800,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_6hpi3YEetmBG"
+              <div
+                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
-              </label>
+              </div>
             </span>
             <div
               aria-checked="false"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
@@ -819,15 +826,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <span
               class="mx_SettingsFlag_label"
             >
-              <label
-                for="mx_LabelledToggleSwitch_4yVCeEefiPqp"
+              <div
+                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
-              </label>
+              </div>
             </span>
             <div
               aria-checked="true"
               aria-disabled="false"
+              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"

From 7a962cb0eb26e47e6edd96352bbf2c0054c40888 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 21 Dec 2023 13:36:44 +0000
Subject: [PATCH 7/7] Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/LabelledToggleSwitch.tsx    | 1 -
 .../__snapshots__/LocationShareMenu-test.tsx.snap         | 1 -
 .../settings/__snapshots__/Notifications-test.tsx.snap    | 1 -
 .../__snapshots__/Notifications2-test.tsx.snap            | 8 --------
 .../SpaceSettingsVisibilityTab-test.tsx.snap              | 2 --
 5 files changed, 13 deletions(-)

diff --git a/src/components/views/elements/LabelledToggleSwitch.tsx b/src/components/views/elements/LabelledToggleSwitch.tsx
index a8fbf10aff5..2a1540920b2 100644
--- a/src/components/views/elements/LabelledToggleSwitch.tsx
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -57,7 +57,6 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
         );
         let secondPart = (
             <ToggleSwitch
-                id={this.id}
                 checked={this.props.value}
                 disabled={this.props.disabled}
                 onChange={this.props.onChange}
diff --git a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 6554156dd68..6bf73720a57 100644
--- a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -36,7 +36,6 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
       aria-disabled="false"
       aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       role="switch"
       tabindex="0"
     >
diff --git a/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index 5e262f61eb1..bf6c01e50bb 100644
--- a/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -27,7 +27,6 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       aria-disabled="false"
       aria-labelledby="mx_LabelledToggleSwitch_testid_0"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-      id="mx_LabelledToggleSwitch_testid_0"
       role="switch"
       tabindex="0"
     >
diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index db696622d1f..5c75d69e0b6 100644
--- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -36,7 +36,6 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               aria-disabled="true"
               aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-              id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
               tabindex="0"
             >
@@ -62,7 +61,6 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
               tabindex="0"
             >
@@ -88,7 +86,6 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
               tabindex="0"
             >
@@ -114,7 +111,6 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"
               tabindex="0"
             >
@@ -759,7 +755,6 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               role="switch"
               tabindex="0"
             >
@@ -785,7 +780,6 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               role="switch"
               tabindex="0"
             >
@@ -811,7 +805,6 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               role="switch"
               tabindex="0"
             >
@@ -837,7 +830,6 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               aria-disabled="false"
               aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-              id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               role="switch"
               tabindex="0"
             >
diff --git a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 1e19e06aa6a..60a1dac734e 100644
--- a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -6,7 +6,6 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
   aria-disabled="false"
   aria-labelledby="mx_LabelledToggleSwitch_testid_1"
   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-  id="mx_LabelledToggleSwitch_testid_1"
   role="switch"
   tabindex="0"
 >
@@ -133,7 +132,6 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                     aria-disabled="false"
                     aria-labelledby="mx_LabelledToggleSwitch_testid_0"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-                    id="mx_LabelledToggleSwitch_testid_0"
                     role="switch"
                     tabindex="0"
                   >