fUser Profile form styling and accessbility fixes

Changes: - [fix] fixed accessibility in links that are in the 'Step1FormErrorHeader' - [style] CFPB styling additions
cfpb · Aug 25, 2023 · b12050f · b12050f
1 parent 24dd90b
commit b12050f
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html
   lang="en"
-  class="text-gray-900 antialiased dark:bg-gray-800 dark:text-white"
+  class="text-gray-900 antialiased dark:bg-gray-800 dark:text-white leading-[1.375]"
 >
   <head>
     <meta charset="UTF-8" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import '@trussworks/react-uswds/lib/index.css';
 import useSblAuth from 'api/useSblAuth';
 import LoadingOrError from 'components/LoadingOrError';
 import { Button, FooterCfGov, Link, PageHeader } from 'design-system-react';

diff --git a/src/components/FormWrapper.tsx b/src/components/FormWrapper.tsx
@@ -6,7 +6,7 @@ interface Properties {
 
 function FormWrapper({children}: Properties): JSX.Element {
   return (
-    <div className="ml-5 mr-5">
+    <div className="ml-5 mr-5 mt-[45px]">
       <div className="max-w-[1200px] mx-auto mb-12">
         <div className="max-w-[770px] mx-auto">
           { children }

diff --git a/src/components/InputErrorMessage.tsx b/src/components/InputErrorMessage.tsx
@@ -7,7 +7,7 @@ interface Properties {
 
 function InputErrorMessage({children}: Properties): JSX.Element {
   return (
-    <div className="a-form-alert a-form-alert__error mt-[0.9375em]" role="alert"><ErrorIcon /><p className="a-form-alert_text ml-6 -translate-y-[6%]">{children}</p></div>
+    <div className="a-form-alert a-form-alert__error mt-[0.9375em]" role="alert"><ErrorIcon /><p className="a-form-alert_text ml-6 -translate-y-[6%] text-[#1B1B1B]">{children}</p></div>
 
   )
 }

diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,3 @@
-@import url('@trussworks/react-uswds/lib/index.css');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/src/pages/ProfileForm/InputEntry.tsx b/src/pages/ProfileForm/InputEntry.tsx
@@ -28,7 +28,7 @@ function InputEntry({id, errors, label, register, isDisabled = false, children}:
               <input
                 type={id==="email" ? "email" : "text"}
                 id={id}
-                className={`border w-full ${errors[id] ? 'border-errorColor border-2': ""} disabled:bg-disabledColor`}
+                className={`w-full border !border-cfpbBorderColor ${errors[id] ? 'border-errorColor border-2': ""} disabled:bg-disabledColor`}
                 {...register(id)}
                 disabled={isDisabled}
               />

diff --git a/src/pages/ProfileForm/Step1Form.tsx b/src/pages/ProfileForm/Step1Form.tsx
@@ -8,13 +8,13 @@ import { z } from "zod";
 
 import NoDatabaseResultError from './NoDatabaseResultError';
 
-import Select from "react-select";
-import Step1FormErrorHeader from "./Step1FormErrorHeader";
-import Step1FormHeader from "./Step1FormHeader";
 import InputErrorMessage from "components/InputErrorMessage";
 import { Button } from 'design-system-react';
+import Select from "react-select";
 import InputEntry from "./InputEntry";
 import { fiData } from './ProfileForm.data';
+import Step1FormErrorHeader from "./Step1FormErrorHeader";
+import Step1FormHeader from "./Step1FormHeader";
 import { formFields } from "./types";
 
 
@@ -102,7 +102,7 @@ function Step1Form(): JSX.Element {
       <Step1FormHeader />
       { errors && Object.keys(errors).length > 0 ? <Step1FormErrorHeader errors={errors} /> : null}
       <form
-        className="bg-[#F7F8F9] p-[30px] border"
+        className="bg-[#F7F8F9] p-[30px] border !border-cfpbBorderColor"
         onSubmit={handleSubmit(onSubmit)}
       >
         <InputEntry label={formFields.firstName} id="firstName" register={register} errors={errors} isDisabled={false} />

diff --git a/src/pages/ProfileForm/Step1FormErrorHeader.tsx b/src/pages/ProfileForm/Step1FormErrorHeader.tsx
@@ -22,12 +22,22 @@ function Step1FormErrorHeader({ errors }: Step1FormErrorHeaderProperties): JSX.E
             >
               {Object.keys(errors).filter(k => k !== "fiData").map((key: string): JSX.Element => {
 
+                const focusKeyItem = (): void => {
+                  const element = document.querySelector(`#${key}`) as HTMLElement | undefined;
+                  if (element) {
+                    element.focus();
+                  }
+                };
+
                 const onHandleFocus = (): void => {
-                const element = document.querySelector(`#${key}`) as HTMLElement | undefined;
-                if (element) {
-                  element.focus();
-                }
-              };
+                  focusKeyItem();
+                };
+
+                const onHandleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (event.key === 'Enter' || event.key === " ") {
+                    focusKeyItem();
+                  }
+                };
 
                 return (
                   <span className="flex mb-2" key={key}>
@@ -38,6 +48,7 @@ function Step1FormErrorHeader({ errors }: Step1FormErrorHeaderProperties): JSX.E
                       duration={300}
                       offset={-100}
                       onClick={onHandleFocus}
+                      onKeyPress={onHandleKeyPress}
                       tabIndex={0}
                     >
                       {formFieldsHeaderError[key as keyof typeof formFieldsHeaderError]}

diff --git a/src/pages/ProfileForm/Step1FormHeader.tsx b/src/pages/ProfileForm/Step1FormHeader.tsx
@@ -6,9 +6,10 @@ import { Link } from 'design-system-react';
  */
 function Step1FormHeader(): JSX.Element {
   return (
-          <div className="max-w-[670px]">
-            <h1 className="text-[26px] md:text-[30px] font-semibold leading-tight mb-[0.44117647em]">Complete your user profile</h1>
-            <p className="text-[18px] md:text-[20px] font-normal leading-tight mb-[30px]">In order to complete your user profile and access the filing platform your financial institution must have a Legal Entity Identifier (LEI). Visit the Global LEI Foundation (GLEIF) website for information on how to obtain an LEI for your institution.</p>
+          <div className="max-w-[41.875rem]">
+            <h1 className="">Complete your user profile</h1>
+            <p className="text-[18px] md:text-[20px] font-normal leading-tight mt-[1.36363636em] mb-[0.83333333em]">In order to complete your user profile and access the filing platform your financial institution must have a Legal Entity Identifier (LEI). Visit the Global LEI Foundation (GLEIF) website for information on how to obtain an LEI for your institution.
+            </p>
             <p className="leading-paragraph mb-[30px]">
               In order to begin using the filing platform you must have a Legal Entity identifier (LEI) for your financial institution. Visit the <Link href="#">Global LEI Foundation (GLEIF)</Link> website for more information on how to obtain an LEI.
             </p>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,8 @@ const config = {
     extend: {
       colors: {
         "errorColor": "#D14124",
-        "disabledColor": "#E7E8E9"
+        "disabledColor": "#E7E8E9",
+        "cfpbBorderColor": "#919395"
       },
       fontFamily: {
         inter: ['Inter', ...defaultConfig.theme.fontFamily.sans],