Ensure all <tr> elements have tbody, thead or tfoot parents

The latest Preact release warns about `<tr>` elements that have a `<table>` as their direct parent. See preactjs/preact#4375.
hypothesis · May 20, 2024 · d29a10c · d29a10c
1 parent 560e56d
commit d29a10c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/components/data/test/TableCell-test.js b/src/components/data/test/TableCell-test.js
@@ -13,11 +13,13 @@ describe('TableCell', () => {
     return mount(
       <TableContext.Provider value={tableContextValue}>
         <table>
-          <TableSectionContext.Provider value={contextValue}>
-            <tr>
-              <TableCell {...props}>{props.children ?? 'Content'}</TableCell>
-            </tr>
-          </TableSectionContext.Provider>
+          <tbody>
+            <TableSectionContext.Provider value={contextValue}>
+              <tr>
+                <TableCell {...props}>{props.children ?? 'Content'}</TableCell>
+              </tr>
+            </TableSectionContext.Provider>
+          </tbody>
         </table>
       </TableContext.Provider>,
     );
@@ -28,9 +30,11 @@ describe('TableCell', () => {
   const contentFn = (Component, props = {}) => {
     return mount(
       <table>
-        <tr>
-          <Component {...props} />
-        </tr>
+        <tbody>
+          <tr>
+            <Component {...props} />
+          </tr>
+        </tbody>
       </table>,
     );
   };

diff --git a/src/components/data/test/TableRow-test.js b/src/components/data/test/TableRow-test.js
@@ -13,11 +13,13 @@ describe('TableRow', () => {
     return mount(
       <TableContext.Provider value={tableContextValue}>
         <table>
-          <TableSectionContext.Provider value={sectionContextValue}>
-            <TableRow {...props}>
-              <td>Cell content</td>
-            </TableRow>
-          </TableSectionContext.Provider>
+          <tbody>
+            <TableSectionContext.Provider value={sectionContextValue}>
+              <TableRow {...props}>
+                <td>Cell content</td>
+              </TableRow>
+            </TableSectionContext.Provider>
+          </tbody>
         </table>
       </TableContext.Provider>,
     );
@@ -28,9 +30,11 @@ describe('TableRow', () => {
   const contentFn = (Component, props = {}) => {
     return mount(
       <table>
-        <Component {...props}>
-          <td>Cell content</td>
-        </Component>
+        <tbody>
+          <Component {...props}>
+            <td>Cell content</td>
+          </Component>
+        </tbody>
       </table>,
     );
   };