Fix React hydration issues (#32958)
* Add more playwright axe tests to settings dialogs * Add utility to jest setupTests to detect React hydration errors * Iterate jest utility * Fix axe issue heading-order * Fix div-in-p issues * Fix setupTests.ts * Fix heading order * Make types happier * Fix hydration issues of thead containing text nodes * Update tests * Fix form-in-form React hydration issues * Fix li-in-li React hydration issues * Fix checked in form without onChange React hydration issue * Fix styling bleeding from _common.pcss * Update snapshots * Fix more remaining issues * Remove _common.pcss h2 rule altogether * Fix test * Update snapshots * Iterate * Iterate * Update snapshots * Simplify diff * Test * Update screenshots * Update screenshot
This commit is contained in:
Michael Telatynski
+90
-89
@@ -378,114 +378,115 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<ul
|
||||
class="mx_SpaceHierarchy_subspace_children"
|
||||
role="group"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
aria-labelledby="_r_k_"
|
||||
class="mx_SpaceHierarchy_roomTileWrapper"
|
||||
role="treeitem"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_item"
|
||||
<li
|
||||
aria-labelledby="_r_k_"
|
||||
class="mx_SpaceHierarchy_roomTileWrapper"
|
||||
role="treeitem"
|
||||
>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_avatar"
|
||||
>
|
||||
<span
|
||||
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
|
||||
data-color="2"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
>
|
||||
N
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_name"
|
||||
>
|
||||
<span
|
||||
id="_r_k_"
|
||||
>
|
||||
Nested room
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_info"
|
||||
>
|
||||
3 members
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_actions"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
Join
|
||||
</div>
|
||||
<span
|
||||
aria-labelledby="_r_l_"
|
||||
tabindex="0"
|
||||
>
|
||||
<form
|
||||
class="_root_19upo_16"
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_item"
|
||||
>
|
||||
<div
|
||||
class="_inline-field_19upo_32"
|
||||
class="mx_SpaceHierarchy_roomTile_avatar"
|
||||
>
|
||||
<div
|
||||
class="_inline-field-control_19upo_44"
|
||||
<span
|
||||
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
|
||||
data-color="2"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 20px;"
|
||||
>
|
||||
N
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_name"
|
||||
>
|
||||
<span
|
||||
id="_r_k_"
|
||||
>
|
||||
Nested room
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_roomTile_info"
|
||||
>
|
||||
3 members
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpaceHierarchy_actions"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
Join
|
||||
</div>
|
||||
<span
|
||||
aria-labelledby="_r_l_"
|
||||
tabindex="0"
|
||||
>
|
||||
<form
|
||||
class="_root_19upo_16"
|
||||
>
|
||||
<div
|
||||
class="_container_153f2_10"
|
||||
class="_inline-field_19upo_32"
|
||||
>
|
||||
<input
|
||||
aria-labelledby="_r_k_"
|
||||
class="_input_153f2_18"
|
||||
disabled=""
|
||||
id="checkbox_RD7nyrA2oh"
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="_ui_153f2_19"
|
||||
class="_inline-field-control_19upo_44"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
class="_container_153f2_10"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
<input
|
||||
aria-labelledby="_r_k_"
|
||||
class="_input_153f2_18"
|
||||
disabled=""
|
||||
id="checkbox_RD7nyrA2oh"
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
type="checkbox"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="_ui_153f2_19"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_inline-field-body_19upo_38"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_inline-field-body_19upo_38"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
aria-labelledby="_r_t_"
|
||||
@@ -967,7 +968,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<ul
|
||||
class="mx_SpaceHierarchy_subspace_children"
|
||||
role="group"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user