manage tabIndex of overflow container overflow menu (#906)

finos · Oct 16, 2023 · bd48952 · bd48952
1 parent 7849d49
commit bd48952
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx b/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.tsx
@@ -103,6 +103,7 @@ const WrapContainer = React.memo(
           icon={overflowIcon}
           menuBuilder={menuBuilder}
           menuActionHandler={menuActionHandler}
+          tabIndex={-1}
         />
       </div>
     );

diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts b/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts
@@ -38,6 +38,14 @@ export const useOverflowContainer = ({
   // Drag drop needs a ref to container
   const containerRef = useRef<HTMLDivElement | null>(null);
 
+  const setOverflowTabIndex = useCallback((tabIndex: "0" | "-1") => {
+    if (containerRef.current) {
+      containerRef.current
+        .querySelector(".vuuOverflowContainer-OverflowIndicator button")
+        ?.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+
   const handleResize = useCallback(async () => {
     if (container) {
       let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
@@ -62,9 +70,16 @@ export const useOverflowContainer = ({
           wrapped = NO_WRAPPED_ITEMS;
         }
       }
+
+      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
+        setOverflowTabIndex("0");
+      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
+        setOverflowTabIndex("-1");
+      }
+
       wrappedItemsRef.current = wrapped;
     }
-  }, [container, orientation]);
+  }, [container, orientation, setOverflowTabIndex]);
 
   const hasOverflowItem = (
     opt: unknown