feat: pin selection using keyboard

Author: andreishket

vis/js/templates/Geomap/Pins/Pin/index.tsx

@@ -1,12 +1,12 @@
+import L from "leaflet";
 import { FC, memo } from "react";
 import { Marker } from "react-leaflet";
 
 import { getCoordinatesFromPaper } from "@/js/utils/coordinates";
 
 import { CONFIG } from "./config";
-
-import { PinProps } from "./types";
 import { createPinIcon } from "./createPinIcon";
+import { PinProps } from "./types";
 
 const { offsets } = CONFIG;
 const { basic, selected } = offsets;
@@ -16,6 +16,15 @@ export const Pin: FC<PinProps> = memo(({ data, isActive, onClick }) => {
 
   const handleClick = () => onClick(data);
 
+  const handleKeydown = (event: L.LeafletKeyboardEvent) => {
+    const key = event.originalEvent.key;
+
+    if (key === "Enter" || key === " ") {
+      event.originalEvent.preventDefault();
+      handleClick();
+    }
+  };
+
   if (!east || !north) {
     return null;
   }
@@ -24,9 +33,11 @@ export const Pin: FC<PinProps> = memo(({ data, isActive, onClick }) => {
     <Marker
       position={[north, east]}
       icon={createPinIcon(isActive, data)}
+      keyboard
       zIndexOffset={isActive ? selected : basic}
       eventHandlers={{
         click: handleClick,
+        keydown: handleKeydown,
       }}
     />
   );