Merge pull request #668 from gympass/bugfix/popover-z-index

chore: improve popover accessibility implementation
gympass · Jul 13, 2023 · 8ffebaa · 8ffebaa
2 parents c162c2c + 1b52ef5
commit 8ffebaa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/packages/yoga/src/Popover/web/Popover.jsx b/packages/yoga/src/Popover/web/Popover.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { node, number, oneOf, string } from 'prop-types';
 import { Text } from '@gympass/yoga';
 
-import { PopoverContainer, Wrapper } from './styles';
+import { PopoverContainer, PopoverButton, Wrapper } from './styles';
 
 function Popover({
   children,
@@ -11,26 +11,30 @@ function Popover({
   position,
   width,
   height,
+  zIndex,
+  a11yId,
   ...props
 }) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  function handleShowPopover() {
+  const handleShowPopover = () => {
     setIsPopoverOpen(true);
-  }
+  };
 
-  function handleHidePopover() {
+  const handleHidePopover = () => {
     setIsPopoverOpen(false);
-  }
+  };
 
   return (
     <Wrapper {...props}>
       {isPopoverOpen && (
         <PopoverContainer
+          {...(a11yId && { id: a11yId })}
           position={position}
           width={width}
           height={height}
           role="tooltip"
+          $zIndex={zIndex}
         >
           {!!title && (
             <Text.Small mb="xxxsmall" fw="medium" color="white">
@@ -43,22 +47,27 @@ function Popover({
         </PopoverContainer>
       )}
 
-      <button
-        type="button"
-        style={{ all: 'unset' }}
+      <PopoverButton
+        {...(a11yId && { 'aria-describedby': a11yId })}
         onMouseEnter={handleShowPopover}
         onMouseLeave={handleHidePopover}
         onTouchStart={handleShowPopover}
         onTouchEnd={handleHidePopover}
         onClick={event => event.preventDefault()}
+        onKeyDown={event => {
+          if (event.key === 'Enter') {
+            setIsPopoverOpen(current => !current);
+          }
+        }}
       >
         {children}
-      </button>
+      </PopoverButton>
     </Wrapper>
   );
 }
 
 Popover.propTypes = {
+  a11yId: string,
   children: node.isRequired,
   title: string,
   description: string.isRequired,
@@ -79,13 +88,16 @@ Popover.propTypes = {
   ]),
   width: number,
   height: number,
+  zIndex: number,
 };
 
 Popover.defaultProps = {
+  a11yId: undefined,
   title: undefined,
   position: 'bottom-center',
   width: 265,
-  height: 116,
+  height: 200,
+  zIndex: 1,
 };
 
 export default Popover;
diff --git a/packages/yoga/src/Popover/web/__snapshots__/Popover.test.jsx.snap b/packages/yoga/src/Popover/web/__snapshots__/Popover.test.jsx.snap
@@ -5,12 +5,24 @@ exports[`<Popover /> should match snapshot 1`] = `
   position: relative;
 }
 
+.c1 {
+  all: unset;
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c1:focus {
+    box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
+    -webkit-transition: box-shadow ease 0.5s;
+    transition: box-shadow ease 0.5s;
+  }
+}
+
 <div>
   <div
     class="c0"
   >
     <button
-      style="all: unset;"
+      class="c1"
       type="button"
     >
       <svg

diff --git a/packages/yoga/src/Popover/web/styles.js b/packages/yoga/src/Popover/web/styles.js
@@ -75,9 +75,10 @@ export const PopoverContainer = styled.div`
     position,
     width,
     height,
+    $zIndex,
   }) => css`
     position: absolute;
-
+    overflow: auto;
     width: max-content;
     max-width: ${width}px;
     height: max-content;
@@ -86,7 +87,25 @@ export const PopoverContainer = styled.div`
     border-radius: ${radii.small}px;
     background-color: ${colors.stamina};
     padding: ${spacing.small}px;
+    z-index: ${$zIndex};
 
     ${popoverContainerPositionModifier[position]};
   `}
 `;
+
+export const PopoverButton = styled.button.attrs({ type: 'button' })`
+  all: unset;
+
+  ${({
+    theme: {
+      yoga: { elevations },
+    },
+  }) => css`
+    @media (hover: hover) and (pointer: fine) {
+      &:focus {
+        box-shadow: ${elevations.small};
+        transition: box-shadow ease 0.5s;
+      }
+    }
+  `}
+`;