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

apps/web/src/components/structures/SpaceHierarchy.tsx

@@ -184,6 +184,10 @@ const Tile: React.FC<ITileProps> = ({
                     aria-labelledby={checkboxLabelId}
                     checked={!!selected}
                     tabIndex={-1}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        onToggleClick();
+                    }}
                 />
             );
         } else {
@@ -311,9 +315,9 @@ const Tile: React.FC<ITileProps> = ({
             };
 
             childSection = (
-                <div className="mx_SpaceHierarchy_subspace_children" onKeyDown={onChildrenKeyDown} role="group">
+                <ul className="mx_SpaceHierarchy_subspace_children" onKeyDown={onChildrenKeyDown} role="group">
                     {children}
-                </div>
+                </ul>
             );
         }
 

apps/web/src/components/structures/auth/ForgotPassword.tsx

@@ -12,7 +12,7 @@ import React, { type JSX, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Button } from "@vector-im/compound-web";
+import { Button, Form } from "@vector-im/compound-web";
 
 import { _t, _td } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -380,7 +380,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
             <>
                 <LockSolidIcon className="mx_AuthBody_lockIcon" />
                 <h1>{_t("auth|reset_password_title")}</h1>
-                <form onSubmit={this.onSubmitForm}>
+                <Form.Root onSubmit={this.onSubmitForm}>
                     <fieldset disabled={this.state.phase === Phase.ResettingPassword}>
                         <div className="mx_AuthBody_fieldRow">
                             <PassphraseField
@@ -413,6 +413,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             <StyledCheckbox
                                 onChange={() => this.setState({ logoutDevices: !this.state.logoutDevices })}
                                 checked={this.state.logoutDevices}
+                                formWrap={false}
                             >
                                 {_t("auth|reset_password|sign_out_other_devices")}
                             </StyledCheckbox>
@@ -422,7 +423,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             {submitButtonChild}
                         </Button>
                     </fieldset>
-                </form>
+                </Form.Root>
             </>
         );
     }