From 176237ee9b97210252f02001dfcb711dd62dd581 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 2 Jan 2024 09:21:53 +0000 Subject: [PATCH] Prepare for switching AccessibleTooltipButton to using Compound Tooltips (#12082) * Fix Compound tooltips in Dialogs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix setting labels not being correctly linked Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix playwright test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../e2e/room-directory/room-directory.spec.ts | 6 +- res/css/_common.pcss | 5 ++ .../views/elements/SettingsFlag.tsx | 6 +- .../DevtoolsDialog-test.tsx.snap | 8 +++ .../FontScalingPanel-test.tsx.snap | 4 +- .../AppearanceUserSettingsTab-test.tsx.snap | 4 +- .../PreferencesUserSettingsTab-test.tsx.snap | 68 +++++++++++++++++++ .../SecurityUserSettingsTab-test.tsx.snap | 4 ++ 8 files changed, 97 insertions(+), 8 deletions(-) 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 { + private readonly id = `mx_SettingsFlag_${randomString(12)}`; + public constructor(props: IProps) { super(props); @@ -119,7 +122,7 @@ export default class SettingsFlag extends React.Component { } else { return (
-