fix: error focusing in public application

shared-helpers/package.json

@@ -17,7 +17,7 @@
     "prettier": "prettier --write \"**/*.ts\""
   },
   "dependencies": {
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.1.1",
     "axios-cookiejar-support": "^5.0.5",

sites/partners/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.2.0",
     "@mapbox/mapbox-sdk": "^0.13.0",

sites/public/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.1.1",
     "@mapbox/mapbox-sdk": "^0.13.0",

sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx

@@ -24,8 +24,11 @@ import {
 import FormsLayout from "../../layouts/forms"
 import { useFormConductor } from "../../lib/hooks"
 import { UserStatus } from "../../lib/constants"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../layouts/application-form"
 import { AddressValidationSelection, findValidatedAddress, FoundAddress } from "./ValidateAddress"
-import ApplicationFormLayout from "../../layouts/application-form"
 
 export interface ApplicationMultiselectQuestionStepProps {
   applicationSection: MultiselectQuestionsApplicationSectionEnum
@@ -168,6 +171,10 @@ const ApplicationMultiselectQuestionStep = ({
     conductor.routeToNextOrReturnUrl()
   }
 
+  const onError = () => {
+    onFormError()
+  }
+
   const watchQuestions = watch(allOptionNames)
 
   if (!clientLoaded || !allOptionNames) {
@@ -237,7 +244,7 @@ const ApplicationMultiselectQuestionStep = ({
         swapCommunityTypeWithPrograms
       )} - ${t("listings.apply.applyOnline")} - ${listing?.name}`}
     >
-      <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
         <ApplicationFormLayout
           listingName={listing?.name}
           heading={
@@ -271,11 +278,7 @@ const ApplicationMultiselectQuestionStep = ({
           }
           conductor={conductor}
         >
-          {!!Object.keys(errors).length && (
-            <AlertBox type="alert" inverted closeable>
-              {t("errors.errorsToResolve")}
-            </AlertBox>
-          )}
+          <ApplicationAlertBox errors={errors} />
 
           <div style={{ display: verifyAddress ? "none" : "block" }} key={question?.id}>
             <CardSection>

sites/public/src/layouts/application-form.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import Markdown from "markdown-to-jsx"
+import { UseFormMethods } from "react-hook-form"
 import { BloomCard, CustomIconMap } from "@bloom-housing/shared-helpers"
-import { Button, Heading, Icon, Message } from "@bloom-housing/ui-seeds"
+import { Alert, Button, Heading, Icon, Message } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { t, ProgressNav, StepHeader } from "@bloom-housing/ui-components"
 import ApplicationConductor from "../lib/applications/ApplicationConductor"
@@ -37,6 +38,32 @@ export const LockIcon = ({ locked }: { locked: boolean }) => {
   )
 }
 
+interface ApplicationAlertBoxProps {
+  errors: UseFormMethods["errors"]
+}
+
+export const onFormError = (errorBoxId?: string) => {
+  window.scrollTo(0, 0)
+  document.getElementById(errorBoxId ?? "application-alert-box-wrapper")?.focus()
+}
+
+export const ApplicationAlertBox = (props: ApplicationAlertBoxProps) => {
+  return (
+    <div id="application-alert-box-wrapper" tabIndex={-1}>
+      {Object.entries(props.errors).length > 0 && (
+        <Alert
+          className={styles["message-inside-card"]}
+          variant="alert"
+          fullwidth
+          id={"application-alert-box"}
+        >
+          {t("errors.errorsToResolve")}
+        </Alert>
+      )}
+    </div>
+  )
+}
+
 const ApplicationFormLayout = (props: ApplicationFormLayoutProps) => {
   const getBackLink = (url?: string, onClickFxn?: () => void) => {
     return (

sites/public/src/pages/applications/contact/address.tsx

@@ -24,8 +24,10 @@ import {
   AddressValidationSelection,
 } from "../../../components/applications/ValidateAddress"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationAddress = () => {
   const { profile } = useContext(AuthContext)
@@ -103,7 +105,7 @@ const ApplicationAddress = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const noPhone: boolean = watch("applicant.noPhone")
@@ -167,16 +169,7 @@ const ApplicationAddress = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <div style={{ display: verifyAddress ? "none" : "block" }}>
             <CardSection divider={"inset"}>
               <fieldset>

sites/public/src/pages/applications/contact/alternate-contact-contact.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { Field, Form, PhoneField, Select, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   OnClientSide,
   PageView,
@@ -13,9 +12,12 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 import FormsLayout from "../../../layouts/forms"
-import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationAlternateContactContact = () => {
   const { profile } = useContext(AuthContext)
@@ -45,7 +47,7 @@ const ApplicationAlternateContactContact = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -106,17 +108,7 @@ const ApplicationAlternateContactContact = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"inset"}>
             <label className="text__caps-spaced" htmlFor="phoneNumber">
               <LockIcon locked={isAdvocate} />

sites/public/src/pages/applications/contact/alternate-contact-name.tsx

@@ -9,7 +9,11 @@ import FormsLayout from "../../../layouts/forms"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationAlternateContactName = () => {
@@ -39,7 +43,7 @@ const ApplicationAlternateContactName = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -80,16 +84,7 @@ const ApplicationAlternateContactName = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className="text__caps-spaced">

sites/public/src/pages/applications/contact/alternate-contact-type.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
-import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds"
+import { FormErrorMessage } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { Field, Form, t } from "@bloom-housing/ui-components"
 import {
@@ -15,8 +15,10 @@ import FormsLayout from "../../../layouts/forms"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationAlternateContactType = () => {
   const { profile } = useContext(AuthContext)
@@ -44,7 +46,7 @@ const ApplicationAlternateContactType = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
   const type = watch("type", application.alternateContact.type)
   const getOptionLabel = (option: string) => {
@@ -84,16 +86,7 @@ const ApplicationAlternateContactType = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className={`text__caps-spaced ${errors?.type ? "text-alert" : ""}`}>

sites/public/src/pages/applications/contact/name.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { DOBField, Field, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   OnClientSide,
   PageView,
@@ -13,8 +12,11 @@ import {
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationName = () => {
   const { profile } = useContext(AuthContext)
@@ -43,8 +45,9 @@ const ApplicationName = () => {
     }
     conductor.routeToNextOrReturnUrl()
   }
+
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const emailPresent: string = watch("applicant.emailAddress")
@@ -85,16 +88,7 @@ const ApplicationName = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"inset"}>
             <div id={"application-initial-page"}>
               <fieldset>

sites/public/src/pages/applications/financial/income.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from "react"
 import Link from "next/link"
 import { useForm } from "react-hook-form"
 import { AlertBox, AlertNotice, Field, FieldGroup, Form, t } from "@bloom-housing/ui-components"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import {
   OnClientSide,
@@ -18,8 +17,10 @@ import {
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 type IncomeError = "low" | "high" | null
 type IncomePeriod = "perMonth" | "perYear"
@@ -91,7 +92,7 @@ const ApplicationIncome = () => {
     }
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const incomePeriodValues = [
@@ -140,17 +141,7 @@ const ApplicationIncome = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           {incomeError && (
             <CardSection>
               <AlertBox type="alert" inverted onClose={() => setIncomeError(null)}>