DBC22-1895: added tab and enter logic to header of each event

bcgov · Apr 30, 2024 · c050c6e · c050c6e
1 parent 13ceab8
commit c050c6e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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;
   }
-}
+}