From d4312ce8f7d70681694183ff7fc91988ec2c41f2 Mon Sep 17 00:00:00 2001
From: Xavier Balloy <686305+xballoy@users.noreply.github.com>
Date: Thu, 18 Jun 2020 17:41:43 +0200
Subject: [PATCH] feat(popover): fix a11y for popover

---
 packages/help/src/__snapshots__/Help.spec.js.snap |  6 ++++--
 packages/popover/src/Popover.js                   | 11 ++++++++---
 packages/popover/src/popover.scss                 |  6 ++++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/help/src/__snapshots__/Help.spec.js.snap b/packages/help/src/__snapshots__/Help.spec.js.snap
index 5dc28eda9..fe51af154 100644
--- a/packages/help/src/__snapshots__/Help.spec.js.snap
+++ b/packages/help/src/__snapshots__/Help.spec.js.snap
@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Help> Render Should render Help component 1`] = `
-<span
+<button
+  className="af-popover__wrapper"
   onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  type="button"
 >
   <div
     className="af-popover__container"
@@ -25,5 +27,5 @@ exports[`<Help> Render Should render Help component 1`] = `
       </button>
     </div>
   </div>
-</span>
+</button>
 `;
diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js
index b1ca7432d..396579f74 100644
--- a/packages/popover/src/Popover.js
+++ b/packages/popover/src/Popover.js
@@ -40,7 +40,7 @@ export const PopoverClick = props => {
     };
   });
 
-  const click = (event) => {
+  const click = event => {
     setOpen(!isOpen && isHover);
     event.stopPropagation();
   };
@@ -54,7 +54,12 @@ export const PopoverClick = props => {
   };
 
   return (
-    <span onMouseEnter={enter} onMouseLeave={leave} onClick={click}>
+    <button
+      className="af-popover__wrapper"
+      type="button"
+      onMouseEnter={enter}
+      onMouseLeave={leave}
+      onClick={click}>
       <PopoverBase
         isOpen={isOpen}
         placement={placement}
@@ -62,7 +67,7 @@ export const PopoverClick = props => {
         classModifier={classModifier}>
         {children}
       </PopoverBase>
-    </span>
+    </button>
   );
 };
 
diff --git a/packages/popover/src/popover.scss b/packages/popover/src/popover.scss
index 6214d5361..e9c1abbe9 100644
--- a/packages/popover/src/popover.scss
+++ b/packages/popover/src/popover.scss
@@ -5,6 +5,12 @@ $arrow-offset: -4px;
 $padding-popover: 0.5rem;
 
 .af-popover {
+  &__wrapper {
+    background: inherit;
+    border: 0;
+    padding: 0;
+  }
+
   &__container {
     display: inline-block;