PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Prepare for switching AccessibleTooltipButton to using Compound Tooltips (#12082)

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2024-01-02 09:21:53 +00:00 committed by GitHub
parent f6fc91196f
commit 176237ee9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 97 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
playwright/e2e/room-directory/room-directory.spec.ts
View file

@ -41,9 +41,9 @@ test.describe("Room Directory", () => {
// Publish into the public rooms directory // Publish into the public rooms directory
const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" }); const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue("#gaming:localhost"); await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue("#gaming:localhost");
const checkbox = publishedAddresses.getByLabel( const checkbox = publishedAddresses
"Publish this room to the public in localhost's room directory?", .locator(".mx_SettingsFlag", { hasText: "Publish this room to the public in localhost's room directory?" })
); .getByRole("switch");
await checkbox.check(); await checkbox.check();
await expect(checkbox).toBeChecked(); await expect(checkbox).toBeChecked();

5
res/css/_common.pcss
View file

@ -56,6 +56,11 @@ limitations under the License.
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
contain: strict; 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 * We need to increase the specificity of the selector to override the

6
src/components/views/elements/SettingsFlag.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
@ -44,6 +45,8 @@ interface IState {
} }
export default class SettingsFlag extends React.Component<IProps, IState> { export default class SettingsFlag extends React.Component<IProps, IState> {
private readonly id = `mx_SettingsFlag_${randomString(12)}`;
public constructor(props: IProps) { public constructor(props: IProps) {
super(props); super(props);
@ -119,7 +122,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
} else { } else {
return ( return (
<div className="mx_SettingsFlag"> <div className="mx_SettingsFlag">
<label className="mx_SettingsFlag_label"> <label className="mx_SettingsFlag_label" htmlFor={this.id}>
<span className="mx_SettingsFlag_labelText">{label}</span> <span className="mx_SettingsFlag_labelText">{label}</span>
{description && ( {description && (
<div className="mx_SettingsFlag_microcopy"> <div className="mx_SettingsFlag_microcopy">
@ -139,6 +142,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
)} )}
</label> </label>
<ToggleSwitch <ToggleSwitch
id={this.id}
checked={this.state.value} checked={this.state.value}
onChange={this.onChange} onChange={this.onChange}
disabled={disabled} disabled={disabled}

8
test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file

@ -120,6 +120,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -132,6 +133,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Developer mode" aria-label="Developer mode"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -145,6 +147,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QgU2PomxwKpa"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -157,6 +160,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Show hidden events in timeline" aria-label="Show hidden events in timeline"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_QgU2PomxwKpa"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -170,6 +174,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_6hpi3YEetmBG"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -182,6 +187,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Enable widget screenshots on supported widgets" aria-label="Enable widget screenshots on supported widgets"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_6hpi3YEetmBG"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -195,6 +201,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_4yVCeEefiPqp"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -207,6 +214,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Force 15s voice broadcast chunk length" aria-label="Force 15s voice broadcast chunk length"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_4yVCeEefiPqp"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >

4
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View file

@ -74,11 +74,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid" class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
> >
<input <input
id="checkbox_vY7Q4uEh9K" id="checkbox_QgU2PomxwK"
type="checkbox" type="checkbox"
/> />
<label <label
for="checkbox_vY7Q4uEh9K" for="checkbox_QgU2PomxwK"
> >
<div <div
class="mx_Checkbox_background" class="mx_Checkbox_background"

4
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file

@ -303,11 +303,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid" class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
> >
<input <input
id="checkbox_vY7Q4uEh9K" id="checkbox_QgU2PomxwK"
type="checkbox" type="checkbox"
/> />
<label <label
for="checkbox_vY7Q4uEh9K" for="checkbox_QgU2PomxwK"
> >
<div <div
class="mx_Checkbox_background" class="mx_Checkbox_background"

68
test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View file

@ -40,6 +40,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -52,6 +53,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show shortcuts to recently viewed rooms above the room list" aria-label="Show shortcuts to recently viewed rooms above the room list"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -82,6 +84,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QgU2PomxwKpa"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -99,6 +102,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show all rooms in Home" aria-label="Show all rooms in Home"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_QgU2PomxwKpa"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -148,6 +152,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_6hpi3YEetmBG"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -160,6 +165,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Use Ctrl + F to search timeline" aria-label="Use Ctrl + F to search timeline"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_6hpi3YEetmBG"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -190,6 +196,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_4yVCeEefiPqp"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -202,6 +209,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)" aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_4yVCeEefiPqp"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -215,6 +223,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_MRMwbPDmfGtm"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -227,6 +236,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Always show message timestamps" aria-label="Always show message timestamps"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_MRMwbPDmfGtm"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -266,6 +276,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_GQvdMWe954DV"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -278,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Send read receipts" aria-label="Send read receipts"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_GQvdMWe954DV"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -291,6 +303,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_IAu5CsiHRD7n"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -303,6 +316,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Send typing notifications" aria-label="Send typing notifications"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_IAu5CsiHRD7n"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -333,6 +347,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_yrA2ohjWVJIP"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -345,6 +360,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Automatically replace plain text Emoji" aria-label="Automatically replace plain text Emoji"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_yrA2ohjWVJIP"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -358,6 +374,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_auy1OmnTidX4"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -381,6 +398,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Enable Markdown" aria-label="Enable Markdown"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_auy1OmnTidX4"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -394,6 +412,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_ePDS0OpWwAHG"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -406,6 +425,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Enable Emoji suggestions while typing" aria-label="Enable Emoji suggestions while typing"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_ePDS0OpWwAHG"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -419,6 +439,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_75JNTNkNU64r"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -431,6 +452,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Use Ctrl + Enter to send a message" aria-label="Use Ctrl + Enter to send a message"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_75JNTNkNU64r"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -444,6 +466,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_aTLcRsQRlYy7"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -456,6 +479,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Surround selected text when typing special characters" aria-label="Surround selected text when typing special characters"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_aTLcRsQRlYy7"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -469,6 +493,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_5nfv5bOEPN1s"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -481,6 +506,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show stickers button" aria-label="Show stickers button"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_5nfv5bOEPN1s"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -494,6 +520,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_u1JYVtOyR5kb"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -506,6 +533,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Insert a trailing colon after user mentions at the start of a message" aria-label="Insert a trailing colon after user mentions at the start of a message"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_u1JYVtOyR5kb"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -536,6 +564,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_u3pEwuLn9Enn"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -548,6 +577,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Enable automatic language detection for syntax highlighting" aria-label="Enable automatic language detection for syntax highlighting"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_u3pEwuLn9Enn"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -561,6 +591,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_YuxfFEpOsztW"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -573,6 +604,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Expand code blocks by default" aria-label="Expand code blocks by default"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_YuxfFEpOsztW"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -586,6 +618,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_hQkBerF1ejc4"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -598,6 +631,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show line numbers in code blocks" aria-label="Show line numbers in code blocks"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_hQkBerF1ejc4"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -628,6 +662,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_GFes1UFzOK2n"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -640,6 +675,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Enable inline URL previews by default" aria-label="Enable inline URL previews by default"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_GFes1UFzOK2n"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -653,6 +689,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vfGFMldL2r2v"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -665,6 +702,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Autoplay GIFs" aria-label="Autoplay GIFs"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_vfGFMldL2r2v"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -678,6 +716,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_bsSwicmKUiOB"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -690,6 +729,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Autoplay videos" aria-label="Autoplay videos"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_bsSwicmKUiOB"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -703,6 +743,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_dvqsxEaZtl3A"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -715,6 +756,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show previews/thumbnails for images" aria-label="Show previews/thumbnails for images"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_dvqsxEaZtl3A"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -745,6 +787,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_NIiWzqsApP1c"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -757,6 +800,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show typing notifications" aria-label="Show typing notifications"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_NIiWzqsApP1c"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -770,6 +814,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_q1SIAPqLMVXh"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -782,6 +827,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show a placeholder for removed messages" aria-label="Show a placeholder for removed messages"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_q1SIAPqLMVXh"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -795,6 +841,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_dXFDGgBsKXay"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -807,6 +854,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show read receipts sent by other users" aria-label="Show read receipts sent by other users"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_dXFDGgBsKXay"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -820,6 +868,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_7Az0xw4Bs4Tt"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -832,6 +881,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show join/leave messages (invites/removes/bans unaffected)" aria-label="Show join/leave messages (invites/removes/bans unaffected)"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_7Az0xw4Bs4Tt"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -845,6 +895,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_8jmzPIlPoBCv"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -857,6 +908,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show display name changes" aria-label="Show display name changes"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_8jmzPIlPoBCv"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -870,6 +922,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_enFRaTjdsFou"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -882,6 +935,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show chat effects (animations when receiving e.g. confetti)" aria-label="Show chat effects (animations when receiving e.g. confetti)"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_enFRaTjdsFou"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -895,6 +949,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_bfwnd5rz4XNX"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -907,6 +962,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show profile picture changes" aria-label="Show profile picture changes"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_bfwnd5rz4XNX"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -920,6 +976,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_gs5uWEzYzZrS"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -932,6 +989,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show avatars in user, room and event mentions" aria-label="Show avatars in user, room and event mentions"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_gs5uWEzYzZrS"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -945,6 +1003,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_qWg7OgID1yRR"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -957,6 +1016,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Enable big emoji in chat" aria-label="Enable big emoji in chat"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_qWg7OgID1yRR"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -970,6 +1030,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_pOPewl7rtMbV"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -982,6 +1043,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Jump to the bottom of the timeline when you send a message" aria-label="Jump to the bottom of the timeline when you send a message"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_pOPewl7rtMbV"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -995,6 +1057,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_cmt3PZSyNp3v"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -1007,6 +1070,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show current profile picture and name for users in message history" aria-label="Show current profile picture and name for users in message history"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_cmt3PZSyNp3v"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -1037,6 +1101,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_dJJz3lHUv9XX"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -1049,6 +1114,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Show NSFW content" aria-label="Show NSFW content"
class="mx_AccessibleButton mx_ToggleSwitch" class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_dJJz3lHUv9XX"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -1079,6 +1145,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_SBSSOZDRlzlA"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -1091,6 +1158,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true" aria-disabled="true"
aria-label="Prompt before sending invites to potentially invalid matrix IDs" aria-label="Prompt before sending invites to potentially invalid matrix IDs"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
id="mx_SettingsFlag_SBSSOZDRlzlA"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >

4
test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
View file

@ -293,6 +293,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -305,6 +306,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Never send encrypted messages to unverified sessions from this session" aria-label="Never send encrypted messages to unverified sessions from this session"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >
@ -370,6 +372,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
> >
<label <label
class="mx_SettingsFlag_label" class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QgU2PomxwKpa"
> >
<span <span
class="mx_SettingsFlag_labelText" class="mx_SettingsFlag_labelText"
@ -382,6 +385,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
aria-disabled="false" aria-disabled="false"
aria-label="Manually verify all remote sessions" aria-label="Manually verify all remote sessions"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_QgU2PomxwKpa"
role="switch" role="switch"
tabindex="0" tabindex="0"
> >