From 1302b4677d611197c39eb79697572bf17df338bc Mon Sep 17 00:00:00 2001
From: KitoC <35714838+KitoC@users.noreply.github.com>
Date: Thu, 8 Aug 2024 15:27:50 +1000
Subject: [PATCH] TPP 849 fix tabable children on floatin UI with aria hidden
 (#316)

* fixed issues wiht accessability

* 3.2.22
---
 lib/components/ActionsMenu/index.js | 11 +++++++++--
 lib/components/Popover/index.js     | 23 ++++++++++++++++++++++-
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
index e4939dcd..20e2fe32 100644
--- a/lib/components/ActionsMenu/index.js
+++ b/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}
diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
index 770a7bb3..953bedc6 100644
--- a/lib/components/Popover/index.js
+++ b/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}
diff --git a/package-lock.json b/package-lock.json
index 6fd93d24..07e41110 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.21",
+  "version": "3.2.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orcs-design-system",
-      "version": "3.2.21",
+      "version": "3.2.22",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
diff --git a/package.json b/package.json
index f8c88351..8b84c242 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.21",
+  "version": "3.2.22",
   "engines": {
     "node": "20.12.2"
   },