fix: Enter key on city gridcell fires navigation

air-quality-ui/src/components/summary-grid/cell/location-cell-renderer/LocationCellRenderer.tsx

@@ -1,19 +1,42 @@
 import { ICellRendererParams } from 'ag-grid-community'
-import { Link } from 'react-router-dom'
+import { useCallback, useEffect, useId } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
 
 import classes from './LocationCellRenderer.module.css'
 import { RouteConstants } from '../../../../routes'
 
 export const LocationCellRenderer = (
-  props: Pick<ICellRendererParams, 'value'>,
+  props: Pick<ICellRendererParams, 'value' | 'eGridCell'>,
 ) => {
+  const { eGridCell, value } = props
+  const linkTo = `${RouteConstants.SINGLE_CITY}/${value}`
+  const linkId = useId()
+  const navigate = useNavigate()
+
+  const navListener = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Enter') navigate(linkTo)
+    },
+    [linkTo, navigate],
+  )
+
+  useEffect(() => {
+    eGridCell.setAttribute('aria-activedescendant', linkId)
+    eGridCell.addEventListener('keydown', navListener)
+
+    return () => {
+      eGridCell.removeEventListener('keydown', navListener)
+    }
+  }, [eGridCell, linkId, navListener])
+
   return (
     <Link
-      to={`${RouteConstants.SINGLE_CITY}/${props.value}`}
+      id={linkId}
+      to={linkTo}
       role="link"
       className={classes['location-link']}
     >
-      {props.value}
+      {value}
     </Link>
   )
 }