fix(compass-connections-navigation): fix for action button not being tabbable when tabbing through navigation tree (#5923)

Author: himanshusinghs

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -26,6 +26,7 @@ type NavigationBaseItemProps = {
 
   canExpand: boolean;
   isExpanded: boolean;
+  isFocused: boolean;
   onExpand: (toggle: boolean) => void;
 
   actionProps: {
@@ -58,6 +59,7 @@ export const NavigationBaseItem = ({
   dataAttributes,
   canExpand,
   isExpanded,
+  isFocused,
   onExpand,
 }: NavigationBaseItemProps) => {
   const [hoverProps, isHovered] = useHoverState();
@@ -88,7 +90,7 @@ export const NavigationBaseItem = ({
           </ItemLabel>
         </ItemButtonWrapper>
         <ItemActionControls<Actions>
-          isVisible={isActive || isHovered}
+          isVisible={isActive || isHovered || isFocused}
           data-testid="sidebar-navigation-item-actions"
           iconSize="small"
           {...actionProps}

packages/compass-connections-navigation/src/connections-navigation-tree.spec.tsx

@@ -252,6 +252,39 @@ describe('ConnectionsNavigationTree', function () {
     });
   });
 
+  it('should render the action items for the tabbed navigation item', async function () {
+    await renderConnectionsNavigationTree({
+      expanded: {},
+      activeWorkspace: null,
+    });
+
+    // Tab to the first element
+    userEvent.tab();
+    await waitFor(() => {
+      // Virtual list will be the one to grab the focus first, but will
+      // immediately forward it to the element and mocking raf here breaks
+      // virtual list implementatin, waitFor is to accomodate for that
+      expect(document.querySelector('[data-id="connection_ready"]')).to.eq(
+        document.activeElement
+      );
+      return true;
+    });
+    let tabbedItem = screen.getByTestId('connection_ready');
+    expect(within(tabbedItem).getByLabelText('Show actions')).to.be.visible;
+
+    // Go down to the second element
+    userEvent.keyboard('{arrowdown}');
+    await waitFor(() => {
+      expect(document.querySelector('[data-id="connection_initial"]')).to.eq(
+        document.activeElement
+      );
+      return true;
+    });
+
+    tabbedItem = screen.getByTestId('connection_initial');
+    expect(within(tabbedItem).getByLabelText('Show actions')).to.be.visible;
+  });
+
   describe('when connection is writable', function () {
     it('should show all connection actions', async function () {
       await renderConnectionsNavigationTree();

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -160,15 +160,18 @@ const ConnectionsNavigationTree: React.FunctionComponent<
             onDefaultAction={onDefaultAction}
             onExpandedChange={onItemExpand}
             getItemKey={(item) => item.id}
-            renderItem={({ item }) => (
-              <NavigationItem
-                item={item}
-                activeItemId={activeItemId}
-                getItemActions={getItemActions}
-                onItemExpand={onItemExpand}
-                onItemAction={onItemAction}
-              />
-            )}
+            renderItem={({ item, isActive, isFocused }) => {
+              return (
+                <NavigationItem
+                  item={item}
+                  isActive={isActive}
+                  isFocused={isFocused}
+                  getItemActions={getItemActions}
+                  onItemExpand={onItemExpand}
+                  onItemAction={onItemAction}
+                />
+              );
+            }}
           />
         )}
       </AutoSizer>

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -12,7 +12,8 @@ import { ConnectionStatus } from '@mongodb-js/compass-connections/provider';
 
 type NavigationItemProps = {
   item: SidebarTreeItem;
-  activeItemId?: string;
+  isActive: boolean;
+  isFocused: boolean;
   getItemActions: (item: SidebarTreeItem) => NavigationItemActions;
   onItemAction: (
     item: SidebarActionableItem,
@@ -23,7 +24,8 @@ type NavigationItemProps = {
 
 export function NavigationItem({
   item,
-  activeItemId,
+  isActive,
+  isFocused,
   onItemAction,
   onItemExpand,
   getItemActions,
@@ -119,7 +121,8 @@ export function NavigationItem({
         <PlaceholderItem level={item.level} />
       ) : (
         <NavigationBaseItem
-          isActive={item.id === activeItemId}
+          isActive={isActive}
+          isFocused={isFocused}
           isExpanded={!!item.isExpanded}
           icon={itemIcon}
           name={item.name}

packages/compass-connections-navigation/src/virtual-list/use-virtual-navigation-tree.tsx

@@ -130,7 +130,7 @@ export function useVirtualNavigationTree<T extends HTMLElement = HTMLElement>({
   activeItemId?: string;
   onExpandedChange(item: VirtualTreeItem, isExpanded: boolean): void;
   onFocusMove?: (item: VirtualTreeItem) => void;
-}): [React.HTMLProps<T>, string | undefined] {
+}): [React.HTMLProps<T>, string | undefined, boolean] {
   const rootRef = useRef<T | null>(null);
   const activeId = activeItemId || findFirstItem(items)?.id;
   const [currentTabbable, setCurrentTabbable] = useState(activeId);
@@ -303,5 +303,7 @@ export function useVirtualNavigationTree<T extends HTMLElement = HTMLElement>({
     ...focusProps,
   };
 
-  return [rootProps, currentTabbable];
+  const isTreeItemFocused = focusState === FocusState.FocusWithinVisible;
+
+  return [rootProps, currentTabbable, isTreeItemFocused];
 }

packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx

@@ -50,7 +50,12 @@ function useDefaultAction<T extends VirtualTreeItem>(
 }
 
 type NotPlaceholderTreeItem<T> = T extends { type: 'placeholder' } ? never : T;
-type RenderItem<T> = (props: { index: number; item: T }) => React.ReactNode;
+type RenderItem<T> = (props: {
+  index: number;
+  isActive: boolean;
+  isFocused: boolean;
+  item: T;
+}) => React.ReactNode;
 export type OnDefaultAction<T> = (
   item: T,
   evt: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
@@ -113,25 +118,33 @@ export function VirtualTree<T extends VirtualItem>({
     },
     [items]
   );
-  const [rootProps, currentTabbable] = useVirtualNavigationTree<HTMLDivElement>(
-    {
+  const [rootProps, currentTabbable, isTreeItemFocused] =
+    useVirtualNavigationTree<HTMLDivElement>({
       items,
       activeItemId,
       onExpandedChange,
       onFocusMove,
-    }
-  );
+    });
 
   const id = useId();
 
   const itemData = useMemo(() => {
     return {
       items,
       currentTabbable,
+      isTreeItemFocused,
+      activeItemId,
       renderItem,
       onDefaultAction,
     };
-  }, [items, renderItem, currentTabbable, onDefaultAction]);
+  }, [
+    items,
+    renderItem,
+    currentTabbable,
+    onDefaultAction,
+    activeItemId,
+    isTreeItemFocused,
+  ]);
 
   const getItemKey = useCallback(
     (index: number, data: VirtualItemData<T>) => {
@@ -169,7 +182,9 @@ export function VirtualTree<T extends VirtualItem>({
 
 type VirtualItemData<T extends VirtualItem> = {
   items: T[];
+  isTreeItemFocused: boolean;
   currentTabbable?: string;
+  activeItemId?: string;
   renderItem: RenderItem<T>;
   onDefaultAction: OnDefaultAction<NotPlaceholderTreeItem<T>>;
 };
@@ -178,13 +193,28 @@ function TreeItem<T extends VirtualItem>({
   data,
   style,
 }: ListChildComponentProps<VirtualItemData<T>>) {
-  const { renderItem, items } = data;
+  const { renderItem, items, activeItemId } = data;
   const item = useMemo(() => items[index], [items, index]);
   const focusRingProps = useFocusRing();
 
   const component = useMemo(() => {
-    return renderItem({ index, item });
-  }, [renderItem, index, item]);
+    return renderItem({
+      index,
+      item,
+      isActive: !isPlaceholderItem(item) && item.id === activeItemId,
+      isFocused:
+        data.isTreeItemFocused &&
+        !isPlaceholderItem(item) &&
+        item.id === data.currentTabbable,
+    });
+  }, [
+    renderItem,
+    index,
+    item,
+    activeItemId,
+    data.currentTabbable,
+    data.isTreeItemFocused,
+  ]);
 
   const actionProps = useDefaultAction(
     item as NotPlaceholderTreeItem<T>,