chore(drawer.tsx): replace <header> and <footer> with <div>

src/components/Drawer/Drawer.tsx

@@ -1,4 +1,11 @@
-import React, { Children, cloneElement, ReactElement, useEffect, useRef } from "react";
+import React, {
+  Children,
+  cloneElement,
+  isValidElement,
+  ReactElement,
+  useEffect,
+  useRef,
+} from "react";
 import { createPortal } from "react-dom";
 import ReactFocusLock from "react-focus-lock";
 import { SerializedStyles } from "@emotion/react";
@@ -70,6 +77,9 @@ const Drawer: FCWithChildren<DrawerProps> & DrawerCompoundProps = (props) => {
     onClose,
     ...rest
   } = props;
+  const hasHeader = Children.toArray(children).some(
+    (child) => isValidElement(child) && child.type === Header,
+  );
   const clonedChildren = Children.map(children, (child) => {
     return (
       child &&
@@ -154,6 +164,7 @@ const Drawer: FCWithChildren<DrawerProps> & DrawerCompoundProps = (props) => {
                 aria-expanded={isOpen}
                 aria-hidden={!isOpen}
                 aria-modal="true"
+                aria-labelledby={hasHeader ? "drawer-title" : undefined}
                 initial="initial"
                 animate="expanded"
                 exit="initial"

src/components/Drawer/__snapshots__/Drawer.test.tsx.snap

@@ -21,13 +21,14 @@ exports[`<Drawer/> matches snapshot with close button 1`] = `
     <dialog
       aria-expanded="true"
       aria-hidden="false"
+      aria-labelledby="drawer-title"
       aria-modal="true"
       class="dialog placement-left"
       id="drawer-dialog"
       style="opacity: 0; transform: none;"
     >
-      <header
-        class="css-1ki9nyc-drawerHeader-drawerHeader"
+      <div
+        class="drawer-header css-1ki9nyc-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
@@ -49,7 +50,7 @@ exports[`<Drawer/> matches snapshot with close button 1`] = `
             />
           </span>
         </button>
-      </header>
+      </div>
     </dialog>
   </div>
   <div
@@ -82,13 +83,14 @@ exports[`<Drawer/> matches snapshot with header, body and footer 1`] = `
     <dialog
       aria-expanded="true"
       aria-hidden="false"
+      aria-labelledby="drawer-title"
       aria-modal="true"
       class="dialog placement-left"
       id="drawer-dialog"
       style="opacity: 0; transform: none;"
     >
-      <header
-        class="css-1ki9nyc-drawerHeader-drawerHeader"
+      <div
+        class="drawer-header css-1ki9nyc-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
@@ -110,18 +112,18 @@ exports[`<Drawer/> matches snapshot with header, body and footer 1`] = `
             />
           </span>
         </button>
-      </header>
+      </div>
       <div
         class="css-1vbxgux-drawerBody"
       >
         Test body
       </div>
-      <footer
-        class="css-i1ukdc-footerContainer-footerContainer"
+      <div
+        class="drawer-footer css-i1ukdc-footerContainer-footerContainer"
         data-testid="drawer-footer"
       >
         Test footer
-      </footer>
+      </div>
     </dialog>
   </div>
   <div
@@ -153,13 +155,14 @@ exports[`<Drawer/> matches snapshot with noGutters Header 1`] = `
     <dialog
       aria-expanded="true"
       aria-hidden="false"
+      aria-labelledby="drawer-title"
       aria-modal="true"
       class="dialog placement-left"
       id="drawer-dialog"
       style="opacity: 0; transform: none;"
     >
-      <header
-        class="css-qa9tzz-drawerHeader-drawerHeader"
+      <div
+        class="drawer-header css-qa9tzz-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
@@ -181,7 +184,7 @@ exports[`<Drawer/> matches snapshot with noGutters Header 1`] = `
             />
           </span>
         </button>
-      </header>
+      </div>
     </dialog>
   </div>
   <div
@@ -213,13 +216,14 @@ exports[`<Drawer/> matches snapshot with right placement 1`] = `
     <dialog
       aria-expanded="true"
       aria-hidden="false"
+      aria-labelledby="drawer-title"
       aria-modal="true"
       class="dialog placement-right"
       id="drawer-dialog"
       style="opacity: 0; transform: translateX(100%) translateZ(0);"
     >
-      <header
-        class="css-1ki9nyc-drawerHeader-drawerHeader"
+      <div
+        class="drawer-header css-1ki9nyc-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
@@ -241,7 +245,7 @@ exports[`<Drawer/> matches snapshot with right placement 1`] = `
             />
           </span>
         </button>
-      </header>
+      </div>
     </dialog>
   </div>
   <div

src/components/Drawer/components/Footer.tsx

@@ -3,9 +3,9 @@ import { footerContainer } from "./styles";
 import { FCWithChildren } from "types/common";
 
 const Footer: FCWithChildren = ({ children }) => (
-  <footer data-testid="drawer-footer" css={footerContainer}>
+  <div data-testid="drawer-footer" css={footerContainer} className="drawer-footer">
     {children}
-  </footer>
+  </div>
 );
 
 export default Footer;

src/components/Drawer/components/Header.tsx

@@ -15,7 +15,8 @@ const Header: FCWithChildren<HeaderProps> = ({ onClose, noGutters = false, child
   const title = typeof children === "string" ? <Heading size="md">{children}</Heading> : children;
 
   return (
-    <header
+    <div
+      className="drawer-header"
       id="drawer-title"
       data-testid="drawer-header"
       css={(): SerializedStyles => drawerHeader({ noGutters })}
@@ -32,7 +33,7 @@ const Header: FCWithChildren<HeaderProps> = ({ onClose, noGutters = false, child
       >
         <CloseModalSVG height={32} />
       </Button>
-    </header>
+    </div>
   );
 };
 

src/components/Modal/Modal.tsx

@@ -13,7 +13,7 @@ export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
 const Header: FC<HeaderProps> = ({ children, onClose, ...rest }) => {
   const title = typeof children === "string" ? <Heading size="md">{children}</Heading> : children;
   return (
-    <header css={modalHeader} data-testid="modal-header" {...rest}>
+    <div css={modalHeader} data-testid="modal-header" {...rest}>
       <div>{title}</div>
       {onClose && (
         <button
@@ -26,7 +26,7 @@ const Header: FC<HeaderProps> = ({ children, onClose, ...rest }) => {
           <CloseModalSVG height={32} />
         </button>
       )}
-    </header>
+    </div>
   );
 };
 
@@ -44,9 +44,9 @@ type FooterProps = React.HTMLAttributes<HTMLElement>;
 
 const Footer: FC<FooterProps> = ({ children, ...rest }) => {
   return (
-    <footer css={modalFooter} data-testid="modal-footer" {...rest}>
+    <div css={modalFooter} data-testid="modal-footer" {...rest}>
       {children}
-    </footer>
+    </div>
   );
 };
 

src/components/Modal/__snapshots__/Modal.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`<Modal> matches snapshot 1`] = `
   role="dialog"
   tabindex="-1"
 >
-  <header
+  <div
     class="css-1qvmmn3-modalHeader-modalHeader"
     data-testid="modal-header"
   >
@@ -19,18 +19,18 @@ exports[`<Modal> matches snapshot 1`] = `
         Test header
       </h2>
     </div>
-  </header>
+  </div>
   <article
     class="css-1v47goe-modalContent"
   >
     Test body
   </article>
-  <footer
+  <div
     class="css-xu94ia-modalFooter-modalFooter"
     data-testid="modal-footer"
   >
     Test footer
-  </footer>
+  </div>
 </div>
 `;
 
@@ -43,7 +43,7 @@ exports[`<Modal> matches snapshot with all props 1`] = `
   style="border: 3px solid red;"
   tabindex="-1"
 >
-  <header
+  <div
     class="css-1qvmmn3-modalHeader-modalHeader"
     data-testid="modal-header"
   >
@@ -54,7 +54,7 @@ exports[`<Modal> matches snapshot with all props 1`] = `
         Test header
       </h2>
     </div>
-  </header>
+  </div>
   <article
     class="css-1v47goe-modalContent"
     style="border: 2px solid green;"
@@ -80,7 +80,7 @@ exports[`<Modal> matches snapshot with all props 1`] = `
       type="password"
     />
   </article>
-  <footer
+  <div
     class="css-xu94ia-modalFooter-modalFooter"
     data-testid="modal-footer"
     style="border: 2px solid purple; text-align: right;"
@@ -93,7 +93,7 @@ exports[`<Modal> matches snapshot with all props 1`] = `
     <button>
       Change password
     </button>
-  </footer>
+  </div>
 </div>
 `;
 
@@ -105,7 +105,7 @@ exports[`<Modal> matches snapshot with custom HTML classes 1`] = `
   role="dialog"
   tabindex="-1"
 >
-  <header
+  <div
     class="css-1qvmmn3-modalHeader-modalHeader"
     data-testid="modal-header"
   >
@@ -116,17 +116,17 @@ exports[`<Modal> matches snapshot with custom HTML classes 1`] = `
         Test header
       </h2>
     </div>
-  </header>
+  </div>
   <article
     class="css-1v47goe-modalContent"
   >
     Test body
   </article>
-  <footer
+  <div
     class="css-xu94ia-modalFooter-modalFooter"
     data-testid="modal-footer"
   >
     Test footer
-  </footer>
+  </div>
 </div>
 `;