sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
+1 -1
View File
@@ -19,7 +19,7 @@ exports[`FilePanel renders 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"
apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+47 -47
View File
@@ -212,7 +212,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
</div>
</div>
<div
aria-labelledby="_r_1dt_"
aria-labelledby="react-use-id-1"
class="_banner_n7ud0_8"
data-type="critical"
role="status"
@@ -238,7 +238,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_mcq5y_24"
id="_r_1dt_"
id="react-use-id-1"
>
Could not start a chat with this user
</p>
@@ -423,7 +423,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_1an_"
aria-labelledby="react-use-id-1"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -610,7 +610,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_1bs_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -710,7 +710,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</span>
<svg
aria-label="New members see history"
aria-labelledby="_r_1dn_"
aria-labelledby="react-use-id-1"
class="mx_RoomHeader_icon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -991,7 +991,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_1dc_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1194,7 +1194,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -1221,7 +1221,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_5_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -1236,7 +1236,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_a_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1263,7 +1263,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_f_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1293,7 +1293,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
>
<div
aria-label="0 members"
aria-labelledby="_r_k_"
aria-labelledby="react-use-id-5"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -1430,7 +1430,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_12_"
aria-labelledby="react-use-id-1"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -1617,7 +1617,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_27_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1748,7 +1748,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_5i_"
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -1775,7 +1775,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_5n_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -1790,7 +1790,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
</button>
<button
aria-label="Threads"
aria-labelledby="_r_5s_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1817,7 +1817,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
</button>
<button
aria-label="Room info"
aria-labelledby="_r_61_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -1847,7 +1847,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
>
<div
aria-label="0 members"
aria-labelledby="_r_66_"
aria-labelledby="react-use-id-5"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -1914,7 +1914,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_6i_"
aria-labelledby="react-use-id-6"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -2101,7 +2101,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_7n_"
aria-labelledby="react-use-id-7"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2232,7 +2232,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_2i_"
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2259,7 +2259,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_2n_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2274,7 +2274,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_2s_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2301,7 +2301,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_31_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2331,7 +2331,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
>
<div
aria-label="0 members"
aria-labelledby="_r_36_"
aria-labelledby="react-use-id-5"
class="mx_AccessibleButton mx_FacePile mx_FacePile_toggled"
role="button"
tabindex="0"
@@ -2398,7 +2398,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_3i_"
aria-labelledby="react-use-id-6"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -2585,7 +2585,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_4n_"
aria-labelledby="react-use-id-7"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2716,7 +2716,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_fo_"
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2743,7 +2743,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ft_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2758,7 +2758,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Threads"
aria-labelledby="_r_g2_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2785,7 +2785,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Room info"
aria-labelledby="_r_g7_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -2815,7 +2815,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
>
<div
aria-label="0 members"
aria-labelledby="_r_gc_"
aria-labelledby="react-use-id-5"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -2921,7 +2921,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</span>
<svg
aria-label="New members see history"
aria-labelledby="_r_go_"
aria-labelledby="react-use-id-1"
class="mx_RoomHeader_icon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -2954,7 +2954,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_fo_"
aria-labelledby="react-use-id-2"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2981,7 +2981,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_ft_"
aria-labelledby="react-use-id-3"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -2996,7 +2996,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Threads"
aria-labelledby="_r_g2_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3023,7 +3023,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</button>
<button
aria-label="Room info"
aria-labelledby="_r_g7_"
aria-labelledby="react-use-id-5"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3053,7 +3053,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
>
<div
aria-label="0 members"
aria-labelledby="_r_gc_"
aria-labelledby="react-use-id-6"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -3122,7 +3122,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
aria-labelledby="_r_gt_"
aria-labelledby="react-use-id-7"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
data-testid="e2e-icon"
style="width: 12px; height: 12px;"
@@ -3317,7 +3317,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_i2_"
aria-labelledby="react-use-id-8"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3466,7 +3466,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Chat"
aria-labelledby="_r_lc_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3493,7 +3493,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_lh_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3520,7 +3520,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_lm_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -3550,7 +3550,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<div
aria-label="0 members"
aria-labelledby="_r_lr_"
aria-labelledby="react-use-id-4"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@@ -3635,7 +3635,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</p>
</div>
<button
aria-labelledby="_r_m4_"
aria-labelledby="react-use-id-5"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -3695,7 +3695,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<svg
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="_r_m9_"
aria-labelledby="react-use-id-6"
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
@@ -3882,7 +3882,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</div>
<button
aria-label="Attachment"
aria-labelledby="_r_ne_"
aria-labelledby="react-use-id-7"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+25 -25
View File
@@ -70,7 +70,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
role="tree"
>
<li
aria-labelledby="_r_8_"
aria-labelledby="react-use-id-1"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -100,7 +100,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_8_"
id="react-use-id-1"
>
Unnamed Room
</span>
@@ -134,7 +134,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_8_"
aria-labelledby="react-use-id-1"
class="_input_153f2_18"
id="checkbox_MwbPDmfGtm"
role="presentation"
@@ -168,7 +168,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
</div>
</li>
<li
aria-labelledby="_r_c_"
aria-labelledby="react-use-id-2"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -198,7 +198,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_c_"
id="react-use-id-2"
>
Unnamed Room
</span>
@@ -232,7 +232,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_c_"
aria-labelledby="react-use-id-2"
class="_input_153f2_18"
id="checkbox_GQvdMWe954"
role="presentation"
@@ -267,7 +267,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
</li>
<li
aria-expanded="true"
aria-labelledby="_r_g_"
aria-labelledby="react-use-id-3"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -297,7 +297,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_g_"
id="react-use-id-3"
>
Nested space
</span>
@@ -331,7 +331,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_g_"
aria-labelledby="react-use-id-3"
class="_input_153f2_18"
id="checkbox_DVIAu5CsiH"
role="presentation"
@@ -383,7 +383,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
role="group"
>
<li
aria-labelledby="_r_k_"
aria-labelledby="react-use-id-4"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -413,7 +413,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_k_"
id="react-use-id-4"
>
Nested room
</span>
@@ -435,7 +435,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
Join
</div>
<span
aria-labelledby="_r_l_"
aria-labelledby="react-use-id-5"
tabindex="0"
>
<form
@@ -451,7 +451,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_k_"
aria-labelledby="react-use-id-4"
class="_input_153f2_18"
disabled=""
id="checkbox_RD7nyrA2oh"
@@ -489,7 +489,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
</ul>
</li>
<li
aria-labelledby="_r_t_"
aria-labelledby="react-use-id-6"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -519,7 +519,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_t_"
id="react-use-id-6"
>
Knock room
</span>
@@ -553,7 +553,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_t_"
aria-labelledby="react-use-id-6"
class="_input_153f2_18"
id="checkbox_jWVJIPauy1"
role="presentation"
@@ -660,7 +660,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
role="tree"
>
<li
aria-labelledby="_r_3i_"
aria-labelledby="react-use-id-1"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -690,7 +690,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_3i_"
id="react-use-id-1"
>
Unnamed Room
</span>
@@ -724,7 +724,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_3i_"
aria-labelledby="react-use-id-1"
class="_input_153f2_18"
id="checkbox_EetmBG4yVC"
role="presentation"
@@ -758,7 +758,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
</div>
</li>
<li
aria-labelledby="_r_3m_"
aria-labelledby="react-use-id-2"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -788,7 +788,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_3m_"
id="react-use-id-2"
>
Unnamed Room
</span>
@@ -822,7 +822,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_3m_"
aria-labelledby="react-use-id-2"
class="_input_153f2_18"
id="checkbox_eEefiPqpMR"
role="presentation"
@@ -857,7 +857,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
</li>
<li
aria-expanded="true"
aria-labelledby="_r_3q_"
aria-labelledby="react-use-id-3"
class="mx_SpaceHierarchy_roomTileWrapper"
role="treeitem"
>
@@ -887,7 +887,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="mx_SpaceHierarchy_roomTile_name"
>
<span
id="_r_3q_"
id="react-use-id-3"
>
Nested space
</span>
@@ -921,7 +921,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
class="_container_153f2_10"
>
<input
aria-labelledby="_r_3q_"
aria-labelledby="react-use-id-3"
class="_input_153f2_18"
id="checkbox_MwbPDmfGtm"
role="presentation"
apps/web/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+2 -2
View File
@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
class="mx_ThreadPanelHeader"
>
<button
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -56,7 +56,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
class="mx_ThreadPanelHeader"
>
<button
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"