From a19dffeac27a04f860e24208c8502075136dfafc Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Tue, 2 May 2023 15:06:40 +0100
Subject: [PATCH] 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
---
 .../file-tree/history-file-tree-doc.tsx         |  7 ++++---
 .../hooks/use-file-tree-item-selection.tsx      | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx
index a6fe5851d4..c8acfb9df7 100644
--- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-doc.tsx
+++ b/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}
diff --git a/services/web/frontend/js/features/history/context/hooks/use-file-tree-item-selection.tsx b/services/web/frontend/js/features/history/context/hooks/use-file-tree-item-selection.tsx
index 6f39980d41..29f13e2393 100644
--- a/services/web/frontend/js/features/history/context/hooks/use-file-tree-item-selection.tsx
+++ b/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 }
 }