bcgov · minORC · Mar 1, 2024 · Feb 29, 2024
diff --git a/src/frontend/src/Components/FriendlyTime.js b/src/frontend/src/Components/FriendlyTime.js
@@ -33,8 +33,15 @@ export default function FriendlyTime( {date} ) {
             title={dateFormatted}
             onClick={(event) => {
               event.stopPropagation();
-              setShowTooltip(!showTooltip)}
-            }>
+              setShowTooltip(!showTooltip);
+            }}
+            onKeyDown={(keyEvent) => {
+              if (keyEvent.keyCode == 13) {
+                event.stopPropagation();
+                setShowTooltip(!showTooltip)
+              }
+            }}>
+
             <p className="friendly-time-text">
               <ReactTimeAgo date={date} locale="en-US"/>
             </p>

diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -721,7 +721,11 @@ export default function MapWrapper({
         ref={panel} className={`side-panel ${openPanel ? 'open' : ''}`}
         onClick={maximizePanel}
         onTouchMove={maximizePanel}
-      >
+        onKeyDown={(keyEvent) => {
+          if (keyEvent.keyCode == 13) {
+            maximizePanel();
+          }
+        }}>
 
         <button
           className="close-panel"

diff --git a/src/frontend/src/Components/advisories/AdvisoriesList.js b/src/frontend/src/Components/advisories/AdvisoriesList.js
@@ -27,7 +27,13 @@ export default function Advisories(props) {
     <ul className="advisories-list">
       {!!advisories && advisories.map((advisory, index) => {
         return (
-          <li className="advisory-li unread" key={advisory.id} onClick={() => handleClick(advisory)}>
+          <li className="advisory-li unread" key={advisory.id} onClick={() => handleClick(advisory)}
+            onKeyDown={(keyEvent) => {
+              if (keyEvent.keyCode == 13) {
+                handleClick(advisory);
+              }
+            }}>
+
             <div className="advisory-li-title-container">
               <h4 className='advisory-li-title'>{advisory.title}</h4>
               {showTimestamp &&

diff --git a/src/frontend/src/Components/bulletins/BulletinsList.js b/src/frontend/src/Components/bulletins/BulletinsList.js
@@ -28,7 +28,12 @@ export default function Bulletins(props) {
     <ul className='bulletins-list'>
       {!!bulletins && bulletins.map((bulletin, index) => {
         return (
-          <li className='bulletin-li unread' key={bulletin.id} onClick={() => handleClick(bulletin)}>
+          <li className='bulletin-li unread' key={bulletin.id} onClick={() => handleClick(bulletin)}
+            onKeyDown={(keyEvent) => {
+              if (keyEvent.keyCode == 13) {
+                handleClick(bulletin);
+              }
+            }}>
 
             <div className='bulletin-li-title-container'>
               <h3 className='bulletin-li-title'>{bulletin.title}</h3>

diff --git a/src/frontend/src/Components/cameras/CameraCard.js b/src/frontend/src/Components/cameras/CameraCard.js
@@ -80,7 +80,13 @@ export default function CameraCard(props) {
                 <p>Unable to retrieve latest image. Showing last image received.</p>
                 <FontAwesomeIcon icon={faXmark} onClick={handleChildClick} />
               </div>
-              <div className={'card-pill' + (show ? ' bounce' : ' hidden') } onClick={handleChildClick} >
+              <div className={'card-pill' + (show ? ' bounce' : ' hidden') } onClick={handleChildClick}
+                onKeyDown={(keyEvent) => {
+                  if (keyEvent.keyCode == 13) {
+                    handleChildClick();
+                  }
+                }}>
+
                 <p>Stale</p>
                 <FontAwesomeIcon icon={faCircleInfo} />
               </div>
@@ -96,7 +102,13 @@ export default function CameraCard(props) {
                 <p>Longer than expected delay, displaying last image received.</p>
                 <FontAwesomeIcon icon={faXmark} onClick={handleChildClick} />
               </div>
-              <div className={'card-pill' + (show ? ' bounce' : ' hidden') } onClick={handleChildClick} >
+              <div className={'card-pill' + (show ? ' bounce' : ' hidden') } onClick={handleChildClick}
+                onKeyDown={(keyEvent) => {
+                  if (keyEvent.keyCode == 13) {
+                    handleChildClick();
+                  }
+                }}>
+
                 <p>Delayed</p>
                 <FontAwesomeIcon icon={faCircleInfo} />
               </div>

diff --git a/src/frontend/src/Components/events/EventsTable.js b/src/frontend/src/Components/events/EventsTable.js
@@ -150,14 +150,14 @@ export default function EventsTable(props) {
               return (
                 <th className={header.id} key={header.id} colSpan={header.colSpan}>
                   {!header.isPlaceholder && !showLoader && (
-                    <span
-                      {...{
-                        className: header.column.getCanSort() ?
-                          'cursor-pointer select-none' :
-                          '',
-                        onClick: () => toggleSortingHandler(header.column),
-                      }}
-                    >
+                    <span className={ header.column.getCanSort() ? 'cursor-pointer select-none' : '' }
+                      onClick={() => toggleSortingHandler(header.column)}
+                      onKeyDown={(keyEvent) => {
+                        if (keyEvent.keyCode == 13) {
+                          toggleSortingHandler(header.column);
+                        }
+                      }}>
+
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()

diff --git a/src/frontend/src/Components/map/camPopup.js b/src/frontend/src/Components/map/camPopup.js
@@ -82,7 +82,16 @@ export default function CamPopup(props) {
       {camera &&
         <div className="popup__content">
           <div className="popup__content__title">
-            <p className="name" onClick={handlePopupClick}>{camera.name}</p>
+            <p className="name"
+              onClick={handlePopupClick}
+              onKeyDown={(keyEvent) => {
+                if (keyEvent.keyCode == 13) {
+                  handlePopupClick();
+                }
+              }}>
+
+              {camera.name}
+            </p>
           </div>
           {camera.is_on ?
             <div className="popup__content__image">

diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
@@ -197,7 +197,7 @@ export default function CameraDetailsPage() {
 
   const play = () => {
     // Pre load images for preventing strobing
-    // For Firefox, Settings Performance > Use recommended performance settings 
+    // For Firefox, Settings Performance > Use recommended performance settings
     // and Performance > Use recommended performance settings > Use hardware acceleration when available in the browser settings
     // need to be disabled
     replayImages.forEach((img) => {
@@ -222,7 +222,14 @@ export default function CameraDetailsPage() {
     <div className="camera-page">
       <div className="page-header">
         <Container>
-          <a onClick={returnHandler} className="back-link">
+          <a className="back-link"
+            onClick={returnHandler}
+            onKeyDown={(keyEvent) => {
+              if (keyEvent.keyCode == 13) {
+                returnHandler();
+              }
+            }}>
+
             <FontAwesomeIcon icon={faArrowLeft} />
             Back to last page
           </a>

diff --git a/src/frontend/src/pages/EventsListPage.js b/src/frontend/src/pages/EventsListPage.js
@@ -217,7 +217,14 @@ export default function EventsListPage() {
             <div className="events-list">
               { !showLoader && processedEvents.map(
                 (e) => (
-                  <div className="card-selector" key={e.id} onClick={() => handleRoute(e)}>
+                  <div className="card-selector" key={e.id}
+                    onClick={() => handleRoute(e)}
+                    onKeyDown={(keyEvent) => {
+                      if (keyEvent.keyCode == 13) {
+                        handleRoute(e);
+                      }
+                    }}>
+
                     <EventCard
                       className="event"
                       event={e}