From 3695cda5a67da8ca8ca84b684c67ed2db4824b10 Mon Sep 17 00:00:00 2001
From: Chris Wilton-Magras <chriswilty@zoho.com>
Date: Wed, 2 Oct 2024 10:05:45 +0100
Subject: [PATCH] fix: Enter key on city gridcell fires navigation

---
 .../LocationCellRenderer.tsx                  | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/air-quality-ui/src/components/summary-grid/cell/location-cell-renderer/LocationCellRenderer.tsx b/air-quality-ui/src/components/summary-grid/cell/location-cell-renderer/LocationCellRenderer.tsx
index 96be632f..89cddaaa 100644
--- a/air-quality-ui/src/components/summary-grid/cell/location-cell-renderer/LocationCellRenderer.tsx
+++ b/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>
   )
 }