chore: Add auto focus for page headings (#5515)

* update focus heading

Author: timarney

app/(gcforms)/[locale]/(support)/components/client/FocusHeader.tsx

@@ -2,9 +2,15 @@
 import { useFocusIt } from "@lib/hooks/useFocusIt";
 import { ReactElement, useRef } from "react";
 
-export const FocusHeader = ({ children }: { children: ReactElement | string }) => {
+export const FocusHeader = ({
+  children,
+  headingTag: HeadingTag = "h1",
+}: {
+  children: ReactElement | string;
+  headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}) => {
   const headingSuccessRef = useRef(null);
   useFocusIt({ elRef: headingSuccessRef });
 
-  return <h1 ref={headingSuccessRef}>{children}</h1>;
+  return <HeadingTag ref={headingSuccessRef}>{children}</HeadingTag>;
 };

components/clientComponents/forms/Form/Form.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { withFormik } from "formik";
 import { getFormInitialValues } from "@lib/formBuilder";
 import { getErrorList, setFocusOnErrorMessage, validateOnSubmit } from "@lib/validation/validation";
@@ -36,6 +36,8 @@ import { FormStatus } from "@gcforms/types";
 import { CaptchaFail } from "@clientComponents/globals/FormCaptcha/CaptchaFail";
 import { ga } from "@lib/client/clientHelpers";
 
+import { FocusHeader } from "app/(gcforms)/[locale]/(support)/components/client/FocusHeader";
+
 /**
  * This is the "inner" form component that isn't connected to Formik and just renders a simple form
  * @param props
@@ -59,7 +61,6 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
   const isGroupsCheck = groupsCheck(props.allowGrouping);
   const isShowReviewPage = showReviewPage(form);
   const showIntro = isGroupsCheck ? currentGroup === LockedSections.START : true;
-  const groupsHeadingRef = useRef<HTMLHeadingElement>(null);
   const { getFormDelayWithGroups, getFormDelayWithoutGroups } = useFormDelay();
 
   // Used to set any values we'd like added for use in the below withFormik handleSubmit().
@@ -181,9 +182,9 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
               isShowReviewPage &&
               currentGroup !== LockedSections.REVIEW &&
               currentGroup !== LockedSections.START && (
-                <h2 tabIndex={-1} ref={groupsHeadingRef}>
+                <FocusHeader headingTag="h2">
                   {getGroupTitle(currentGroup, language as Language)}
-                </h2>
+                </FocusHeader>
               )}
 
             {children}

lib/hooks/useFocusIt.tsx

@@ -27,6 +27,7 @@ export const useFocusIt = ({
 }) => {
   useEffect(() => {
     const el = elRef.current;
+
     if (el) {
       // Add a tabindex if one does not exist on the element. This needed to focus an element,
       // unless it is a form control like an input or button