From 31c0a3e701cffd0cc31ec88a6c9e184654419627 Mon Sep 17 00:00:00 2001
From: davidmurray <david.murray16@hotmail.com>
Date: Tue, 21 Nov 2023 11:06:09 -0500
Subject: [PATCH] Allow switching between routing alternatives using arrow keys

Fixes #768
---
 .../transitRouting/RoutingResultComponent.tsx | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/transition-frontend/src/components/forms/transitRouting/RoutingResultComponent.tsx b/packages/transition-frontend/src/components/forms/transitRouting/RoutingResultComponent.tsx
index ecab7a23..6a817fb2 100644
--- a/packages/transition-frontend/src/components/forms/transitRouting/RoutingResultComponent.tsx
+++ b/packages/transition-frontend/src/components/forms/transitRouting/RoutingResultComponent.tsx
@@ -64,19 +64,34 @@ const RoutingResults: React.FunctionComponent<TransitRoutingResultsProps> = (pro
     // TODO This may be racy (it already was) if the user switches alternative rapidly. Make it cancellable.
     showCurrentAlternative(result, alternativeIndex);
 
+    const onLeftButtonClick = () => {
+        setAlternativeIndex(alternativeIndex > 0 ? alternativeIndex - 1 : alternativesCount - 1);
+    };
+
+    const onRightButtonClick = () => {
+        setAlternativeIndex(alternativesCount > alternativeIndex + 1 ? alternativeIndex + 1 : 0);
+    };
+
     return (
         <React.Fragment>
             <div>
-                <div className="tr__form-buttons-container">
+                <div
+                    className="tr__form-buttons-container"
+                    onKeyDown={(e) => {
+                        if (e.key === 'ArrowLeft') {
+                            onLeftButtonClick();
+                        } else if (e.key === 'ArrowRight') {
+                            onRightButtonClick();
+                        }
+                    }}
+                >
                     {alternativesCount > 1 && (
                         <Button
                             icon={faAngleLeft}
                             color="blue"
                             iconClass="_icon-alone"
                             label=""
-                            onClick={() =>
-                                setAlternativeIndex(alternativeIndex > 0 ? alternativeIndex - 1 : alternativesCount - 1)
-                            }
+                            onClick={onLeftButtonClick}
                         />
                     )}
                     {alternativesCount > 0 && (
@@ -90,9 +105,7 @@ const RoutingResults: React.FunctionComponent<TransitRoutingResultsProps> = (pro
                             color="blue"
                             iconClass="_icon-alone"
                             label=""
-                            onClick={() =>
-                                setAlternativeIndex(alternativesCount > alternativeIndex + 1 ? alternativeIndex + 1 : 0)
-                            }
+                            onClick={onRightButtonClick}
                         />
                     )}
                 </div>