#34

frontend/src/components/PrefetchLink.tsx

@@ -7,7 +7,7 @@ import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
 import { cn } from '@/lib/utils'
 
-import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
+import type { AnchorHTMLAttributes, KeyboardEvent, MouseEvent, TouchEvent } from 'react'
 import type { To } from 'react-router-dom'
 
 type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -25,6 +25,7 @@ export default forwardRef<HTMLAnchorElement, Props> (({
     state,
     onMouseEnter,
     onTouchStart,
+    onKeyDown,
     onClick,
     cancelOnError = false,
     ...rest }, ref) => {
@@ -97,11 +98,22 @@ export default forwardRef<HTMLAnchorElement, Props> (({
     }
   }
 
+  const handleKeyDown = (ev: KeyboardEvent<HTMLAnchorElement>) => {
+    onKeyDown?.(ev)
+
+    if (ev.defaultPrevented)
+      return
+
+    if (ev.key === ' ' || ev.key === 'Spacebar')
+      ev.preventDefault ()
+  }
+
   return (
       <a ref={ref}
 	 href={typeof to === 'string' ? to : createPath (to)}
 	 onMouseEnter={handleMouseEnter}
 	 onTouchStart={handleTouchStart}
+	 onKeyDown={handleKeyDown}
 	 onClick={handleClick}
 	 className={cn ('cursor-pointer', className)}
 	 {...rest}/>)