Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 176237e

Browse files
t3chguyt3chguy
authored
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>
1 parent f6fc911 commit 176237e

File tree

8 files changed

+97
-8
lines changed

8 files changed

+97
-8
lines changed

‎playwright/e2e/room-directory/room-directory.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ test.describe("Room Directory", () => {
4141
// Publish into the public rooms directory
4242
const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
4343
await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue("#gaming:localhost");
44-
const checkbox = publishedAddresses.getByLabel(
45-
"Publish this room to the public in localhost's room directory?",
46-
);
44+
const checkbox = publishedAddresses
45+
.locator(".mx_SettingsFlag", { hasText: "Publish this room to the public in localhost's room directory?" })
46+
.getByRole("switch");
4747
await checkbox.check();
4848
await expect(checkbox).toBeChecked();
4949

‎res/css/_common.pcss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ limitations under the License.
5656
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
5757
contain: strict;
5858
}
59+
.mx_Dialog_StaticContainer,
60+
.mx_Dialog_Container {
61+
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
62+
isolation: isolate;
63+
}
5964

6065
/**
6166
* We need to increase the specificity of the selector to override the

‎src/components/views/elements/SettingsFlag.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ limitations under the License.
1616
*/
1717

1818
import React from "react";
19+
import { randomString } from "matrix-js-sdk/src/randomstring";
1920

2021
import SettingsStore from "../../../settings/SettingsStore";
2122
import { _t } from "../../../languageHandler";
@@ -44,6 +45,8 @@ interface IState {
4445
}
4546

4647
export default class SettingsFlag extends React.Component<IProps, IState> {
48+
private readonly id = `mx_SettingsFlag_${randomString(12)}`;
49+
4750
public constructor(props: IProps) {
4851
super(props);
4952

@@ -119,7 +122,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
119122
} else {
120123
return (
121124
<div className="mx_SettingsFlag">
122-
<label className="mx_SettingsFlag_label">
125+
<label className="mx_SettingsFlag_label" htmlFor={this.id}>
123126
<span className="mx_SettingsFlag_labelText">{label}</span>
124127
{description && (
125128
<div className="mx_SettingsFlag_microcopy">
@@ -139,6 +142,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
139142
)}
140143
</label>
141144
<ToggleSwitch
145+
id={this.id}
142146
checked={this.state.value}
143147
onChange={this.onChange}
144148
disabled={disabled}

‎test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
120120
>
121121
<label
122122
class="mx_SettingsFlag_label"
123+
for="mx_SettingsFlag_vY7Q4uEh9K38"
123124
>
124125
<span
125126
class="mx_SettingsFlag_labelText"
@@ -132,6 +133,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
132133
aria-disabled="false"
133134
aria-label="Developer mode"
134135
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
136+
id="mx_SettingsFlag_vY7Q4uEh9K38"
135137
role="switch"
136138
tabindex="0"
137139
>
@@ -145,6 +147,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
145147
>
146148
<label
147149
class="mx_SettingsFlag_label"
150+
for="mx_SettingsFlag_QgU2PomxwKpa"
148151
>
149152
<span
150153
class="mx_SettingsFlag_labelText"
@@ -157,6 +160,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
157160
aria-disabled="false"
158161
aria-label="Show hidden events in timeline"
159162
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
163+
id="mx_SettingsFlag_QgU2PomxwKpa"
160164
role="switch"
161165
tabindex="0"
162166
>
@@ -170,6 +174,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
170174
>
171175
<label
172176
class="mx_SettingsFlag_label"
177+
for="mx_SettingsFlag_6hpi3YEetmBG"
173178
>
174179
<span
175180
class="mx_SettingsFlag_labelText"
@@ -182,6 +187,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
182187
aria-disabled="false"
183188
aria-label="Enable widget screenshots on supported widgets"
184189
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
190+
id="mx_SettingsFlag_6hpi3YEetmBG"
185191
role="switch"
186192
tabindex="0"
187193
>
@@ -195,6 +201,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
195201
>
196202
<label
197203
class="mx_SettingsFlag_label"
204+
for="mx_SettingsFlag_4yVCeEefiPqp"
198205
>
199206
<span
200207
class="mx_SettingsFlag_labelText"
@@ -207,6 +214,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
207214
aria-disabled="false"
208215
aria-label="Force 15s voice broadcast chunk length"
209216
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
217+
id="mx_SettingsFlag_4yVCeEefiPqp"
210218
role="switch"
211219
tabindex="0"
212220
>

‎test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
7474
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
7575
>
7676
<input
77-
id="checkbox_vY7Q4uEh9K"
77+
id="checkbox_QgU2PomxwK"
7878
type="checkbox"
7979
/>
8080
<label
81-
for="checkbox_vY7Q4uEh9K"
81+
for="checkbox_QgU2PomxwK"
8282
>
8383
<div
8484
class="mx_Checkbox_background"

‎test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -303,11 +303,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
303303
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
304304
>
305305
<input
306-
id="checkbox_vY7Q4uEh9K"
306+
id="checkbox_QgU2PomxwK"
307307
type="checkbox"
308308
/>
309309
<label
310-
for="checkbox_vY7Q4uEh9K"
310+
for="checkbox_QgU2PomxwK"
311311
>
312312
<div
313313
class="mx_Checkbox_background"

0 commit comments

Comments
 (0)