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
packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
+2 -2
View File
@@ -5,7 +5,7 @@ exports[`PlayPauseButton > renders the button in default state 1`] = `
<button
aria-disabled="false"
aria-label="Play"
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
@@ -37,7 +37,7 @@ exports[`PlayPauseButton > renders the button in playing state 1`] = `
<button
aria-disabled="false"
aria-label="Pause"
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
+3 -3
View File
@@ -11,12 +11,12 @@ exports[`Pill > renders the pill 1`] = `
/>
<span
class="Pill-module_label"
id="_r_0_"
id="react-use-id-1"
>
Pill
</span>
<button
aria-describedby="_r_0_"
aria-describedby="react-use-id-1"
aria-label="Delete"
class="_icon-button_1215g_8 mx_Dialog_nonDialogButton"
data-kind="primary"
@@ -56,7 +56,7 @@ exports[`Pill > renders the pill without close button 1`] = `
/>
<span
class="Pill-module_label"
id="_r_1_"
id="react-use-id-1"
>
Pill
</span>
packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
+3 -3
View File
@@ -11,12 +11,12 @@ exports[`RichItem > renders the list 1`] = `
>
<span
class="RichList-module_title"
id="_r_0_"
id="react-use-id-1"
>
Rich List Title
</span>
<ul
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="RichList-module_content"
role="listbox"
tabindex="0"
@@ -174,7 +174,7 @@ exports[`RichItem > renders the list with isEmpty=true 1`] = `
>
<span
class="RichList-module_title"
id="_r_1_"
id="react-use-id-1"
>
Rich List Title
</span>
packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+13 -13
View File
@@ -11,7 +11,7 @@ exports[`UserMenu > renders a button 1`] = `
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-1"
type="button"
>
<span
@@ -54,7 +54,7 @@ exports[`UserMenu > renders a button with a longer name 1`] = `
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="closed"
id="radix-_r_2_"
id="radix-react-use-id-1"
type="button"
>
<span
@@ -102,7 +102,7 @@ exports[`UserMenu > renders a guest menu 1`] = `
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="closed"
id="radix-_r_8_"
id="radix-react-use-id-1"
type="button"
>
<span
@@ -151,7 +151,7 @@ exports[`UserMenu > renders a menu 1`] = `
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="closed"
id="radix-_r_6_"
id="radix-react-use-id-1"
type="button"
>
<span
@@ -208,13 +208,13 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
class="UserMenu-module_wrapper"
>
<button
aria-controls="radix-_r_i_"
aria-controls="radix-react-use-id-1"
aria-expanded="true"
aria-haspopup="menu"
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="open"
id="radix-_r_h_"
id="radix-react-use-id-2"
type="button"
>
<span
@@ -251,7 +251,7 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
>
<div
aria-label="User menu"
aria-labelledby="radix-_r_h_"
aria-labelledby="radix-react-use-id-2"
aria-orientation="vertical"
class="UserMenu-module_container _menu_1kl3y_8"
data-align="start"
@@ -260,7 +260,7 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
data-side="right"
data-state="open"
dir="ltr"
id="radix-_r_i_"
id="radix-react-use-id-1"
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); animation: auto ease 0s 1 normal none running none; pointer-events: auto;"
tabindex="-1"
@@ -517,13 +517,13 @@ exports[`UserMenu > renders an open menu 1`] = `
class="UserMenu-module_wrapper"
>
<button
aria-controls="radix-_r_b_"
aria-controls="radix-react-use-id-1"
aria-expanded="true"
aria-haspopup="menu"
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="open"
id="radix-_r_a_"
id="radix-react-use-id-2"
type="button"
>
<span
@@ -560,7 +560,7 @@ exports[`UserMenu > renders an open menu 1`] = `
>
<div
aria-label="User menu"
aria-labelledby="radix-_r_a_"
aria-labelledby="radix-react-use-id-2"
aria-orientation="vertical"
class="UserMenu-module_container _menu_1kl3y_8"
data-align="start"
@@ -569,7 +569,7 @@ exports[`UserMenu > renders an open menu 1`] = `
data-side="right"
data-state="open"
dir="ltr"
id="radix-_r_b_"
id="radix-react-use-id-1"
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); animation: auto ease 0s 1 normal none running none; pointer-events: auto;"
tabindex="-1"
@@ -832,7 +832,7 @@ exports[`UserMenu > renders condensed view 1`] = `
aria-label="User menu"
class="UserMenu-module_triggerButton"
data-state="closed"
id="radix-_r_4_"
id="radix-react-use-id-1"
type="button"
>
<span
packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
+9 -9
View File
@@ -7,14 +7,14 @@ exports[`<GroupView /> > renders Default story 1`] = `
>
<div
data-group="true"
data-testid="_r_0_"
id="_r_0_"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="_r_1_"
id="_r_1_"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50 1 0px; overflow: visible;"
>
<div
@@ -29,22 +29,22 @@ exports[`<GroupView /> > renders Default story 1`] = `
</div>
</div>
<div
aria-controls="_r_1_"
aria-controls="react-use-id-2"
aria-orientation="vertical"
aria-valuemax="96.618"
aria-valuemin="48.309"
aria-valuenow="50"
data-separator="inactive"
data-testid="_r_2_"
id="_r_2_"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
/>
<div
data-panel="true"
data-testid="_r_3_"
id="_r_3_"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50 1 0px; overflow: visible;"
>
<div
packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
+6 -6
View File
@@ -7,8 +7,8 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
>
<div
data-group="true"
data-testid="_r_0_"
id="_r_0_"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
@@ -35,16 +35,16 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
aria-valuemin="0"
aria-valuenow="0"
data-separator="inactive"
data-testid="_r_2_"
id="_r_2_"
data-testid="react-use-id-2"
id="react-use-id-2"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
/>
<div
data-panel="true"
data-testid="_r_3_"
id="_r_3_"
data-testid="react-use-id-3"
id="react-use-id-3"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
>
<div
packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+26 -26
View File
@@ -7,14 +7,14 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
>
<div
data-group="true"
data-testid="_r_0_"
id="_r_0_"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="_r_1_"
id="_r_1_"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
>
<div
@@ -30,7 +30,7 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
</div>
</div>
<div
aria-controls="_r_1_"
aria-controls="react-use-id-2"
aria-label="Click or drag to expand"
aria-orientation="vertical"
aria-valuemax="99.502"
@@ -38,8 +38,8 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
aria-valuenow="0"
class="SeparatorView-module_separator Separator SeparatorView-module_visible"
data-separator="inactive"
data-testid="_r_2_"
id="_r_2_"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
@@ -59,8 +59,8 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
</div>
<div
data-panel="true"
data-testid="_r_7_"
id="_r_7_"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
>
<div
@@ -86,14 +86,14 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
>
<div
data-group="true"
data-testid="_r_g_"
id="_r_g_"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="_r_h_"
id="_r_h_"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 49.751 1 0px; overflow: visible;"
>
<div
@@ -109,7 +109,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
</div>
</div>
<div
aria-controls="_r_h_"
aria-controls="react-use-id-2"
aria-label="Click or drag to expand"
aria-orientation="vertical"
aria-valuemax="99.502"
@@ -117,8 +117,8 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
aria-valuenow="49.751"
class="SeparatorView-module_separator Separator SeparatorView-module_visible"
data-separator="inactive"
data-testid="_r_i_"
id="_r_i_"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
@@ -138,8 +138,8 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
</div>
<div
data-panel="true"
data-testid="_r_n_"
id="_r_n_"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50.249 1 0px; overflow: visible;"
>
<div
@@ -165,14 +165,14 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
>
<div
data-group="true"
data-testid="_r_8_"
id="_r_8_"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="_r_9_"
id="_r_9_"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.309 1 0px; overflow: visible;"
>
<div
@@ -192,8 +192,8 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
aria-orientation="vertical"
class="SeparatorView-module_separator Separator"
data-separator="inactive"
data-testid="_r_a_"
id="_r_a_"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
@@ -213,8 +213,8 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
</div>
<div
data-panel="true"
data-testid="_r_f_"
id="_r_f_"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.691 1 0px; overflow: visible;"
>
<div
packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
+13 -13
View File
@@ -30,7 +30,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
class="_icon-button_1215g_8 SpaceMenuView-module_button"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-1"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -63,11 +63,11 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_4_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
@@ -94,11 +94,11 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-labelledby="_r_b_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_9_"
id="radix-react-use-id-5"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
@@ -164,7 +164,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
class="_icon-button_1215g_8 SpaceMenuView-module_button"
data-kind="primary"
data-state="closed"
id="radix-_r_i_"
id="radix-react-use-id-1"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -197,11 +197,11 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_m_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_k_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
@@ -225,7 +225,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
</div>
</button>
<button
aria-labelledby="_r_r_"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -294,11 +294,11 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_14_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_12_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
@@ -325,11 +325,11 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-labelledby="_r_1b_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_19_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
+2 -2
View File
@@ -6,11 +6,11 @@ exports[`<ComposeMenuView /> > should match snapshot 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/OptionMenuView.test.tsx.snap
+2 -2
View File
@@ -7,11 +7,11 @@ exports[`<OptionMenuView /> > should match snapshot 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
+1 -1
View File
@@ -10,7 +10,7 @@ exports[`<SpaceMenuView /> > should match snapshot 1`] = `
class="_icon-button_1215g_8 SpaceMenuView-module_button"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-1"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
+9 -9
View File
@@ -8,7 +8,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
aria-controls="_r_0_"
aria-controls="react-use-id-1"
aria-expanded="false"
aria-label="Expand filter list"
class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -37,7 +37,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
<div
aria-label="Room list filters"
class="Flex-module_flex RoomListPrimaryFilters-module_list"
id="_r_0_"
id="react-use-id-1"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
@@ -120,7 +120,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
aria-controls="_r_3_"
aria-controls="react-use-id-1"
aria-expanded="false"
aria-label="Expand filter list"
class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -149,7 +149,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
<div
aria-label="Room list filters"
class="Flex-module_flex RoomListPrimaryFilters-module_list"
id="_r_3_"
id="react-use-id-1"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
@@ -197,7 +197,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
aria-controls="_r_4_"
aria-controls="react-use-id-1"
aria-expanded="false"
aria-label="Expand filter list"
class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -226,7 +226,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
<div
aria-label="Room list filters"
class="Flex-module_flex RoomListPrimaryFilters-module_list"
id="_r_4_"
id="react-use-id-1"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
@@ -270,7 +270,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NoFilters stor
<div
aria-label="Room list filters"
class="Flex-module_flex RoomListPrimaryFilters-module_list"
id="_r_2_"
id="react-use-id-1"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
/>
@@ -286,7 +286,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
aria-controls="_r_1_"
aria-controls="react-use-id-1"
aria-expanded="false"
aria-label="Expand filter list"
class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -315,7 +315,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
<div
aria-label="Room list filters"
class="Flex-module_flex RoomListPrimaryFilters-module_list"
id="_r_1_"
id="react-use-id-1"
role="listbox"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
+2 -2
View File
@@ -27,7 +27,7 @@ exports[`<RoomListToast /> > renders ChatMoved story 1`] = `
Chat moved
</div>
<button
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
data-kind="secondary"
role="button"
@@ -83,7 +83,7 @@ exports[`<RoomListToast /> > renders SectionCreated story 1`] = `
Section created
</div>
<button
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
data-kind="secondary"
role="button"
packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+562 -562
View File
File diff suppressed because it is too large Load Diff
packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+44 -44
View File
@@ -59,11 +59,11 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_12_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_10_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -91,11 +91,11 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_19_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_17_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -189,11 +189,11 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -221,11 +221,11 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_9_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_7_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -319,11 +319,11 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_3i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3g_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -351,11 +351,11 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_3p_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3n_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -461,11 +461,11 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_4i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_4g_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -493,11 +493,11 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_4p_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_4n_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -591,11 +591,11 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_g_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -623,11 +623,11 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_p_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_n_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -721,11 +721,11 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_42_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_40_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -753,11 +753,11 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_49_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_47_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -869,11 +869,11 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_52_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_50_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -901,11 +901,11 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_59_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_57_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -999,11 +999,11 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_22_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_20_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1031,11 +1031,11 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_29_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_27_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1152,11 +1152,11 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_1i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1g_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1184,11 +1184,11 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_1p_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1n_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1294,11 +1294,11 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_32_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_30_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1326,11 +1326,11 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_39_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_37_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1442,11 +1442,11 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_2i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2g_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1474,11 +1474,11 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_2p_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2n_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
+2 -2
View File
@@ -53,12 +53,12 @@ exports[`<RoomListSectionHeaderView /> stories > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More options"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 RoomListSectionHeaderView-module_menu"
color="var(--cpd-color-icon-primary)"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+40 -40
View File
@@ -85,11 +85,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -117,11 +117,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_9_"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_7_"
id="radix-react-use-id-4"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -228,11 +228,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_g_"
aria-labelledby="react-use-id-5"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_e_"
id="radix-react-use-id-6"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -260,11 +260,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_n_"
aria-labelledby="react-use-id-7"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_l_"
id="radix-react-use-id-8"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -356,11 +356,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_u_"
aria-labelledby="react-use-id-9"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_s_"
id="radix-react-use-id-10"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -388,11 +388,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_15_"
aria-labelledby="react-use-id-11"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_13_"
id="radix-react-use-id-12"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -478,11 +478,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_1c_"
aria-labelledby="react-use-id-13"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1a_"
id="radix-react-use-id-14"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -510,11 +510,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_1j_"
aria-labelledby="react-use-id-15"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1h_"
id="radix-react-use-id-16"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -606,11 +606,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_1q_"
aria-labelledby="react-use-id-17"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1o_"
id="radix-react-use-id-18"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -638,11 +638,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_21_"
aria-labelledby="react-use-id-19"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1v_"
id="radix-react-use-id-20"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -728,11 +728,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_28_"
aria-labelledby="react-use-id-21"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_26_"
id="radix-react-use-id-22"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -760,11 +760,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_2f_"
aria-labelledby="react-use-id-23"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2d_"
id="radix-react-use-id-24"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -879,11 +879,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_2m_"
aria-labelledby="react-use-id-25"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2k_"
id="radix-react-use-id-26"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -911,11 +911,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_2t_"
aria-labelledby="react-use-id-27"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_2r_"
id="radix-react-use-id-28"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1001,11 +1001,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_34_"
aria-labelledby="react-use-id-29"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_32_"
id="radix-react-use-id-30"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1033,11 +1033,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_3b_"
aria-labelledby="react-use-id-31"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_39_"
id="radix-react-use-id-32"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1129,11 +1129,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_3i_"
aria-labelledby="react-use-id-33"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3g_"
id="radix-react-use-id-34"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1161,11 +1161,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_3p_"
aria-labelledby="react-use-id-35"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3n_"
id="radix-react-use-id-36"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1251,11 +1251,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="_r_40_"
aria-labelledby="react-use-id-37"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3u_"
id="radix-react-use-id-38"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
@@ -1283,11 +1283,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="_r_47_"
aria-labelledby="react-use-id-39"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_45_"
id="radix-react-use-id-40"
role="button"
style="--cpd-icon-button-size: 24px; padding: 2px;"
tabindex="0"
packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
+14 -14
View File
@@ -3,7 +3,7 @@
exports[`RoomStatusBarView > renders connection lost 1`] = `
<div>
<div
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -32,7 +32,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_0_"
id="react-use-id-1"
>
Connectivity to the server has been lost.
</p>
@@ -53,7 +53,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
exports[`RoomStatusBarView > renders consent link 1`] = `
<div>
<div
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -82,7 +82,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_2_"
id="react-use-id-1"
>
You can't send any messages until you review and agree to our terms and conditions.
</p>
@@ -111,7 +111,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
exports[`RoomStatusBarView > renders local room error 1`] = `
<div>
<div
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -137,7 +137,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_6_"
id="react-use-id-1"
>
Could not start a chat with this user
</p>
@@ -174,7 +174,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
exports[`RoomStatusBarView > renders resource limit error 1`] = `
<div>
<div
aria-labelledby="_r_1_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -203,7 +203,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_1_"
id="react-use-id-1"
>
Your message wasn't sent because this homeserver has been blocked by its administrator.
</p>
@@ -237,7 +237,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
exports[`RoomStatusBarView > renders unsent messages 1`] = `
<div>
<div
aria-labelledby="_r_3_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -266,7 +266,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_3_"
id="react-use-id-1"
>
Some of your messages have not been sent
</p>
@@ -330,7 +330,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
<div>
<div
aria-labelledby="_r_4_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -359,7 +359,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_4_"
id="react-use-id-1"
>
Some of your messages have not been sent
</p>
@@ -423,7 +423,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
<div>
<div
aria-labelledby="_r_5_"
aria-labelledby="react-use-id-1"
class="Banner-module_banner"
data-type="critical"
role="status"
@@ -452,7 +452,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
id="_r_5_"
id="react-use-id-1"
>
Some of your messages have not been sent
</p>
packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
+4 -4
View File
@@ -10,7 +10,7 @@ exports[`WidgetPipView > detects back click action 1`] = `
class="WidgetPipView-module_header"
>
<button
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-back-button"
@@ -61,7 +61,7 @@ exports[`WidgetPipView > detects double click triggers back 1`] = `
class="WidgetPipView-module_header"
>
<button
aria-labelledby="_r_c_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-back-button"
@@ -112,7 +112,7 @@ exports[`WidgetPipView > detects on mouse down for drag 1`] = `
class="WidgetPipView-module_header"
>
<button
aria-labelledby="_r_i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-back-button"
@@ -163,7 +163,7 @@ exports[`WidgetPipView > renders with gray widget 1`] = `
class="WidgetPipView-module_header"
>
<button
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="secondary"
data-testid="base-card-back-button"
packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap
+5 -5
View File
@@ -6,15 +6,15 @@ exports[`UploadButton > can open the menu and select an option 1`] = `
data-aria-hidden="true"
>
<button
aria-controls="radix-_r_f_"
aria-controls="radix-react-use-id-1"
aria-disabled="false"
aria-expanded="true"
aria-haspopup="menu"
aria-labelledby="_r_g_"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="open"
id="radix-_r_e_"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 26px;"
tabindex="0"
@@ -47,11 +47,11 @@ exports[`UploadButton > renders a default button 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-labelledby="_r_2_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--cpd-icon-button-size: 26px;"
tabindex="0"
packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
+4 -4
View File
@@ -6,7 +6,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu with all options
data-aria-hidden="true"
>
<button
aria-controls="radix-_r_1_"
aria-controls="radix-react-use-id-1"
aria-disabled="false"
aria-expanded="true"
aria-haspopup="menu"
@@ -14,7 +14,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu with all options
class="_icon-button_1215g_8"
data-kind="primary"
data-state="open"
id="radix-_r_0_"
id="radix-react-use-id-2"
inert=""
role="button"
style="--cpd-icon-button-size: 24px;"
@@ -47,7 +47,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu without only bas
data-aria-hidden="true"
>
<button
aria-controls="radix-_r_b_"
aria-controls="radix-react-use-id-1"
aria-disabled="false"
aria-expanded="true"
aria-haspopup="menu"
@@ -55,7 +55,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu without only bas
class="_icon-button_1215g_8"
data-kind="primary"
data-state="open"
id="radix-_r_a_"
id="radix-react-use-id-2"
inert=""
role="button"
style="--cpd-icon-button-size: 24px;"
packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
+2 -2
View File
@@ -100,7 +100,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
role="none"
/>
<div
aria-controls="radix-_r_1_"
aria-controls="radix-react-use-id-1"
aria-expanded="true"
aria-haspopup="menu"
aria-label="Jump to date"
@@ -108,7 +108,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
class="Flex-module_flex DateSeparatorView-module_content"
data-state="open"
data-testid="jump-to-date-separator-button"
id="radix-_r_0_"
id="radix-react-use-id-2"
role="button"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
tabindex="0"
packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
+3 -3
View File
@@ -4,7 +4,7 @@ exports[`E2ePadlock > renders a 'DecryptionFailure' icon 1`] = `
<div>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_c_"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
data-testid="e2e-padlock"
role="img"
@@ -30,7 +30,7 @@ exports[`E2ePadlock > renders a 'Normal' icon 1`] = `
<div>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
data-testid="e2e-padlock"
role="img"
@@ -61,7 +61,7 @@ exports[`E2ePadlock > renders a 'Warning' icon 1`] = `
<div>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="E2ePadlock-module_e2ePadlock"
data-testid="e2e-padlock"
role="img"
packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
+4 -4
View File
@@ -15,7 +15,7 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
<button
aria-disabled="false"
aria-label="Play"
aria-labelledby="_r_0_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
@@ -106,7 +106,7 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
<button
aria-disabled="false"
aria-label="Play"
aria-labelledby="_r_i_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
@@ -202,7 +202,7 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
<button
aria-disabled="false"
aria-label="Play"
aria-labelledby="_r_6_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
@@ -293,7 +293,7 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
<button
aria-disabled="false"
aria-label="Play"
aria-labelledby="_r_c_"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 PlayPauseButton-module_button"
data-kind="primary"
role="button"
packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/__snapshots__/ReactionsRowButtonTooltip.test.tsx.snap
+2 -2
View File
@@ -3,7 +3,7 @@
exports[`ReactionsRowButtonTooltip > renders the tooltip with formatted senders and caption 1`] = `
<div>
<button
aria-describedby="_r_2_"
aria-describedby="react-use-id-1"
>
👍 3
</button>
@@ -13,7 +13,7 @@ exports[`ReactionsRowButtonTooltip > renders the tooltip with formatted senders
exports[`ReactionsRowButtonTooltip > renders the tooltip with many senders 1`] = `
<div>
<button
aria-describedby="_r_8_"
aria-describedby="react-use-id-1"
>
❤️ 8
</button>
packages/shared-components/src/test/setupTests.ts
+38 -1
View File
@@ -7,11 +7,48 @@ Please see LICENSE files in the repository root for full details.
import fetchMock from "@fetch-mock/vitest";
import { cleanup } from "@test-utils";
import { afterEach } from "vitest";
import { afterEach, expect } from "vitest";
import { setLanguage } from "../../src/core/i18n/i18n";
import en from "../i18n/strings/en_EN.json";
const REACT_USE_ID = /_r_[a-z0-9]+_/g;
function normaliseReactUseIds(snapshot: string): string {
// React useId values can vary between runs and make snapshots flaky:
// https://github.com/element-hq/element-web/issues/31765
// Avoid running the regex for DOM snapshots without React useId output.
if (!snapshot.includes("_r_")) return snapshot;
const ids = new Map<string, string>();
let nextId = 1;
return snapshot.replace(REACT_USE_ID, (id) => {
let replacement = ids.get(id);
if (!replacement) {
replacement = `react-use-id-${nextId++}`;
ids.set(id, replacement);
}
return replacement;
});
}
// Prevent this serializer from recursively matching the same DOM node when it calls serialize().
let isSerializingDomSnapshot = false;
expect.addSnapshotSerializer({
test: (value: unknown): value is Element | DocumentFragment =>
!isSerializingDomSnapshot && (value instanceof Element || value instanceof DocumentFragment),
print: (value: unknown, serialize: (value: unknown) => string): string => {
isSerializingDomSnapshot = true;
try {
return normaliseReactUseIds(serialize(value));
} finally {
isSerializingDomSnapshot = false;
}
},
});
function setupLanguageMock(): void {
fetchMock
.get("end:/i18n/languages.json", {