diff --git a/index.html b/index.html index 56fe0dd12..521a78f5f 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ diff --git a/src/App.tsx b/src/App.tsx index dcaa829e6..4f84a0322 100644 --- 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 index a19029f7e..c188ea398 100644 --- a/src/components/FormWrapper.tsx +++ b/src/components/FormWrapper.tsx @@ -6,7 +6,7 @@ interface Properties { function FormWrapper({children}: Properties): JSX.Element { return ( -
+
{ children } diff --git a/src/components/InputErrorMessage.tsx b/src/components/InputErrorMessage.tsx index 8ce7da1b6..8f99cb74f 100644 --- a/src/components/InputErrorMessage.tsx +++ b/src/components/InputErrorMessage.tsx @@ -7,7 +7,7 @@ interface Properties { function InputErrorMessage({children}: Properties): JSX.Element { return ( -

{children}

+

{children}

) } diff --git a/src/index.css b/src/index.css index 0b6dfd100..98c41ba48 100644 --- 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 index 010c1386a..e3f31fba3 100644 --- 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}: diff --git a/src/pages/ProfileForm/Step1Form.tsx b/src/pages/ProfileForm/Step1Form.tsx index 8b7340c60..06f81e959 100644 --- 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 { { errors && Object.keys(errors).length > 0 ? : null}
diff --git a/src/pages/ProfileForm/Step1FormErrorHeader.tsx b/src/pages/ProfileForm/Step1FormErrorHeader.tsx index 08d769e82..2b67fe5c5 100644 --- 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) => { + if (event.key === 'Enter' || event.key === " ") { + focusKeyItem(); + } + }; return ( @@ -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 index d801f3af6..8e88ca0ab 100644 --- 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 ( -
-

Complete your user profile

-

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.

+
+

Complete your user profile

+

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. +

In order to begin using the filing platform you must have a Legal Entity identifier (LEI) for your financial institution. Visit the Global LEI Foundation (GLEIF) website for more information on how to obtain an LEI.

diff --git a/tailwind.config.js b/tailwind.config.js index 05b22855d..f45de6608 100644 --- 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],