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/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -54,10 +54,10 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
               />
             </svg>
           </a>
-          <div
+          <span
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >
-            <div
+            <button
               aria-label="Copy"
               class="mx_AccessibleButton mx_CopyableText_copyButton"
               role="button"
@@ -77,8 +77,8 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
-            </div>
-          </div>
+            </button>
+          </span>
         </div>
       </div>
       <span

apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -94,10 +94,10 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                   />
                 </svg>
               </a>
-              <div
+              <span
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >
-                <div
+                <button
                   aria-label="Copy"
                   class="mx_AccessibleButton mx_CopyableText_copyButton"
                   role="button"
@@ -117,8 +117,8 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
-                </div>
-              </div>
+                </button>
+              </span>
             </div>
           </div>
           <span

apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -25,10 +25,10 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
       />
     </svg>
   </a>
-  <div
+  <span
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
-    <div
+    <button
       aria-label="Copy"
       class="mx_AccessibleButton mx_CopyableText_copyButton"
       role="button"
@@ -48,7 +48,7 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
         />
       </svg>
-    </div>
-  </div>
+    </button>
+  </span>
 </DocumentFragment>
 `;