From 15a98dcd38b728daf0c563a5ce0c2e2ad0d39cca Mon Sep 17 00:00:00 2001 From: JackRyan1989 Date: Fri, 3 Feb 2023 15:54:38 -0500 Subject: [PATCH 1/3] changelog: User-facing improvements, In-person proofing, Addressing VPAT concerns around skip to main content link. --- .../components/document-capture.tsx | 3 ++- .../context/hijack-skip-nav.tsx | 22 +++++++++++++++++++ .../document-capture/context/index.ts | 1 + 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 app/javascript/packages/document-capture/context/hijack-skip-nav.tsx diff --git a/app/javascript/packages/document-capture/components/document-capture.tsx b/app/javascript/packages/document-capture/components/document-capture.tsx index 26b2287b441..5651795fe02 100644 --- a/app/javascript/packages/document-capture/components/document-capture.tsx +++ b/app/javascript/packages/document-capture/components/document-capture.tsx @@ -21,7 +21,7 @@ import { BackgroundEncryptedUploadError } from '../higher-order/with-background- import SuspenseErrorBoundary from './suspense-error-boundary'; import SubmissionInterstitial from './submission-interstitial'; import withProps from '../higher-order/with-props'; -import { InPersonContext } from '../context'; +import { hijackSkipNav, InPersonContext } from '../context'; /** * Returns a new object with specified keys removed. @@ -62,6 +62,7 @@ function DocumentCapture({ isAsyncForm = false, onStepChange = () => {} }: Docum const { inPersonURL, arcgisSearchEnabled } = useContext(InPersonContext); useDidUpdateEffect(onStepChange, [stepName]); useEffect(() => { + hijackSkipNav(); if (stepName) { trackVisitEvent(stepName); } diff --git a/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx b/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx new file mode 100644 index 00000000000..2ce4242f714 --- /dev/null +++ b/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx @@ -0,0 +1,22 @@ +/** + * On pages that use the # value for navigation, we need to intercept + * and alter the functionality of the 'Skip to main content' link. + * This function prevents the link from appending the hash to the url, + * and instead it focuses on the main-content section of the page. + * When the React FSM navigation is changed so that we no longer use the # value, + * we should remove this code. + * @param - null + * + * @return - null + */ + +export default function hijackSkipNav(): void { + const skipNavLink = document.querySelector('.usa-skipnav'); + const mainContent = document.querySelector('#main-content'); + + skipNavLink?.addEventListener('click', (e) => { + e.preventDefault(); + mainContent?.focus(); + mainContent?.scrollIntoView(); + }); +} diff --git a/app/javascript/packages/document-capture/context/index.ts b/app/javascript/packages/document-capture/context/index.ts index 128326c3ff3..13172eea518 100644 --- a/app/javascript/packages/document-capture/context/index.ts +++ b/app/javascript/packages/document-capture/context/index.ts @@ -16,3 +16,4 @@ export { } from './failed-capture-attempts'; export type { DeviceContextValue } from './device'; export { default as InPersonContext } from './in-person'; +export { default as hijackSkipNav } from './hijack-skip-nav'; From 7b88bc30269b24def8690562e4c0331a53a0eed1 Mon Sep 17 00:00:00 2001 From: JackRyan1989 Date: Mon, 6 Feb 2023 13:14:14 -0500 Subject: [PATCH 2/3] Removing doc-auth specific instead making global. --- .../components/document-capture.tsx | 3 +-- .../context/hijack-skip-nav.tsx | 22 ------------------- .../document-capture/context/index.ts | 1 - app/javascript/packs/application.ts | 6 +++++ 4 files changed, 7 insertions(+), 25 deletions(-) delete mode 100644 app/javascript/packages/document-capture/context/hijack-skip-nav.tsx diff --git a/app/javascript/packages/document-capture/components/document-capture.tsx b/app/javascript/packages/document-capture/components/document-capture.tsx index 5651795fe02..26b2287b441 100644 --- a/app/javascript/packages/document-capture/components/document-capture.tsx +++ b/app/javascript/packages/document-capture/components/document-capture.tsx @@ -21,7 +21,7 @@ import { BackgroundEncryptedUploadError } from '../higher-order/with-background- import SuspenseErrorBoundary from './suspense-error-boundary'; import SubmissionInterstitial from './submission-interstitial'; import withProps from '../higher-order/with-props'; -import { hijackSkipNav, InPersonContext } from '../context'; +import { InPersonContext } from '../context'; /** * Returns a new object with specified keys removed. @@ -62,7 +62,6 @@ function DocumentCapture({ isAsyncForm = false, onStepChange = () => {} }: Docum const { inPersonURL, arcgisSearchEnabled } = useContext(InPersonContext); useDidUpdateEffect(onStepChange, [stepName]); useEffect(() => { - hijackSkipNav(); if (stepName) { trackVisitEvent(stepName); } diff --git a/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx b/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx deleted file mode 100644 index 2ce4242f714..00000000000 --- a/app/javascript/packages/document-capture/context/hijack-skip-nav.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * On pages that use the # value for navigation, we need to intercept - * and alter the functionality of the 'Skip to main content' link. - * This function prevents the link from appending the hash to the url, - * and instead it focuses on the main-content section of the page. - * When the React FSM navigation is changed so that we no longer use the # value, - * we should remove this code. - * @param - null - * - * @return - null - */ - -export default function hijackSkipNav(): void { - const skipNavLink = document.querySelector('.usa-skipnav'); - const mainContent = document.querySelector('#main-content'); - - skipNavLink?.addEventListener('click', (e) => { - e.preventDefault(); - mainContent?.focus(); - mainContent?.scrollIntoView(); - }); -} diff --git a/app/javascript/packages/document-capture/context/index.ts b/app/javascript/packages/document-capture/context/index.ts index 13172eea518..128326c3ff3 100644 --- a/app/javascript/packages/document-capture/context/index.ts +++ b/app/javascript/packages/document-capture/context/index.ts @@ -16,4 +16,3 @@ export { } from './failed-capture-attempts'; export type { DeviceContextValue } from './device'; export { default as InPersonContext } from './in-person'; -export { default as hijackSkipNav } from './hijack-skip-nav'; diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index 5ec39aefa75..3b1ced95751 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -2,3 +2,9 @@ import { accordion, banner, skipnav } from 'identity-style-guide'; const components = [accordion, banner, skipnav]; components.forEach((component) => component.on()); +const mainContent = document.getElementById('main-content'); +document.querySelector('.usa-skipnav')?.addEventListener('click', (event) => { + event.preventDefault(); + mainContent?.focus(); + mainContent?.scrollIntoView(); +}); From 483649e996715dca5090bf231fed27eb71d1fb9c Mon Sep 17 00:00:00 2001 From: JackRyan1989 Date: Tue, 7 Feb 2023 13:05:12 -0500 Subject: [PATCH 3/3] Remove unneccessary focus() --- app/javascript/packs/application.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index 3b1ced95751..227b3ade7f2 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -5,6 +5,5 @@ components.forEach((component) => component.on()); const mainContent = document.getElementById('main-content'); document.querySelector('.usa-skipnav')?.addEventListener('click', (event) => { event.preventDefault(); - mainContent?.focus(); mainContent?.scrollIntoView(); });