Stabilise React useId values in DOM snapshots in element-web (#33579)

* Stabilise React useId values in DOM snapshots - app/web

* Stabilise React useId values in DOM snapshots - shared components

* Update additional snapshots

* Added comments and changed replace pattern to 'react-use-id-N'
This commit is contained in:
rbondesson
2026-05-21 13:30:05 +01:00
committed by GitHub
parent 7ce368537b
commit 80024991aa
95 changed files with 1247 additions and 1173 deletions
@@ -15,7 +15,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-label="User menu"
class="_triggerButton_1yvpq_57 mx_UserMenu"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-1"
type="button"
>
<span
@@ -329,11 +329,11 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-expanded="false"
aria-haspopup="menu"
aria-label="Threads"
aria-labelledby="_r_14_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_ThreadsActivityCentreButton"
data-kind="primary"
data-state="closed"
id="radix-_r_12_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@@ -361,7 +361,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<button
aria-expanded="false"
aria-label="Quick settings"
aria-labelledby="_r_19_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8 mx_QuickSettingsButton"
data-kind="primary"
role="button"
@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
<input
checked=""
class="_input_udcm8_24"
id="_r_h_"
id="react-use-id-1"
role="switch"
type="checkbox"
/>
@@ -133,7 +133,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
<input
checked=""
class="_input_udcm8_24"
id="_r_3j_"
id="react-use-id-1"
role="switch"
type="checkbox"
/>
@@ -147,13 +147,13 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
>
<label
class="_label_19upo_59"
for="_r_3j_"
for="react-use-id-1"
>
Preview space
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_3l_"
id="radix-react-use-id-2"
>
Allow people to preview your space before they join.
</span>
@@ -248,7 +248,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
<input
class="_input_udcm8_24"
disabled=""
id="_r_3u_"
id="react-use-id-3"
role="switch"
type="checkbox"
/>
@@ -262,13 +262,13 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
>
<label
class="_label_19upo_59"
for="_r_3u_"
for="react-use-id-3"
>
Publish this room to the public in matrix.org's room directory?
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_40_"
id="radix-react-use-id-4"
>
You must have permission to set the main address to publish this room.
</span>
@@ -500,7 +500,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
<input
checked=""
class="_input_udcm8_24"
id="_r_0_"
id="react-use-id-1"
role="switch"
type="checkbox"
/>
@@ -514,13 +514,13 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
>
<label
class="_label_19upo_59"
for="_r_0_"
for="react-use-id-1"
>
Preview space
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_2_"
id="radix-react-use-id-2"
>
Allow people to preview your space before they join.
</span>
@@ -2,7 +2,7 @@
exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
<div
aria-labelledby="radix-_r_1m_"
aria-labelledby="radix-react-use-id-1"
aria-orientation="vertical"
class="_menu_1kl3y_8"
data-align="start"
@@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
data-side="top"
data-state="open"
dir="ltr"
id="radix-_r_1n_"
id="radix-react-use-id-2"
role="menu"
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
tabindex="-1"
>
<h3
class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
id="_r_1u_"
id="react-use-id-3"
>
Threads activity
</h3>
@@ -127,7 +127,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
<div
aria-labelledby="radix-_r_2a_"
aria-labelledby="radix-react-use-id-1"
aria-orientation="vertical"
class="_menu_1kl3y_8"
data-align="start"
@@ -136,14 +136,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
data-side="top"
data-state="open"
dir="ltr"
id="radix-_r_2b_"
id="radix-react-use-id-2"
role="menu"
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
tabindex="-1"
>
<h3
class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
id="_r_2i_"
id="react-use-id-3"
>
Threads activity
</h3>
@@ -161,7 +161,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
<div
aria-labelledby="radix-_r_2j_"
aria-labelledby="radix-react-use-id-1"
aria-orientation="vertical"
class="_menu_1kl3y_8"
data-align="start"
@@ -170,14 +170,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
data-side="top"
data-state="open"
dir="ltr"
id="radix-_r_2k_"
id="radix-react-use-id-2"
role="menu"
style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
tabindex="-1"
>
<h3
class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
id="_r_2r_"
id="react-use-id-3"
>
Threads activity
</h3>