feat: aria labels for pins

Author: andreishket

vis/js/templates/Geomap/Pins/Pin/createPinIcon.ts

@@ -1,9 +1,37 @@
+import { AllPossiblePapersType } from "@/js/types";
 import L from "leaflet";
 
-export const createPinIcon = (isActive: boolean) =>
-  L.divIcon({
+const getAriaLabel = (data: AllPossiblePapersType): string => {
+  let result = "";
+
+  if (!("geographicalData" in data)) {
+    return result;
+  }
+
+  const { title, geographicalData } = data;
+
+  if (title) {
+    result = title;
+  }
+
+  if (geographicalData) {
+    const { continent, country } = geographicalData;
+    result = result + `; ${country}, ${continent}`;
+  }
+
+  return result;
+};
+
+export const createPinIcon = (
+  isActive: boolean,
+  data: AllPossiblePapersType,
+) => {
+  const ariaLabel = getAriaLabel(data);
+
+  return L.divIcon({
     className: `custom-marker ${isActive ? "selected" : ""}`,
-    html: `<div class="marker-shape"></div>`,
+    html: `<div class="marker-shape" role="button" aria-label="${ariaLabel}"></div>`,
     iconSize: [22, 30],
     iconAnchor: [11, 30],
   });
+};

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

@@ -4,15 +4,18 @@ import { Marker } from "react-leaflet";
 import { getCoordinatesFromPaper } from "@/js/utils/coordinates";
 
 import { CONFIG } from "./config";
-import { createPinIcon } from "./createPinIcon";
+
 import { PinProps } from "./types";
+import { createPinIcon } from "./createPinIcon";
 
 const { offsets } = CONFIG;
 const { basic, selected } = offsets;
 
 export const Pin: FC<PinProps> = memo(({ data, isActive, onClick }) => {
   const { east, north } = getCoordinatesFromPaper(data);
 
+  console.log("Pin rendering");
+
   const handleClick = () => onClick(data);
 
   if (!east || !north) {
@@ -22,7 +25,7 @@ export const Pin: FC<PinProps> = memo(({ data, isActive, onClick }) => {
   return (
     <Marker
       position={[north, east]}
-      icon={createPinIcon(isActive)}
+      icon={createPinIcon(isActive, data)}
       zIndexOffset={isActive ? selected : basic}
       eventHandlers={{
         click: handleClick,