feat: add keyboard navigation for resource tree

- keep track of focused ID instead of focused index in Virtuoso
- add focus state for tree nodes and define keyboard actions

closes #2572

Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>

Author: mstykow

src/Frontend/Components/AttributionPanels/AttributionsPanel/AttributionsList/AttributionsList.tsx

@@ -31,7 +31,7 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
     <List
       renderItemContent={renderAttributionCard}
       data={activeAttributionIds}
-      selected={selectedAttributionId}
+      selectedId={selectedAttributionId}
       loading={loading}
       sx={{ transition: TRANSITION, height: contentHeight }}
     />

src/Frontend/Components/AttributionPanels/SignalsPanel/SignalsList/SignalsList.tsx

@@ -69,7 +69,7 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
   return (
     <GroupedList
       grouped={groupedIds}
-      selected={selectedAttributionId}
+      selectedId={selectedAttributionId}
       renderItemContent={renderAttributionCard}
       renderGroupName={(sourceName) => (
         <>

src/Frontend/Components/GroupedList/GroupedList.tsx

@@ -38,7 +38,7 @@ export interface GroupedListProps {
     datum: string,
     props: GroupedListItemContentProps,
   ) => React.ReactNode;
-  selected?: string;
+  selectedId?: string;
   sx?: SxProps;
   testId?: string;
 }
@@ -49,7 +49,7 @@ export function GroupedList({
   loading,
   renderGroupName,
   renderItemContent,
-  selected,
+  selectedId,
   sx,
   testId,
   ...props
@@ -81,7 +81,7 @@ export function GroupedList({
     selectedIndex,
   } = useVirtuosoRefs<GroupedVirtuosoHandle>({
     data: groups?.ids,
-    selected,
+    selectedId,
   });
 
   return (

src/Frontend/Components/List/List.tsx

@@ -24,7 +24,7 @@ export interface ListProps {
     datum: string,
     props: ListItemContentProps,
   ) => React.ReactNode;
-  selected?: string;
+  selectedId?: string;
   sx?: SxProps;
   testId?: string;
 }
@@ -34,7 +34,7 @@ export function List({
   data,
   loading,
   renderItemContent,
-  selected,
+  selectedId,
   sx,
   testId,
   ...props
@@ -47,7 +47,7 @@ export function List({
     selectedIndex,
   } = useVirtuosoRefs<VirtuosoHandle>({
     data,
-    selected,
+    selectedId,
   });
 
   return (

src/Frontend/Components/VirtualizedTree/VirtualizedTree.tsx

@@ -57,18 +57,19 @@ export function VirtualizedTree({
   return (
     <List
       data={resourceIds.length ? Object.keys(treeNodes) : []}
-      renderItemContent={(nodeId, { selected }) => (
+      renderItemContent={(nodeId, { selected, focused }) => (
         <VirtualizedTreeNode
           TreeNodeLabel={TreeNodeLabel}
           isExpandedNode={expandedIds.includes(nodeId)}
           onToggle={onToggle}
           onSelect={onSelect}
           readOnly={readOnly}
           selected={selected}
+          focused={focused}
           {...treeNodes[nodeId]}
         />
       )}
-      selected={selectedNodeId}
+      selectedId={selectedNodeId}
       testId={testId}
       sx={{
         height: '100%',

src/Frontend/Components/VirtualizedTree/VirtualizedTreeNode/VirtualizedTreeNode.tsx

@@ -5,6 +5,7 @@
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MuiBox from '@mui/material/Box';
+import { useEffect, useRef } from 'react';
 
 import { Resources } from '../../../../shared/shared-types';
 import { OpossumColors } from '../../../shared-styles';
@@ -26,6 +27,12 @@ const classes = {
     '&:hover .tree-node-selected-indicator': {
       display: 'block',
     },
+    '&:focus .tree-node-selected-indicator': {
+      display: 'block',
+    },
+    '&:focus': {
+      outline: 'none',
+    },
   },
   clickableIcon: {
     width: '16px',
@@ -74,6 +81,7 @@ interface VirtualizedTreeNodeProps extends TreeNode {
   onToggle: (nodeIdsToExpand: Array<string>) => void;
   readOnly?: boolean;
   selected: boolean;
+  focused: boolean;
 }
 
 export function VirtualizedTreeNode({
@@ -86,6 +94,7 @@ export function VirtualizedTreeNode({
   onToggle,
   readOnly,
   selected,
+  focused,
 }: VirtualizedTreeNodeProps) {
   const isExpandable = node !== 1 && Object.keys(node).length !== 0;
   const marginRight =
@@ -96,6 +105,14 @@ export function VirtualizedTreeNode({
         ? SIMPLE_FOLDER_EXTRA_INDENT
         : SIMPLE_NODE_EXTRA_INDENT);
 
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (focused) {
+      ref.current?.focus();
+    }
+  }, [focused]);
+
   const handleClick = readOnly
     ? undefined
     : () => {
@@ -106,7 +123,24 @@ export function VirtualizedTreeNode({
       };
 
   return (
-    <MuiBox sx={classes.listNode} onClick={handleClick}>
+    <MuiBox
+      sx={classes.listNode}
+      onClick={handleClick}
+      tabIndex={0}
+      ref={ref}
+      onKeyDown={(event) => {
+        if (['Enter', 'Space'].includes(event.code)) {
+          event.preventDefault();
+          handleClick?.();
+        } else if (event.code === 'ArrowRight' && !isExpandedNode) {
+          event.preventDefault();
+          onToggle?.([nodeId]);
+        } else if (event.code === 'ArrowLeft' && isExpandedNode) {
+          event.preventDefault();
+          onToggle?.([nodeId]);
+        }
+      }}
+    >
       <MuiBox sx={classes.treeNodeSpacer} style={{ width: marginRight }} />
       {renderExpandableNodeIcon()}
       <MuiBox

src/Frontend/util/use-virtuoso-refs.ts

@@ -8,33 +8,41 @@ import { VirtuosoHandle } from 'react-virtuoso';
 
 export function useVirtuosoRefs<T extends VirtuosoHandle>({
   data,
-  selected,
+  selectedId,
 }: {
   data: ReadonlyArray<string> | null | undefined;
-  selected: string | undefined;
+  selectedId: string | undefined;
 }) {
   const ref = useRef<T>(null);
   const listRef = useRef<Window | HTMLElement>();
   const [isVirtuosoFocused, setIsVirtuosoFocused] = useState(false);
-  const [focusedIndex, setFocusedIndex] = useState<number>();
+  const [focusedId, setFocusedId] = useState<string>();
 
   const selectedIndex = useMemo(() => {
     if (!data) {
       return undefined;
     }
 
-    return data.findIndex((datum) => datum === selected);
-  }, [data, selected]);
+    return data.findIndex((datum) => datum === selectedId);
+  }, [data, selectedId]);
+
+  const focusedIndex = useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+
+    return data.findIndex((datum) => datum === focusedId);
+  }, [data, focusedId]);
 
   useEffect(() => {
     if (isVirtuosoFocused) {
-      setFocusedIndex(selectedIndex);
+      setFocusedId(selectedId);
     }
 
     return () => {
-      setFocusedIndex(undefined);
+      setFocusedId(undefined);
     };
-  }, [isVirtuosoFocused, selectedIndex]);
+  }, [isVirtuosoFocused, selectedId]);
 
   useEffect(() => {
     if (selectedIndex !== undefined && selectedIndex >= 0) {
@@ -68,12 +76,12 @@ export function useVirtuosoRefs<T extends VirtuosoHandle>({
             index,
             behavior: 'auto',
           });
-          setFocusedIndex(index);
+          setFocusedId(data[index]);
           event.preventDefault();
         }
       }
     },
-    [data?.length, focusedIndex],
+    [data, focusedIndex],
   );
 
   const scrollerRef = useCallback(