TPP 849 fix tabable children on floatin UI with aria hidden (#316)

* fixed issues wiht accessability

* 3.2.22

lib/components/ActionsMenu/index.js

@@ -188,8 +188,13 @@ export const ActionsMenuItem = styled((props) => {
 
   const { as, ...others } = props;
   const Component = as ? as : others.href ? "a" : "button";
+  const disabled = !actionMenu?.context?.open ?? false;
 
-  let newProps = { ...others, ...(actionMenu?.getItemProps?.() || {}) };
+  let newProps = {
+    ...others,
+    ...(actionMenu?.getItemProps?.() || {}),
+    disabled
+  };
 
   const { onClick: originalOnClick } = newProps;
 
@@ -205,7 +210,8 @@ export const ActionsMenuItem = styled((props) => {
     newProps = {
       ...others,
       type: "button",
-      ["data-action-menu-id"]: id
+      ["data-action-menu-id"]: id,
+      disabled
     };
   }
 
@@ -323,6 +329,7 @@ export const ActionsMenuBody = ({
   );
 
   const visible = actionMenu.context.open;
+
   const ActionMenuContent = (
     <StyledActionsMenuContainer
       ref={ref}

lib/components/Popover/index.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from "react";
+import React, { cloneElement, useEffect, useState } from "react";
 import {
   useFloating,
   autoUpdate,
@@ -336,6 +336,27 @@ export default function Popover({
       ? direction
       : context.placement;
 
+  useEffect(() => {
+    // Following code disables the tabbing of elements for popovers when it is not open.
+    const floatingEl = context?.refs?.floating?.current;
+
+    if (!floatingEl) return;
+
+    const childrenAnchors = Array.from(floatingEl.getElementsByTagName?.("a"));
+
+    if (!childrenAnchors.length) return;
+
+    if (visible) {
+      childrenAnchors.forEach((anchor) => {
+        anchor.tabIndex = "";
+      });
+    } else {
+      childrenAnchors.forEach((anchor) => {
+        anchor.tabIndex = "-1";
+      });
+    }
+  }, [visible, context]);
+
   const Popover = (
     <StyledPopover
       textAlign={textAlign}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.21",
+  "version": "3.2.22",
   "engines": {
     "node": "20.12.2"
   },