diff --git a/.pnp.cjs b/.pnp.cjs index 5d669f68d..798668256 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -90,7 +90,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:18.2.0"],\ ["react-hook-form", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:7.45.4"],\ ["react-keycloak-js", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:1.0.3"],\ - ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.2.2"],\ + ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.3.0"],\ ["react-router-dom", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:6.11.1"],\ ["react-scroll", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:1.8.9"],\ ["react-select", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:5.7.4"],\ @@ -7051,7 +7051,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-dom", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:18.2.0"],\ ["react-hook-form", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:7.45.4"],\ ["react-keycloak-js", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:1.0.3"],\ - ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.2.2"],\ + ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.3.0"],\ ["react-router-dom", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:6.11.1"],\ ["react-scroll", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:1.8.9"],\ ["react-select", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:5.7.4"],\ @@ -13885,17 +13885,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { }]\ ]],\ ["react-oidc-context", [\ - ["npm:2.2.2", {\ - "packageLocation": "./.yarn/cache/react-oidc-context-npm-2.2.2-0a12eb41c8-aad079623c.zip/node_modules/react-oidc-context/",\ + ["npm:2.3.0", {\ + "packageLocation": "./.yarn/cache/react-oidc-context-npm-2.3.0-bfbfe184d0-da706d3b10.zip/node_modules/react-oidc-context/",\ "packageDependencies": [\ - ["react-oidc-context", "npm:2.2.2"]\ + ["react-oidc-context", "npm:2.3.0"]\ ],\ "linkType": "SOFT"\ }],\ - ["virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.2.2", {\ - "packageLocation": "./.yarn/__virtual__/react-oidc-context-virtual-34e2cfd5c3/0/cache/react-oidc-context-npm-2.2.2-0a12eb41c8-aad079623c.zip/node_modules/react-oidc-context/",\ + ["virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.3.0", {\ + "packageLocation": "./.yarn/__virtual__/react-oidc-context-virtual-37383c91b3/0/cache/react-oidc-context-npm-2.3.0-bfbfe184d0-da706d3b10.zip/node_modules/react-oidc-context/",\ "packageDependencies": [\ - ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.2.2"],\ + ["react-oidc-context", "virtual:f7f45d0afed56bebc9b6071d64a8b36f3e9be326ad426e543ed2a736ab5ac574a41eda99b460f60da393058b48b30427260faa08cec8c3784211fcca75f7433f#npm:2.3.0"],\ ["@types/oidc-client-ts", null],\ ["@types/react", "npm:18.2.20"],\ ["oidc-client-ts", "npm:2.2.4"],\ diff --git a/.yarn/cache/react-oidc-context-npm-2.2.2-0a12eb41c8-aad079623c.zip b/.yarn/cache/react-oidc-context-npm-2.2.2-0a12eb41c8-aad079623c.zip deleted file mode 100644 index 998575dd2..000000000 Binary files a/.yarn/cache/react-oidc-context-npm-2.2.2-0a12eb41c8-aad079623c.zip and /dev/null differ diff --git a/.yarn/cache/react-oidc-context-npm-2.3.0-bfbfe184d0-da706d3b10.zip b/.yarn/cache/react-oidc-context-npm-2.3.0-bfbfe184d0-da706d3b10.zip new file mode 100644 index 000000000..8a9a904e8 Binary files /dev/null and b/.yarn/cache/react-oidc-context-npm-2.3.0-bfbfe184d0-da706d3b10.zip differ diff --git a/index.html b/index.html index b9ab6731d..cd0091cd8 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ diff --git a/package.json b/package.json index 79bb5a4a9..eeb6d7ac3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index c147efe11..1f73e9325 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/NoDatabaseResultError.tsx b/src/pages/ProfileForm/NoDatabaseResultError.tsx index f0d25c3d3..297a50653 100644 --- a/src/pages/ProfileForm/NoDatabaseResultError.tsx +++ b/src/pages/ProfileForm/NoDatabaseResultError.tsx @@ -6,7 +6,7 @@ function NoDatabaseResultError(): JSX.Element {
-

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 submit a technical question to our help desk. +

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 submit a technical question to our help desk.

diff --git a/src/pages/ProfileForm/Step1Form.tsx b/src/pages/ProfileForm/Step1Form.tsx index 3191a04c1..28c4eeaba 100644 --- a/src/pages/ProfileForm/Step1Form.tsx +++ b/src/pages/ProfileForm/Step1Form.tsx @@ -102,7 +102,7 @@ function Step1Form(): JSX.Element { { errors && Object.keys(errors).length > 0 ? : null}
@@ -148,6 +148,7 @@ function Step1Form(): JSX.Element { // console.log('onclick errors', errors); }} label="Submit" + aria-label="Submit User Profile" size="default"> Submit 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..61d106c31 100644 --- a/src/pages/ProfileForm/Step1FormHeader.tsx +++ b/src/pages/ProfileForm/Step1FormHeader.tsx @@ -6,10 +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], diff --git a/yarn.lock b/yarn.lock index 13694bef9..e6a177154 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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