Fix v3-web-component va-segmented-progress-bar Safari focus bug

src/applications/appeals/shared/tests/utils/focus.unit.spec.js

@@ -2,7 +2,7 @@
 import { expect } from 'chai';
 import { render, waitFor } from '@testing-library/react';
 
 import { $ } from 'platform/forms-system/src/js/utilities/ui';
 
 import { focusIssue, focusRadioH3, focusAlertH3 } from '../../utils/focus';
 import { LAST_ISSUE } from '../../constants';
@@ -88,7 +88,7 @@
           </va-radio>
         ) : (
           <div className="nav-header">
-            <h2>test 2</h2>
+            <h2 id="nav-form-header">test 2</h2>
           </div>
         )}
       </div>,
@@ -109,7 +109,7 @@
 
     await focusRadioH3();
     await waitFor(() => {
-      const target = $('h2', container);
+      const target = $('#nav-form-header', container);
       expect(document.activeElement).to.eq(target);
     });
   });

src/applications/simple-forms/40-0247/config/form.js

@@ -1,6 +1,6 @@
 // we're not using JSON schema for this form.
 import environment from 'platform/utilities/environment';
 import footerContent from 'platform/forms/components/FormFooter';
 import getHelp from '../../shared/components/GetFormHelp';
 
 import manifest from '../manifest.json';
@@ -18,24 +18,22 @@
 import addlCertsYNPg from '../pages/additionalCertificatesYesNo';
 import addlCertsReqPg from '../pages/additionalCertificatesRequest';
 import transformForSubmit from './submit-transformer';
-import { getInitialData, pageFocusScroll } from '../helpers';
+import { getInitialData } from '../helpers';
 
 // mock-data import for local development
 import testData from '../tests/e2e/fixtures/data/test-data.json';
 
 const mockData = testData.data;
 
-// TODO: remove useCustomScrollAndFocus & scrollAndFocusTarget props once
-// FormNav's default focus issue's resolved
 /** @type {FormConfig} */
 const formConfig = {
   rootUrl: manifest.rootUrl,
   urlPrefix: '/',
   submitUrl: `${environment.API_URL}/simple_forms_api/v1/simple_forms`,
   trackingPrefix: '0247-pmc',
-  dev: {
-    showNavLinks: !window.Cypress,
-  },
+  // dev: {
+  //   showNavLinks: !window.Cypress,
+  // },
   introduction: IntroductionPage,
   confirmation: ConfirmationPage,
   preSubmitInfo: {
@@ -73,7 +71,6 @@
       enum: [true],
     },
   },
-  useCustomScrollAndFocus: true,
   chapters: {
     veteranPersonalInfoChapter: {
       title: 'Veteran’s or Reservist’s personal information',
@@ -87,7 +84,6 @@
           uiSchema: vetPersInfoPg.uiSchema,
           schema: vetPersInfoPg.schema,
           pageClass: 'veteran-personal-information',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -100,7 +96,6 @@
           uiSchema: vetIdInfoPg.uiSchema,
           schema: vetIdInfoPg.schema,
           pageClass: 'veteran-identification-information',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -113,7 +108,6 @@
           uiSchema: vetSupportDocsPg.uiSchema,
           schema: vetSupportDocsPg.schema,
           pageClass: 'veteran-supporting-documentation',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -126,7 +120,6 @@
           uiSchema: requestTypePg.uiSchema,
           schema: requestTypePg.schema,
           pageClass: 'request-type',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -139,7 +132,6 @@
           uiSchema: appPersInfoPg.uiSchema,
           schema: appPersInfoPg.schema,
           pageClass: 'applicant-personal-information',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -152,7 +144,6 @@
           uiSchema: appAddrPg.uiSchema,
           schema: appAddrPg.schema,
           pageClass: 'applicant-address',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -165,7 +156,6 @@
           uiSchema: appContactInfoPg.uiSchema,
           schema: appContactInfoPg.schema,
           pageClass: 'applicant-contact-information',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -178,7 +168,6 @@
           uiSchema: certsPg.uiSchema,
           schema: certsPg.schema,
           pageClass: 'certificates',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },
@@ -191,7 +180,6 @@
           uiSchema: addlCertsYNPg.uiSchema,
           schema: addlCertsYNPg.schema,
           pageClass: 'additional-certificates-yes-no',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
         additionalCertificatesRequestPage: {
           path: 'additional-certificates-request',
@@ -200,7 +188,6 @@
           uiSchema: addlCertsReqPg.uiSchema,
           schema: addlCertsReqPg.schema,
           pageClass: 'additional-certificates-request',
-          scrollAndFocusTarget: pageFocusScroll(),
         },
       },
     },

src/applications/simple-forms/40-0247/helpers.js

@@ -2,14 +2,9 @@
 
 import moment from 'moment';
 
 import recordEvent from 'platform/monitoring/record-event';
 import { $$ } from 'platform/forms-system/src/js/utilities/ui';
-import {
-  getScrollOptions,
-  focusElement,
-  waitForRenderThenFocus,
-} from 'platform/utilities/ui';
-import scrollTo from 'platform/utilities/ui/scrollTo';
+import { focusElement } from 'platform/utilities/ui';
 
 export function trackNoAuthStartLinkClick() {
   recordEvent({ event: 'no-login-start-form' });
@@ -21,18 +16,6 @@
     : undefined;
 }
 
-export const pageFocusScroll = () => {
-  const focusSelector =
-    'va-segmented-progress-bar[uswds][heading-text][header-level="2"]';
-  const scrollToName = 'v3SegmentedProgressBar';
-  return () => {
-    waitForRenderThenFocus(focusSelector);
-    setTimeout(() => {
-      scrollTo(scrollToName, getScrollOptions({ offset: 0 }));
-    }, 100);
-  };
-};
-
 export const supportingDocsDescription = (
   <div className="supp-docs-description">
     <p>We prefer that you upload the Veteran’s or Reservist’s DD214.</p>

src/platform/forms-system/src/js/components/FormNav.jsx

@@ -14,7 +14,9 @@
   focusByOrder,
   customScrollAndFocus,
   defaultFocusSelector,
+  waitForRenderThenFocus,
 } from '../../../../utilities/ui';
+import { querySelectorWithShadowRoot } from '../../../../utilities/ui/webComponents';
 
 import { REVIEW_APP_DEFAULT_MESSAGE } from '../constants';
 
@@ -98,6 +100,43 @@
     : `Step ${currentChapterDisplay} of ${chaptersLengthDisplay}: ${chapterName ||
         ''}`;
 
+  const handleFocus = async () => {
+    let root = document.querySelector('#react-root');
+    if (formConfig.v3SegmentedProgressBar) {
+      // Need to provide shadowRoot for focusing on shadow-DOM elements
+      const shadowHost = await querySelectorWithShadowRoot(
+        'va-segmented-progress-bar',
+      );
+      root = shadowHost.shadowRoot;
+    }
+
+    return () => {
+      // Check main toggle to enable custom focus; the unmounting of the page
+      // before the review & submit page may cause the customScrollAndFocus
+      // function to be called inadvertently
+      if (
+        !(
+          page.chapterKey === 'review' ||
+          window.location.pathname.endsWith('review-and-submit')
+        )
+      ) {
+        if (formConfig.useCustomScrollAndFocus) {
+          customScrollAndFocus(page.scrollAndFocusTarget, index);
+        } else {
+          waitForRenderThenFocus(defaultFocusSelector, root, 400);
+        }
+      } else {
+        // h2 fallback for review page
+        focusByOrder([defaultFocusSelector, 'h2'], root);
+      }
+    };
+  };
+
+  // Handle focus on mount
+  useEffect(() => {
+    handleFocus();
+  }, []);
+
   // The goal with this is to quickly "remove" the header from the DOM, and
   // immediately re-render the component with the header included.
   // `current` changes when the form chapter changes, and when this happens
@@ -111,35 +150,9 @@
       } else if (current === index) {
         setIndex(index - 1);
       }
-
-      return () => {
-        // Check main toggle to enable custom focus; the unmounting of the page
-        // before the review & submit page may cause the customScrollAndFocus
-        // function to be called inadvertently
-        if (
-          !(
-            page.chapterKey === 'review' ||
-            window.location.pathname.endsWith('review-and-submit')
-          )
-        ) {
-          if (formConfig.useCustomScrollAndFocus && page.scrollAndFocusTarget) {
-            customScrollAndFocus(page.scrollAndFocusTarget, index);
-          } else {
-            focusByOrder([defaultFocusSelector, 'h2']);
-          }
-        } else {
-          // h2 fallback for confirmation page
-          focusByOrder([defaultFocusSelector, 'h2']);
-        }
-      };
+      handleFocus();
     },
-    [
-      current,
-      formConfig.useCustomScrollAndFocus,
-      index,
-      page.chapterKey,
-      page.scrollAndFocusTarget,
-    ],
+    [current, index],
   );
 
   const v3SegmentedProgressBar = formConfig?.v3SegmentedProgressBar;

src/platform/forms-system/src/js/containers/FormPage.jsx

@@ -5,7 +5,7 @@
 import classNames from 'classnames';
 import environment from '@department-of-veterans-affairs/platform-utilities/environment';
 import { getDefaultFormState } from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';
 import {
   isReactComponent,
   focusElement,
   customScrollAndFocus,
@@ -17,20 +17,31 @@
 import FormNavButtons from '../components/FormNavButtons';
 import SchemaForm from '../components/SchemaForm';
 import { setData, uploadFile } from '../actions';
 import {
   getNextPagePath,
   getPreviousPagePath,
   checkValidPagePath,
 } from '../routing';
 import { DevModeNavLinks } from '../components/dev/DevModeNavLinks';
 import { stringifyUrlParams } from '../helpers';
+import { querySelectorWithShadowRoot } from '../../../../utilities/ui/webComponents';
 
-function focusForm(route, index) {
+async function focusForm(route, index) {
+  const { useCustomScrollAndFocus, v3SegmentedProgressBar } = route.formConfig;
+  const { scrollAndFocusTarget } = route.pageConfig;
   // Check main toggle to enable custom focus
-  if (route.formConfig?.useCustomScrollAndFocus) {
-    customScrollAndFocus(route.pageConfig?.scrollAndFocusTarget, index);
+  if (useCustomScrollAndFocus) {
+    customScrollAndFocus(scrollAndFocusTarget, index);
   } else {
-    focusElement(defaultFocusSelector);
+    let root = document.querySelector('#react-root');
+    if (v3SegmentedProgressBar) {
+      // Need to provide shadowRoot to focus on shadow-DOM elements
+      const shadowHost = await querySelectorWithShadowRoot(
+        'va-segmented-progress-bar',
+      );
+      root = shadowHost.shadowRoot;
+    }
+    focusElement(defaultFocusSelector, {}, root);
   }
 }
 

src/platform/forms-system/test/js/containers/FormPage.unit.spec.jsx

@@ -925,11 +925,11 @@ describe('Schemaform <FormPage>', () => {
       ).to.deep.equal({ arrayProp: [{}], someOtherProp: 'asdf' });
     });
 
-    it('should focus on ".nav-header > h2" when useCustomScrollAndFocus is not set in form config', async () => {
+    it('should focus on ".nav-header > h2" in pre-v3 forms when useCustomScrollAndFocus is not set in form config', async () => {
       const CustomPage = () => (
         <div id="main" className="nav-header">
           <div name="topScrollElement" />
-          <h2>H2</h2>
+          <h2 id="nav-form-header">H2</h2>
           <div name="topContentElement" />
           <h3>H3</h3>
         </div>
@@ -950,28 +950,71 @@ describe('Schemaform <FormPage>', () => {
       });
     });
 
-    it('should focus on "#main h3" when useCustomScrollAndFocus is set in form config', async () => {
-      const CustomPage = () => (
-        <div id="main">
+    it('should focus on ".usa-step-indicator__heading" in v3 forms when useCustomScrollAndFocus is not set in form config', async () => {
+      const CustomPageV3 = () => (
+        <div id="main" className="nav-header">
           <div name="topScrollElement" />
-          <h2>H2</h2>
-          <div name="topContentElement" />
+          <va-segmented-progress-bar
+            total="7"
+            current="1"
+            uswds="true"
+            heading-text="Your identity"
+            name="v3SegmentedProgressBar"
+            header-level="2"
+            className="hydrated"
+          >
+            <div className="usa-step-indicator__header">
+              <h2 className="usa-step-indicator__heading">
+                <span className="usa-step-indicator__heading-counter">
+                  <span className="usa-sr-only">Step</span>
+                  <span className="usa-step-indicator__current-step">1</span>
+                  <span className="usa-step-indicator__total-steps"> of 7</span>
+                </span>
+                <span className="usa-step-indicator__heading-text">H2</span>
+              </h2>
+            </div>
+          </va-segmented-progress-bar>
           <h3>H3</h3>
         </div>
       );
       render(
         <FormPage
-          form={makeBypassForm(CustomPage)()}
+          form={makeBypassForm(CustomPageV3)()}
           route={{
-            ...makeBypassRoute(CustomPage)(),
-            formConfig: { useCustomScrollAndFocus: true },
+            ...makeBypassRoute(CustomPageV3)(),
+            formConfig: { useCustomScrollAndFocus: false },
           }}
           location={location}
         />,
       );
 
+      it('should focus on "#main h3" when useCustomScrollAndFocus is set in form config', async () => {
+        const CustomPage = () => (
+          <div id="main">
+            <div name="topScrollElement" />
+            <h2>H2</h2>
+            <div name="topContentElement" />
+            <h3>H3</h3>
+          </div>
+        );
+        render(
+          <FormPage
+            form={makeBypassForm(CustomPage)()}
+            route={{
+              ...makeBypassRoute(CustomPage)(),
+              formConfig: { useCustomScrollAndFocus: true },
+            }}
+            location={location}
+          />,
+        );
+
+        await waitFor(() => {
+          expect(document.activeElement.tagName).to.eq('H3');
+        });
+      });
+
       await waitFor(() => {
-        expect(document.activeElement.tagName).to.eq('H3');
+        expect(document.activeElement.tagName).to.eq('H2');
       });
     });