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
@@ -19,7 +19,7 @@ exports[`<BaseCard /> should close when clicking X button 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"
@@ -19,7 +19,7 @@ exports[`<ExtensionsCard /> should render empty state 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"
@@ -120,7 +120,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
</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"
@@ -19,7 +19,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
</p>
</div>
<button
aria-labelledby="_r_f_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -101,7 +101,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</p>
</div>
<button
aria-labelledby="_r_l_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -159,13 +159,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_s_"
aria-labelledby="react-use-id-2"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
<button
aria-describedby="_r_r_"
aria-describedby="react-use-id-3"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -173,7 +173,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_11_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -199,7 +199,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_r_"
id="react-use-id-3"
>
<div
class="mx_EventTile_body translate"
@@ -240,13 +240,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_14_"
aria-labelledby="react-use-id-5"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
<button
aria-describedby="_r_13_"
aria-describedby="react-use-id-6"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -254,7 +254,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_19_"
id="radix-react-use-id-7"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -280,7 +280,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_13_"
id="react-use-id-6"
>
<div
class="mx_EventTile_body translate"
@@ -329,7 +329,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</p>
</div>
<button
aria-labelledby="_r_10u_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -387,13 +387,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_115_"
aria-labelledby="react-use-id-2"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
<button
aria-describedby="_r_114_"
aria-describedby="react-use-id-3"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -401,7 +401,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_11a_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -427,7 +427,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_114_"
id="react-use-id-3"
>
<div
class="mx_EventTile_body translate"
@@ -468,13 +468,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="mx_PinnedEventTile_top"
>
<span
aria-labelledby="_r_11d_"
aria-labelledby="react-use-id-5"
class="mx_PinnedEventTile_sender mx_Username_color3"
>
@alice:example.org
</span>
<button
aria-describedby="_r_11c_"
aria-describedby="react-use-id-6"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
@@ -482,7 +482,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_11i_"
id="radix-react-use-id-7"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@@ -508,7 +508,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</div>
<div
class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
id="_r_11c_"
id="react-use-id-6"
>
<div
class="mx_EventTile_body translate"
@@ -15,7 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="_r_e_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -235,7 +235,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<input
aria-hidden="true"
class="_input_udcm8_24"
id="_r_j_"
id="react-use-id-2"
role="switch"
tabindex="-1"
type="checkbox"
@@ -754,7 +754,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
class="mx_BaseCard_header_spacer"
/>
<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"
@@ -932,7 +932,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<input
aria-hidden="true"
class="_input_udcm8_24"
id="_r_5_"
id="react-use-id-2"
role="switch"
tabindex="-1"
type="checkbox"
@@ -1451,7 +1451,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="_r_7_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -1671,7 +1671,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<input
aria-hidden="true"
class="_input_udcm8_24"
id="_r_c_"
id="react-use-id-2"
role="switch"
tabindex="-1"
type="checkbox"
@@ -19,7 +19,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</p>
</div>
<button
aria-labelledby="_r_7c_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -321,7 +321,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</p>
</div>
<button
aria-labelledby="_r_7m_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"