fix: open section/unit with keyboard inside section/subsection page (#2209)

When selecting a unit/subsection inside a subsection/section with the keyboard, opening it in the sidebar by pressing enter was not working.

Author: DanielVZ96

src/generic/DraggableList/SortableItem.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from 'react';
+import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import {
@@ -16,6 +16,7 @@ interface SortableItemProps {
   componentStyle?: {},
   isClickable?: boolean,
   onClick?: MouseEventHandler,
+  onKeyDown?: KeyboardEventHandler,
   disabled?: boolean,
   cardClassName?: string,
 }
@@ -28,6 +29,7 @@ const SortableItem = ({
   children,
   isClickable,
   onClick,
+  onKeyDown,
   disabled,
   cardClassName = '',
 }: SortableItemProps) => {
@@ -60,6 +62,7 @@ const SortableItem = ({
     <div
       ref={setNodeRef}
       onClick={onClick}
+      onKeyDown={onKeyDown}
     >
       <Card
         style={style}

src/library-authoring/section-subsections/LibraryContainerChildren.tsx

@@ -223,8 +223,13 @@ export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryCont
               borderRadius: '8px',
               borderLeft: '8px solid #E1DDDB',
             }}
-            isClickable={!readOnly}
-            onClick={(e) => !readOnly && handleChildClick(child, e.detail)}
+            isClickable
+            onClick={(e) => handleChildClick(child, e.detail)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleChildClick(child, 1);
+              }
+            }}
             disabled={readOnly || libReadOnly}
             cardClassName={sidebarItemInfo?.id === child.originalId ? 'selected' : undefined}
             actions={(