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