Vote-3111: Error list

src/Utils/ErrorList.jsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+
+function ErrorList({ formSubmitted }) {
+  const [hasError, setHasError] = useState(false);
+  const [errorMessages, setErrorMessages] = useState([]);
+
+  useEffect(() => {
+    const checkError = () => {
+      if (formSubmitted) {
+        const errorContainers = document.querySelectorAll('.vote-error-container');
+        if (errorContainers.length > 0) {
+          const errorMessages = Array.from(errorContainers).map((container) => {
+            const errorTexts = Array.from(container.querySelectorAll('span.vote-error-text'));
+            const inputElement = container.querySelector(':is(input, select)');
+            return errorTexts.map((errorText) => ({
+              id: inputElement.id,
+              text: errorText.textContent,
+            }));
+          }).flat();
+          setErrorMessages(errorMessages);
+          setHasError(true);
+        } else {
+          setErrorMessages([]);
+          setHasError(false);
+        }
+      }
+    };
+
+    checkError();
+
+    const intervalId = setInterval(checkError, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [formSubmitted]);
+
+  useEffect(() => {
+    if (hasError) {
+      const errorListContainer = document.querySelector('.usa-alert--error');
+      if (errorListContainer) {
+        errorListContainer.focus();
+      }
+    }
+  }, [hasError]);
+
+  return (
+    <React.Fragment>
+      {hasError && (
+        <div
+          className="usa-alert usa-alert--error"
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+          tabIndex={-1}
+        >
+          <div className="usa-alert__body">
+            <h4 className="usa-alert__heading" id="error-list-title">
+              Errors
+            </h4>
+            <ul>
+              {errorMessages.map((errorMessage, index) => (
+                <li key={index}>
+                  <a
+                    href={`#${errorMessage.id}`}
+                    role="link"
+                    tabIndex={0}
+                  >
+                    {errorMessage.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </React.Fragment>
+  );
+}
+
+export default ErrorList;

src/Views/MultiStepForm.jsx

@@ -1,5 +1,5 @@
 import {Form} from '@trussworks/react-uswds';
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import ProgressBar from 'Components/ProgressBar';
 import PersonalInfo from "Views/FormPages/PersonalInfo";
 import Addresses from "Views/FormPages/Addresses"
@@ -12,8 +12,12 @@ import BackButton from 'Components/Buttons/BackButton'
 import NextButton from 'Components/Buttons/NextButton';
 import { Helmet } from "react-helmet-async";
 import {sanitizeDOM} from "Utils/JsonHelper";
+import ErrorList from 'Utils/ErrorList';
 
 function MultiStepForm(props) {
+    // setting state for error list to track when the form is submitted to render on an error
+    const [formSubmitted, setFormSubmitted] = useState(false);
+
     const content = props.content;
     const navContent = props.navContent;
     const fieldContent = props.fieldContent;
@@ -229,6 +233,7 @@ function MultiStepForm(props) {
     }
 
     const nextStepValidation = () => {
+        setFormSubmitted(true);
         switch (step) {
             case 1:
                 emailValid();
@@ -285,6 +290,11 @@ function MultiStepForm(props) {
                     pushPageTitleDataLayer(analyticsLabels["stepLabel"+step])
                 }}
             >
+
+                {/* setting error list to only render on form pages */}
+                {[1, 2, 3, 4].includes(step) && (
+                <ErrorList formSubmitted={formSubmitted} />
+                )}
                 {step === 1 &&
                     <PersonalInfo
                         state={props.state}