fix(DataTable): Use the right heading level in TableContainer. (#18871)

* fix(TableContainer): use the right heading level

Assuming the application is already correctly using <Section>, this will
give the table the right heading level (i.e. one level higher than the
parent heading).

We could also add aria-labelledby={titleId} to the <Section> to give it an
implicit role of "region" rather than "presentation".  Not sure if a single
table is big enough to be considered a region or not.

Fixes #18835.

* fix(TableContainer): fix snapshot

* fix(TableContainer): second try to fix snapshot

Author: wkeese

packages/react/src/components/DataTable/TableContainer.tsx

@@ -12,6 +12,7 @@ import { ReactAttr } from '../../types/common';
 import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import { TableContext } from './TableContext';
+import { Heading, Section } from '../Heading';
 
 export interface TableContainerProps
   extends Omit<ReactAttr<HTMLDivElement>, 'title'> {
@@ -63,15 +64,15 @@ const TableContainer = ({
 
   return (
     <TableContext.Provider value={value}>
-      <div {...rest} className={tableContainerClasses}>
+      <Section {...rest} className={tableContainerClasses}>
         {(title || description) && (
           <div className={`${prefix}--data-table-header`}>
             {title && (
-              <h4
+              <Heading
                 className={`${prefix}--data-table-header__title`}
                 id={titleId}>
                 {title}
-              </h4>
+              </Heading>
             )}
             {description && (
               <p
@@ -83,7 +84,7 @@ const TableContainer = ({
           </div>
         )}
         {children}
-      </div>
+      </Section>
     </TableContext.Provider>
   );
 };

packages/react/src/components/DataTable/__tests__/TableContainer-test.js

@@ -43,7 +43,7 @@ describe('TableContainer', () => {
       );
 
       const headerEl = container.querySelector('[class*="data-table-header"]');
-      const titleEl = headerEl.querySelector('h4');
+      const titleEl = headerEl.querySelector('h2');
       const descriptionEl = headerEl.querySelector('p');
 
       expect(headerEl).toBeInTheDocument();
@@ -82,7 +82,7 @@ describe('TableContainer', () => {
       );
 
       const headerEl = container.querySelector('[class*="data-table-header"]');
-      const titleEl = headerEl.querySelector('h4');
+      const titleEl = headerEl.querySelector('h2');
       const descriptionEl = headerEl.querySelector('p');
 
       expect(headerEl).toBeInTheDocument();

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`DataTable behaves as expected selection -- radio buttons should not have select-all checkbox 1`] = `
 <div>
-  <div
+  <section
     class="cds--data-table-container"
   >
     <div
       class="cds--data-table-header"
     >
-      <h4
+      <h2
         class="cds--data-table-header__title"
         id="tc-:r7g:-title"
       >
         DataTable with selection
-      </h4>
+      </h2>
     </div>
     <div
       class="cds--data-table-content"
@@ -170,24 +170,24 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
         </tbody>
       </table>
     </div>
-  </div>
+  </section>
 </div>
 `;
 
 exports[`DataTable behaves as expected selection -- radio buttons should render 1`] = `
 <div>
-  <div
+  <section
     class="cds--data-table-container"
   >
     <div
       class="cds--data-table-header"
     >
-      <h4
+      <h2
         class="cds--data-table-header__title"
         id="tc-:r77:-title"
       >
         DataTable with selection
-      </h4>
+      </h2>
     </div>
     <div
       class="cds--data-table-content"
@@ -344,24 +344,24 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
         </tbody>
       </table>
     </div>
-  </div>
+  </section>
 </div>
 `;
 
 exports[`DataTable behaves as expected selection should render and match snapshot 1`] = `
 <div>
-  <div
+  <section
     class="cds--data-table-container"
   >
     <div
       class="cds--data-table-header"
     >
-      <h4
+      <h2
         class="cds--data-table-header__title"
         id="tc-:r2k:-title"
       >
         DataTable with selection
-      </h4>
+      </h2>
     </div>
     <section
       aria-label="data table toolbar"
@@ -788,25 +788,25 @@ exports[`DataTable behaves as expected selection should render and match snapsho
         </tbody>
       </table>
     </div>
-  </div>
+  </section>
 </div>
 `;
 
 exports[`DataTable renders as expected - Component API should render and match snapshot 1`] = `
 <div>
-  <div
+  <section
     class="cds--data-table-container"
     data-testid="test-id"
   >
     <div
       class="cds--data-table-header"
     >
-      <h4
+      <h2
         class="cds--data-table-header__title"
         id="tc-:re:-title"
       >
         DataTable with toolbar
-      </h4>
+      </h2>
     </div>
     <section
       aria-label="data table toolbar"
@@ -1120,6 +1120,6 @@ exports[`DataTable renders as expected - Component API should render and match s
         </tbody>
       </table>
     </div>
-  </div>
+  </section>
 </div>
 `;