Merge pull request #636 from AxaGuilDEv/feature/popover_a11y

feat(popover): fix a11y for popover
AxaFrance · Jun 19, 2020 · a9223af · a9223af
2 parents 2dba9c6 + d4312ce
commit a9223af
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -40,7 +40,7 @@ export const PopoverClick = props => {
     };
   });
 
-  const click = (event) => {
+  const click = event => {
     setOpen(!isOpen && isHover);
     event.stopPropagation();
   };
@@ -54,15 +54,20 @@ 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}
         className={className}
         classModifier={classModifier}>
         {children}
       </PopoverBase>
-    </span>
+    </button>
   );
 };
 

diff --git 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;