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 14:30:05 +02:00
committed by GitHub
parent 7ce368537b
commit 80024991aa
95 changed files with 1247 additions and 1173 deletions
@@ -4,7 +4,7 @@ exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = `
<div>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
role="img"
@@ -35,7 +35,7 @@ exports[`E2eMessageSharedIcon renders correctly for an unknown user 1`] = `
<div>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
role="img"
@@ -56,7 +56,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_14k_"
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -83,7 +83,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_14p_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_14u_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -125,7 +125,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_153_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3,7 +3,7 @@
exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
<button
aria-label="Chat"
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-indicator="default"
data-kind="primary"
@@ -25,13 +25,13 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_1_"
aria-labelledby="react-use-id-1"
class="mx_PinnedEventTile_sender mx_Username_color2"
>
@alice:server.org
</span>
<button
aria-describedby="_r_0_"
aria-describedby="react-use-id-2"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -39,7 +39,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_6_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -65,7 +65,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_0_"
id="react-use-id-2"
>
<div
class="mx_EventTile_body translate"
@@ -104,13 +104,13 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_a_"
aria-labelledby="react-use-id-1"
class="mx_PinnedEventTile_sender mx_Username_color2"
>
@alice:server.org
</span>
<button
aria-describedby="_r_9_"
aria-describedby="react-use-id-2"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -118,7 +118,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_f_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -144,7 +144,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_9_"
id="react-use-id-2"
>
<div
class="mx_EventTile_body translate"
@@ -187,7 +187,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
<div
aria-label="Open menu"
aria-labelledby="radix-_r_14_"
aria-labelledby="radix-react-use-id-1"
aria-orientation="vertical"
class="_menu_1kl3y_8"
data-align="start"
@@ -196,7 +196,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
data-side="right"
data-state="open"
dir="ltr"
id="radix-_r_15_"
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"
@@ -378,7 +378,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
<div
aria-label="Open menu"
aria-labelledby="radix-_r_o_"
aria-labelledby="radix-react-use-id-1"
aria-orientation="vertical"
class="_menu_1kl3y_8"
data-align="start"
@@ -387,7 +387,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
data-side="right"
data-state="open"
dir="ltr"
id="radix-_r_p_"
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"
@@ -10,14 +10,14 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
role="region"
>
<button
aria-describedby="_r_a_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_a_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -68,14 +68,14 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
role="region"
>
<button
aria-describedby="_r_4_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_4_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -150,14 +150,14 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
role="region"
>
<button
aria-describedby="_r_7_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_7_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -208,14 +208,14 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
role="region"
>
<button
aria-describedby="_r_6_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_6_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -266,14 +266,14 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
role="region"
>
<button
aria-describedby="_r_9_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_9_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -324,14 +324,14 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
role="region"
>
<button
aria-describedby="_r_8_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_8_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -382,14 +382,14 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
role="region"
>
<button
aria-describedby="_r_2_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_2_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -460,14 +460,14 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
role="region"
>
<button
aria-describedby="_r_3_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_3_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -542,14 +542,14 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
role="region"
>
<button
aria-describedby="_r_1_"
aria-describedby="react-use-id-1"
aria-label="View the pinned message in the timeline and the newest pinned message here"
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
id="_r_1_"
id="react-use-id-1"
>
<div
class="mx_PinnedMessageBanner_Indicators"
@@ -4,7 +4,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
<div
class="_tooltip_1nqnq_8"
data-floating-ui-focusable=""
id="_r_6_"
id="react-use-id-1"
role="tooltip"
style="position: absolute; left: 0px; top: 0px; transform: translate(5px, -6px);"
tabindex="-1"
@@ -22,7 +22,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
stroke="none"
/>
<clippath
id="_r_9_"
id="react-use-id-2"
>
<rect
height="10"
@@ -33,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
</clippath>
</svg>
<span
id="_r_4_"
id="react-use-id-3"
>
Alice
</span>
<span
class="_caption_1nqnq_28 cpd-theme-dark"
id="_r_5_"
id="react-use-id-4"
>
@alice:example.org
</span>
@@ -19,7 +19,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
</p>
</div>
<button
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -94,7 +94,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
</p>
</div>
<button
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -54,7 +54,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
class="mx_MemberTileView_right"
>
<div
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="mx_E2EIconView"
>
<svg
@@ -130,7 +130,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
class="mx_MemberTileView_right"
>
<div
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="mx_E2EIconView"
>
<svg