From c050c6eb9a93ab9c8ae43f98de80f938c01b1fd3 Mon Sep 17 00:00:00 2001
From: Tyrel Narciso <tyrel@oxd.com>
Date: Tue, 30 Apr 2024 12:01:54 -0700
Subject: [PATCH] DBC22-1895: added tab and enter logic to header of each event

---
 src/frontend/src/Components/events/EventsTable.js   | 6 +++++-
 src/frontend/src/Components/events/EventsTable.scss | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/Components/events/EventsTable.js b/src/frontend/src/Components/events/EventsTable.js
index e55376fd..5edd1adc 100644
--- a/src/frontend/src/Components/events/EventsTable.js
+++ b/src/frontend/src/Components/events/EventsTable.js
@@ -197,7 +197,11 @@ export default function EventsTable(props) {
       const row = rows[i];
 
       res.push(
-        <tr className={`${row.original.severity.toLowerCase()} headerRow`} onClick={() => routeHandler(row.original)} key={`${row.id}-header-row`}>
+        <tr className={`${row.original.severity.toLowerCase()} headerRow`} tabIndex={0} onKeyUp={(event)=>{
+          if (event.key === 'Enter') {
+            routeHandler(row.original);
+          }
+        }} onClick={() => routeHandler(row.original)} key={`${row.id}-header-row`}>
           <td colSpan={10}>
             <p className={'roadName'}>{row.original.route_at}</p>
             <p className={'directionDisplay'}>{row.original.direction_display}</p>
diff --git a/src/frontend/src/Components/events/EventsTable.scss b/src/frontend/src/Components/events/EventsTable.scss
index 24e913e0..f7720ff0 100644
--- a/src/frontend/src/Components/events/EventsTable.scss
+++ b/src/frontend/src/Components/events/EventsTable.scss
@@ -56,6 +56,10 @@ table {
       }
     }
 
+    tr:focus {
+      background-color: $BC-Blue-Light;
+    }
+
     .headerRow {
       &:hover + tr {
         background-color: $BC-Blue-Light;
@@ -196,4 +200,4 @@ td.next_update .friendly-time-text {
     margin-top: 12px;
     display: inline-block;
   }
-}
\ No newline at end of file
+}