From 645730a6e68899cf219ee3f97a9d66949bdaa3f2 Mon Sep 17 00:00:00 2001
From: David Wiese <21321101+davidwiese@users.noreply.github.com>
Date: Tue, 26 Mar 2024 11:05:39 -0700
Subject: [PATCH] Remove `back` button from normal keyboard navigation flow

---
 .../src/components-layout/FlowNavigation.tsx  | 19 +++++-
 .../src/components/Button.tsx                 | 66 +++++++++++--------
 2 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/products/statement-generator/src/components-layout/FlowNavigation.tsx b/products/statement-generator/src/components-layout/FlowNavigation.tsx
index 5f7b2053..2035c248 100644
--- a/products/statement-generator/src/components-layout/FlowNavigation.tsx
+++ b/products/statement-generator/src/components-layout/FlowNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import { makeStyles, createStyles } from '@material-ui/core';
 
 import FormStateContext from 'contexts/FormStateContext';
@@ -41,6 +41,9 @@ export default function FlowNavigation({
   const { goNextStep, goBackStep } = useContext(FormStateContext);
   const { appTheme } = useContext(RoutingContext);
 
+  const backButtonRef = useRef<HTMLButtonElement>(null);
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
   const utilityClasses = useUtilityStyles({ pageTheme: appTheme });
   const classes = useStyles();
 
@@ -63,11 +66,22 @@ export default function FlowNavigation({
     }
   };
 
+  const handleNextButtonKeyDown = (
+    event: React.KeyboardEvent<HTMLButtonElement>
+  ) => {
+    if (event.shiftKey && event.key === 'Tab') {
+      event.preventDefault();
+      backButtonRef.current?.focus();
+    }
+  };
+
   return (
     <div className={utilityClasses.buttonContainer}>
       {showBack && (
         <Button
+          ref={backButtonRef}
           className={classes.buttonLeft}
+          tabIndex={-1}
           onClick={handleBack}
           disabled={isBackDisabled}
           buttonText={backButtonLabel || 'BACK'}
@@ -78,8 +92,11 @@ export default function FlowNavigation({
 
       {showNext && (
         <Button
+          ref={nextButtonRef}
           className={classes.buttonRight}
+          tabIndex={0}
           onClick={handleNext}
+          onKeyDown={handleNextButtonKeyDown}
           disabled={isNextDisabled}
           buttonText={nextButtonLabel || 'NEXT'}
           theme="dark"
diff --git a/products/statement-generator/src/components/Button.tsx b/products/statement-generator/src/components/Button.tsx
index bfa9cae6..4b0dcf76 100644
--- a/products/statement-generator/src/components/Button.tsx
+++ b/products/statement-generator/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Theme, makeStyles, createStyles } from '@material-ui/core';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
@@ -133,34 +133,46 @@ interface ComponentProps {
   icon?: React.ReactNode;
   buttonText?: string;
   onClick?: () => void;
+  tabIndex?: number;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 }
 
-const ButtonComponent = ({
-  className = '',
-  theme,
-  hasBackArrow,
-  hasForwardArrow,
-  disabled = false,
-  icon,
-  buttonText,
-  onClick,
-}: ComponentProps) => {
-  const styleProps = { theme, hasBackArrow, hasForwardArrow };
-  const classes = useStyles(styleProps);
-  return (
-    <Button
-      disabled={disabled}
-      type="button"
-      className={`${classes.root} ${className}`}
-      onClick={onClick}
-    >
-      {hasBackArrow && <ArrowBackIcon style={{ height: '.8em' }} />}
-      {icon}
-      {buttonText}
-      {hasForwardArrow && <ArrowForwardIcon style={{ height: '.8em' }} />}
-    </Button>
-  );
-};
+const ButtonComponent = forwardRef<HTMLButtonElement, ComponentProps>(
+  (
+    {
+      className = '',
+      theme,
+      hasBackArrow,
+      hasForwardArrow,
+      disabled = false,
+      icon,
+      buttonText,
+      onClick,
+      tabIndex,
+      onKeyDown,
+    },
+    ref
+  ) => {
+    const styleProps = { theme, hasBackArrow, hasForwardArrow };
+    const classes = useStyles(styleProps);
+    return (
+      <Button
+        ref={ref}
+        disabled={disabled}
+        type="button"
+        className={`${classes.root} ${className}`}
+        onClick={onClick}
+        tabIndex={tabIndex}
+        onKeyDown={onKeyDown}
+      >
+        {hasBackArrow && <ArrowBackIcon style={{ height: '.8em' }} />}
+        {icon}
+        {buttonText}
+        {hasForwardArrow && <ArrowForwardIcon style={{ height: '.8em' }} />}
+      </Button>
+    );
+  }
+);
 
 interface ILinkButtonComponent {
   className?: string;