feat: a11y updates

packages/react-frontend/account/LoginForm/index.tsx

@@ -8,6 +8,7 @@ import { useAccountStore } from "store/account";
 import { useLog } from "hooks/useLog";
 import { Input } from "components/Form/Input";
 import * as Styled from "./LoginForm.styled";
+import { useError } from "hooks/form/useError";
 
 export const LoginForm = () => {
   const { login } = useApi();
@@ -16,9 +17,12 @@ export const LoginForm = () => {
   const [email, setEmail] = useState(IS_DEV ? "miko@mikosramek.ca" : "");
   const [password, setPassword] = useState(IS_DEV ? "password" : "");
 
+  const { ErrorText, setError } = useError();
+
   const handleSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setError("");
       login({ email, password })
         .then((response) => {
           if (response && !(response instanceof Error)) {
@@ -32,9 +36,19 @@ export const LoginForm = () => {
             Router.push("/armies");
           }
         })
-        .catch(error);
+        .catch((err) => {
+          error(err);
+          const errMessage = err.response.data;
+          switch (errMessage) {
+            case "Email or Password incorrect":
+              setError(errMessage);
+              break;
+            default:
+              setError("Something went wrong");
+          }
+        });
     },
-    [email, error, logUserIn, login, password]
+    [email, error, logUserIn, login, password, setError]
   );
 
   return (
@@ -46,6 +60,7 @@ export const LoginForm = () => {
         label="Email"
         value={email}
         onChange={(_i, val) => setEmail(val)}
+        required
       />
       <Input
         type="password"
@@ -54,8 +69,10 @@ export const LoginForm = () => {
         value={password}
         onChange={(_i, val) => setPassword(val)}
         autocomplete="current-password"
+        required
       />
       <MainButton copy="Login" />
+      {ErrorText}
     </Styled.Form>
   );
 };

packages/react-frontend/account/SignupForm/index.tsx

@@ -8,6 +8,7 @@ import { useApi } from "hooks/useApi";
 import { useAccountStore } from "store/account";
 import { useLog } from "hooks/useLog";
 import { storeSession } from "utils/general";
+import { useError } from "hooks/form/useError";
 
 export const SignupForm = () => {
   const { signUp } = useApi();
@@ -18,14 +19,12 @@ export const SignupForm = () => {
   );
   const [password, setPassword] = useState(IS_DEV ? "password" : "");
   const [showPassword, toggleShowPassword] = useReducer((val) => !val, false);
-
-  const [apiError, setApiError] = useState("");
-  const errorRef = useRef<HTMLInputElement>(null);
+  const { ErrorText, setError } = useError();
 
   const handleSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      setApiError("");
+      setError("");
       signUp({ email, password })
         .then((response) => {
           if (response && !(response instanceof Error)) {
@@ -41,11 +40,10 @@ export const SignupForm = () => {
         })
         .catch((e) => {
           error(e);
-          setApiError(e.response.data);
-          if (errorRef.current) errorRef.current.focus();
+          setError(e.response.data);
         });
     },
-    [email, error, logUserIn, password, signUp]
+    [email, error, logUserIn, password, signUp, setError]
   );
 
   return (
@@ -76,11 +74,13 @@ export const SignupForm = () => {
           label="Show Password"
           checked={showPassword}
           onChange={toggleShowPassword}
-          aria-label="Show password as plain text. Warning: this will display your password on the screen."
+          ariaLabel={`Show password as plain text. Warning: this ${
+            showPassword ? "is displaying" : "will display"
+          }  your password as plain text.`}
         />
       </Styled.ToggleWrapper>
       <MainButton copy="Sign up" />
-      <Styled.Error ref={errorRef}>{apiError}</Styled.Error>
+      {ErrorText}
     </Styled.Form>
   );
 };

packages/react-frontend/armies/StepContainer/index.tsx

@@ -23,7 +23,7 @@ const StepContainer = ({ step, stepCount }: Props) => {
   const handleDelete = useCallback(() => {
     const confirmation = confirm(`Delete the "${step.name}" step?`);
     if (confirmation) deleteStep(step.id);
-  }, [step]);
+  }, [deleteStep, step.id, step.name]);
 
   const [isLoading, setLoading] = useState(false);
   const handleReorder = useCallback(
@@ -38,7 +38,7 @@ const StepContainer = ({ step, stepCount }: Props) => {
         setLoading(false);
       }
     },
-    [step, isLoading, canReorder]
+    [isLoading, canReorder, moveStep, step.id, error]
   );
 
   return (

packages/react-frontend/armies/Steps/index.tsx

@@ -38,7 +38,7 @@ const StepsPage = ({ steps }: Props) => {
         decreaseCounter();
       }
     }
-  }, [counter, parsedSteps]);
+  }, [counter, decreaseCounter, log, parsedSteps, setCurrentStepId]);
 
   return (
     <>

packages/react-frontend/armies/StepsControlBar/StepsControlBar.styled.ts

@@ -29,7 +29,7 @@ export const ListButton = styled(MainButton)`
 `;
 
 export const TurnButton = styled(ListButton)`
-  border: 1px solid var(--black);
+  border: 1px solid var(--impact);
   width: 75px;
   height: 75px;
   display: flex;

packages/react-frontend/components/Form/Input.tsx

@@ -11,6 +11,7 @@ type Props = {
   autocomplete?: string;
   required?: boolean;
   checked?: boolean;
+  ariaLabel?: string;
 };
 
 export const Input = ({
@@ -23,6 +24,7 @@ export const Input = ({
   autocomplete,
   required = false,
   checked = false,
+  ariaLabel,
 }: Props) => {
   return (
     <>
@@ -54,6 +56,7 @@ export const Input = ({
           autoComplete={autocomplete}
           required={required}
           checked={checked}
+          aria-label={ariaLabel}
         />
       )}
     </>

packages/react-frontend/components/Header/index.tsx

@@ -28,12 +28,18 @@ const Header = () => {
           {!isLoggedIn && (
             <>
               <Link href="/signup" passHref legacyBehavior>
-                <Styled.StyledLink isActive={pathname === "/signup"}>
+                <Styled.StyledLink
+                  aria-current={pathname === "/signup" ? "page" : undefined}
+                  isActive={pathname === "/signup"}
+                >
                   Sign up
                 </Styled.StyledLink>
               </Link>
               <Link href="/" passHref legacyBehavior>
-                <Styled.StyledLink isActive={pathname === "/"}>
+                <Styled.StyledLink
+                  aria-current={pathname === "/" ? "page" : undefined}
+                  isActive={pathname === "/"}
+                >
                   Log in
                 </Styled.StyledLink>
               </Link>

packages/react-frontend/components/MainButton/MainButton.styled.ts

@@ -11,4 +11,8 @@ export const Button = styled.button`
   &:disabled {
     color: var(--impact-dark);
   }
+  &:focus {
+    color: var(--white);
+    background: var(--impact);
+  }
 `;

packages/react-frontend/components/MainButton/index.tsx

@@ -1,11 +1,12 @@
 import * as Styled from "./MainButton.styled";
 
-type Props = {
+export type Props = {
   onClick?: () => void;
   copy: string;
   className?: string;
   disabled?: boolean;
   ariaLabel?: string;
+  type?: "submit" | "reset" | "button";
 };
 
 export const MainButton = ({
@@ -14,10 +15,11 @@ export const MainButton = ({
   className = "",
   disabled = false,
   ariaLabel = copy,
+  type = "submit",
 }: Props) => {
   return (
     <Styled.Button
-      type="submit"
+      type={type}
       className={className}
       onClick={onClick}
       disabled={disabled}

packages/react-frontend/components/Modals/ModalButton/ModalButton.styled.ts

@@ -0,0 +1,13 @@
+import { MainButton } from "components/MainButton";
+import styled from "styled-components";
+
+export const Button = styled(MainButton)`
+  border: 1px solid var(--impact);
+  margin-right: 10px;
+  &:last-of-type {
+    margin-right: 0;
+  }
+  &:focus {
+    border-color: var(--white);
+  }
+`;

packages/react-frontend/components/Modals/ModalButton/index.tsx

@@ -0,0 +1,8 @@
+import { Props as BaseProps } from "components/MainButton";
+import * as Styled from "./ModalButton.styled";
+
+type Props = {} & BaseProps;
+
+export const ModalButton = ({ ...props }: Props) => {
+  return <Styled.Button {...props} />;
+};

packages/react-frontend/components/Modals/ModalWrapper.styled.ts

@@ -44,6 +44,9 @@ export const CloseButton = styled.button`
   font-size: 36px;
   background-color: var(--white);
   color: var(--impact);
+  &:focus {
+    border: 2px solid var(--impact);
+  }
 `;
 
 export const Heading = styled.h2`