From d57a4c11470e1c2074c7a8eec5befb42367cc17d Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sat, 19 Jan 2019 13:10:40 -0500
Subject: [PATCH] Using a button for the close control and privacy policy modal

---
 .../Header/__snapshots__/test.js.snap         | 25 ++++++++-----------
 src/components/Header/index.js                |  8 +++---
 src/components/Header/style.module.css        |  4 +++
 src/components/Header/test.js                 |  4 +--
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index 19f49f5..245ce89 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/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"
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 3dadb70..343cb83 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -34,8 +34,7 @@ class Header extends React.PureComponent {
     this.setState({ showModal: true });
   }
 
-  handleClose = event => {
-    event.preventDefault();
+  handleClose = () => {
     this.setState({ showModal: false });
   }
 
@@ -49,12 +48,11 @@ class Header extends React.PureComponent {
         onRequestClose={ this.handleClose }
         shouldCloseOnOverlayClick={ true }>
         <PrivacyPolicy />
-        <a
-          href="#close"
+        <button
           className={ style.modalClose }
           onClick={ this.handleClose }>
           <CloseIcon />
-        </a>
+        </button>
       </Modal>
       <header
         className={ style.header }
diff --git a/src/components/Header/style.module.css b/src/components/Header/style.module.css
index 3e08c71..c4cd421 100644
--- a/src/components/Header/style.module.css
+++ b/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 {
diff --git a/src/components/Header/test.js b/src/components/Header/test.js
index b371e36..bc75c45 100644
--- a/src/components/Header/test.js
+++ b/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();
   });
 });