TPP-849 accessibility for floatin UI (#314)

* fixed accessability issues * 3.2.20
orchestrated-io · Aug 7, 2024 · e60621b · e60621b
1 parent 92aeab6
commit e60621b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 69 deletions.
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
@@ -66,8 +66,6 @@ const crossTransform2 = keyframes`
 const StyledActionsMenuContainer = styled.div`
   pointer-events: none;
   opacity: 0;
-  transition: all 300ms;
-  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
 
   &.visible {
     opacity: 1;
@@ -186,12 +184,12 @@ export const ActionsMenuHeading = styled((props) => {
 `;
 
 export const ActionsMenuItem = styled((props) => {
-  const { id, onItemClick } = useContext(ActionMenuContext);
+  const { id, onItemClick, actionMenu } = useContext(ActionMenuContext);
 
   const { as, ...others } = props;
   const Component = as ? as : others.href ? "a" : "button";
 
-  let newProps = others;
+  let newProps = { ...others, ...actionMenu.getItemProps() };
 
   const { onClick: originalOnClick } = newProps;
 
@@ -212,7 +210,7 @@ export const ActionsMenuItem = styled((props) => {
   }
 
   return <Component {...newProps} onClick={onClick} />;
-}).attrs({ role: "listitem" })`
+}).attrs({ role: "menuitem" })`
   white-space: nowrap;
   display: block;
   width: 100%;
@@ -330,27 +328,30 @@ export const ActionsMenuBody = ({
         <FloatingPortal
           root={getFloatingUiRootElement(actionMenu.refs.reference)}
         >
-          <FloatingFocusManager
-            context={actionMenu.context}
-            modal={actionMenu.modal}
-          >
-            <StyledActionsMenuContainer
-              ref={ref}
-              style={{
-                ...actionMenu.floatingStyles,
-                zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
-              }}
-              aria-labelledby={actionMenu.labelId}
-              {...actionMenu.getFloatingProps(props)}
-              className={`actionMenu-content ${
-                actionMenu.context.open ? "visible" : ""
-              }`}
+          {toggleState && (
+            <FloatingFocusManager
+              context={actionMenu.context}
+              modal={false}
+              guards={false}
             >
-              <Menu menuWidth={menuWidth} isOpen={toggleState} role="list">
-                {children}
-              </Menu>
-            </StyledActionsMenuContainer>
-          </FloatingFocusManager>
+              <StyledActionsMenuContainer
+                ref={ref}
+                style={{
+                  ...actionMenu.floatingStyles,
+                  zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
+                }}
+                aria-labelledby={actionMenu.labelId}
+                {...actionMenu.getFloatingProps(props)}
+                className={`actionMenu-content ${
+                  actionMenu.context.open ? "visible" : ""
+                }`}
+              >
+                <Menu menuWidth={menuWidth} isOpen={toggleState}>
+                  {children}
+                </Menu>
+              </StyledActionsMenuContainer>
+            </FloatingFocusManager>
+          )}
         </FloatingPortal>
       </Wrapper>
     </ActionMenuContext.Provider>

diff --git a/lib/components/ActionsMenu/useActionMenu.js b/lib/components/ActionsMenu/useActionMenu.js
@@ -54,7 +54,7 @@ export default function useActionMenu({
   });
   const dismiss = useDismiss(context);
 
-  const role = useRole(context);
+  const role = useRole(context, { role: "menu" });
 
   const interactions = useInteractions([click, dismiss, role]);
 

diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
@@ -35,18 +35,6 @@ const DIRECTIONS_MAP = {
   bottomRight: "bottom-end"
 };
 
-const StyledPopoverContainer = styled.div`
-  pointer-events: none;
-  opacity: 0;
-  transition: all 300ms ease-in-out;
-  transition-delay: 300ms;
-
-  &.visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-`;
-
 const TooltipControl = styled.div`
   border: none;
   background: none;
@@ -81,7 +69,13 @@ const StyledPopover = styled.div`
   box-shadow: ${themeGet("shadows.boxDefault")};
   user-select: ${(props) => (props.enableSelectAll ? "all" : "auto")};
 
-  opacity: 1;
+  pointer-events: none;
+  opacity: 0;
+
+  &.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
 
   & a {
     font-size: ${themeGet("fontSizes.0")};
@@ -289,7 +283,11 @@ export default function Popover({
     ]
   });
 
-  const hover = useHover(context, { move: false, handleClose: safePolygon() });
+  const hover = useHover(context, {
+    move: false,
+    handleClose: safePolygon(),
+    delay: { open: 400, close: 0 }
+  });
   const focus = useFocus(context);
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: "tooltip" });
@@ -303,7 +301,8 @@ export default function Popover({
 
   const triggerProps = {
     ...getReferenceProps({
-      ref: refs.setReference
+      ref: refs.setReference,
+      "aria-describedby": context.floatingId
     })
   };
 
@@ -338,33 +337,31 @@ export default function Popover({
         root={getFloatingUiRootElement(context.refs.reference)}
         preserveTabOrder={true}
       >
-        {text && (
-          <StyledPopoverContainer
-            className={`Tooltip popover ${visible ? "visible" : ""}`}
-            ref={refs.setFloating}
-            style={{
-              ...floatingStyles,
-              zIndex: getFloatingUiZIndex(context.refs.reference)
-            }}
-            {...getFloatingProps()}
+        {text && visible && (
+          <FloatingFocusManager
+            initialFocus={context.refs?.reference}
+            context={context}
+            modal={false}
           >
-            <FloatingFocusManager
-              initialFocus={context.refs?.reference}
-              context={context}
-              modal={false}
+            <StyledPopover
+              aria-hidden="false"
+              textAlign={textAlign}
+              width={width}
+              enableSelectAll={enableSelectAll}
+              className={`Tooltip popover ${
+                visible ? "visible" : ""
+              } ${directionClass}`}
+              ref={refs.setFloating}
+              style={{
+                ...floatingStyles,
+                zIndex: getFloatingUiZIndex(context.refs.reference)
+              }}
+              {...getFloatingProps()}
+              ariaLabel={ariaLabel}
             >
-              <StyledPopover
-                className={`${directionClass}`}
-                role="tooltip"
-                textAlign={textAlign}
-                width={width}
-                enableSelectAll={enableSelectAll}
-                ariaLabel={ariaLabel}
-              >
-                {text}
-              </StyledPopover>
-            </FloatingFocusManager>
-          </StyledPopoverContainer>
+              {text}
+            </StyledPopover>
+          </FloatingFocusManager>
         )}
       </FloatingPortal>
     </Box>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.19",
+  "version": "3.2.20",
   "engines": {
     "node": "20.12.2"
   },