Using a button for the close control and privacy policy modal

src/components/Header/__snapshots__/test.js.snap

@@ -17,16 +17,15 @@ exports[`Header closing the Privacy Policy modal 1`] = `
     shouldReturnFocusAfterClose={true}
   >
     <LoadNamespace(PrivacyPolicy) />
-    <a
+    <button
       className="modalClose"
-      href="#close"
       onClick={[Function]}
     >
       <XSquare
         color="currentColor"
         size="24"
       />
-    </a>
+    </button>
   </Modal>
   <header
     className="header"
@@ -97,16 +96,15 @@ exports[`Header closing the Privacy Policy modal 2`] = `
     shouldReturnFocusAfterClose={true}
   >
     <LoadNamespace(PrivacyPolicy) />
-    <a
+    <button
       className="modalClose"
-      href="#close"
       onClick={[Function]}
     >
       <XSquare
         color="currentColor"
         size="24"
       />
-    </a>
+    </button>
   </Modal>
   <header
     className="header"
@@ -177,16 +175,15 @@ exports[`Header opening the Privacy Policy modal 1`] = `
     shouldReturnFocusAfterClose={true}
   >
     <LoadNamespace(PrivacyPolicy) />
-    <a
+    <button
       className="modalClose"
-      href="#close"
       onClick={[Function]}
     >
       <XSquare
         color="currentColor"
         size="24"
       />
-    </a>
+    </button>
   </Modal>
   <header
     className="header"
@@ -257,16 +254,15 @@ exports[`Header rendering 1`] = `
     shouldReturnFocusAfterClose={true}
   >
     <LoadNamespace(PrivacyPolicy) />
-    <a
+    <button
       className="modalClose"
-      href="#close"
       onClick={[Function]}
     >
       <XSquare
         color="currentColor"
         size="24"
       />
-    </a>
+    </button>
   </Modal>
   <header
     className="header"
@@ -337,16 +333,15 @@ exports[`Header rendering with no banner 1`] = `
     shouldReturnFocusAfterClose={true}
   >
     <LoadNamespace(PrivacyPolicy) />
-    <a
+    <button
       className="modalClose"
-      href="#close"
       onClick={[Function]}
     >
       <XSquare
         color="currentColor"
         size="24"
       />
-    </a>
+    </button>
   </Modal>
   <header
     className="header"

src/components/Header/index.js

@@ -34,8 +34,7 @@ class Header extends React.PureComponent {
     this.setState({ showModal: true });
   }
 
-  handleClose = event => {
+  handleClose = () => {
-    event.preventDefault();
     this.setState({ showModal: false });
   }
 
@@ -49,12 +48,11 @@ class Header extends React.PureComponent {
         onRequestClose={ this.handleClose }
         shouldCloseOnOverlayClick={ true }>
         <PrivacyPolicy />
-        <a
+        <button
-          href="#close"
           className={ style.modalClose }
           onClick={ this.handleClose }>
           <CloseIcon />
-        </a>
+        </button>
       </Modal>
       <header
         className={ style.header }

src/components/Header/style.module.css

@@ -73,6 +73,10 @@
   right: 2rem;
   line-height: 2.8rem;
   padding: 1rem;
+  margin: 0;
+  border: 0 none;
+  background: transparent;
+  color: inherit;
 
   &:hover svg,
   &:active svg {

src/components/Header/test.js

@@ -48,15 +48,13 @@ describe('Header', () => {
     const component = shallow(
       <Header banner={ false } />
     );
-    const eventObj = { preventDefault: jest.fn() };
 
     component.setState({ showModal: true });
 
     expect(component).toMatchSnapshot();
 
-    component.instance().handleClose(eventObj);
+    component.instance().handleClose();
 
-    expect(eventObj.preventDefault).toHaveBeenCalled();
     expect(component).toMatchSnapshot();
   });
 });