Prepare for switching AccessibleTooltipButton to using Compound Tooltips

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

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

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}

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"
           >

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"

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"