cfpb · shindigira · Sep 6, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 25, 2023
@@ -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" />

@@ -39,7 +39,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
     "react-keycloak-js": "^1.0.3",
-    "react-oidc-context": "^2.2.2",
+    "react-oidc-context": "^2.3.0",
     "react-router-dom": "6.11.1",
     "react-scroll": "^1.8.9",
     "react-select": "^5.7.4",

@@ -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';

@@ -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 }

@@ -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>
 
   )
 }

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

@@ -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}
               />

@@ -6,7 +6,7 @@ function NoDatabaseResultError(): JSX.Element {
     <div className="flex flex-row gap-2 mt-[0.9375em]">
       <ErrorIcon />
       <div className=''>
-        <p className='text -translate-y-[3%]'>The financial institution/LEI you searched for was not found in our database. If you recently registered for an LEI with GLEIF, your registration may still be in process. If you need further assistance please <Link href="#">submit a technical question</Link> to our help desk.
+        <p className='-translate-y-[3%]'>The financial institution/LEI you searched for was not found in our database. If you recently registered for an LEI with GLEIF, your registration may still be in process. If you need further assistance please <Link href="#">submit a technical question</Link> to our help desk.
         </p>
       </div>
     </div>

@@ -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} />
@@ -148,6 +148,7 @@ function Step1Form(): JSX.Element {
               // console.log('onclick errors', errors);
             }}
           label="Submit"
+          aria-label="Submit User Profile"
           size="default">
             Submit
         </Button>

@@ -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]}

@@ -6,10 +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>
-            <p className="leading-paragraph mb-[30px]">
+          <div className="max-w-[670px] mb-[45px]">
+            <h1 className="">Complete your user profile</h1>
+            <p className="lead-paragraph">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="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>
             <p />

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

@@ -4852,7 +4852,7 @@ __metadata:
     react-dom: 18.2.0
     react-hook-form: ^7.45.4
     react-keycloak-js: ^1.0.3
-    react-oidc-context: ^2.2.2
+    react-oidc-context: ^2.3.0
     react-router-dom: 6.11.1
     react-scroll: ^1.8.9
     react-select: ^5.7.4
@@ -10712,13 +10712,13 @@ display-element-css@cfpb/storybook-addon-display-element-css:
   languageName: node
   linkType: hard
 
-"react-oidc-context@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "react-oidc-context@npm:2.2.2"
+"react-oidc-context@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "react-oidc-context@npm:2.3.0"
   peerDependencies:
     oidc-client-ts: ^2.2.1
     react: ">=16.8.0"
-  checksum: aad079623c95e372711e8d0e07d44be76ef9ce357d0ea2dcc73b71d59bb34762b31461a8fc864a17159b742d8e33f8466f5e914445aaccaeb4f1aea7e06102a1
+  checksum: da706d3b100d7690c2de2157771491a49639675b2f133534c208457cd06013542c547dd5ecc63af336587325c93b836258faf8418ca46d47a81eaf3914a51df9
   languageName: node
   linkType: hard