Merge pull request #12877 from overleaf/td-history-file-tree-keyboard

History migration: Only activate document in file tree for space and enter keys

GitOrigin-RevId: 166a9ba36b1f19cd4e50d0e6f63ce04b164512cf

services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx

@@ -14,14 +14,15 @@ export default function HistoryFileTreeDoc({
   file,
   name,
 }: HistoryFileTreeDocProps) {
-  const { isSelected, onClick } = useFileTreeItemSelection(file)
+  const { isSelected, handleClick, handleKeyDown } =
+    useFileTreeItemSelection(file)
 
   return (
     <li
       role="treeitem"
       className={classNames({ selected: isSelected })}
-      onClick={onClick}
-      onKeyDown={onClick}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
       aria-selected={isSelected}
       aria-label={name}
       tabIndex={0}

services/web/frontend/js/features/history/context/hooks/use-file-tree-item-selection.tsx

@@ -5,7 +5,7 @@ import type { FileDiff } from '../../services/types/file'
 export function useFileTreeItemSelection(file: FileDiff) {
   const { selection, setSelection } = useHistoryContext()
 
-  const handleClick = useCallback(() => {
+  const handleEvent = useCallback(() => {
     if (file.pathname !== selection.selectedFile?.pathname) {
       setSelection({
         ...selection,
@@ -14,7 +14,20 @@ export function useFileTreeItemSelection(file: FileDiff) {
     }
   }, [file, selection, setSelection])
 
+  const handleClick = useCallback(() => {
+    handleEvent()
+  }, [handleEvent])
+
+  const handleKeyDown = useCallback(
+    event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleEvent()
+      }
+    },
+    [handleEvent]
+  )
+
   const isSelected = selection.selectedFile?.pathname === file.pathname
 
-  return { isSelected, onClick: handleClick }
+  return { isSelected, handleClick, handleKeyDown }
 }