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

src/applications/simple-forms/21-0966/config/form.js

@@ -1,13 +1,13 @@
 import footerContent from 'platform/forms/components/FormFooter';
 import environment from '@department-of-veterans-affairs/platform-utilities/environment';
 import { apiRequest } from 'platform/utilities/api';
 import manifest from '../manifest.json';
 
 import ITFStatusLoadingIndicatorPage from '../components/ITFStatusLoadingIndicatorPage';
 
 import transformForSubmit from '../../shared/config/submit-transformer';
 import IntroductionPage from '../containers/IntroductionPage';
 import ConfirmationPage from '../containers/ConfirmationPage';
 import getHelp from '../../shared/components/GetFormHelp';
 import preparerIdentification from '../pages/preparerIdentification';
 import veteranBenefitSelection from '../pages/veteranBenefitSelection';
@@ -18,7 +18,7 @@
 import survivingDependentIdentificationInformation from '../pages/survivingDependentIdentificationInformation';
 import survivingDependentMailingAddress from '../pages/survivingDependentMailingAddress';
 import survivingDependentPhoneAndEmailAddress from '../pages/survivingDependentPhoneAndEmailAddress';
 import {
   preparerIsVeteran,
   preparerIsSurvivingDependent,
   preparerIsThirdPartyToTheVeteran,
@@ -71,9 +71,9 @@
     },
   },
   formId: '21-0966',
-  dev: {
-    showNavLinks: true,
-  },
+  // dev: {
+  //   showNavLinks: true,
+  // },
   saveInProgress: {
     // messages: {
     //   inProgress: 'Your benefits claims application (21-0966) is in progress.',

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';
@@ -33,9 +33,9 @@
   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: {

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

@@ -14,6 +14,7 @@
   focusByOrder,
   customScrollAndFocus,
   defaultFocusSelector,
+  waitForRenderThenFocus,
 } from '../../../../utilities/ui';
 
 import { REVIEW_APP_DEFAULT_MESSAGE } from '../constants';
@@ -106,6 +107,11 @@
   // https://github.com/department-of-veterans-affairs/va.gov-team/issues/12323
   useEffect(
     () => {
+      // Need to provide shadowRoot for focusing on elements inside shadow-DOM
+      const root = formConfig.v3SegmentedProgressBar
+        ? document.querySelector('va-segmented-progress-bar').shadowRoot
+        : document.querySelector('#react-root');
+
       if (current > index + 1) {
         setIndex(index + 1);
       } else if (current === index) {
@@ -125,21 +131,15 @@
           if (formConfig.useCustomScrollAndFocus && page.scrollAndFocusTarget) {
             customScrollAndFocus(page.scrollAndFocusTarget, index);
           } else {
-            focusByOrder([defaultFocusSelector, 'h2']);
+            waitForRenderThenFocus(defaultFocusSelector, root, 400);
           }
         } else {
-          // h2 fallback for confirmation page
-          focusByOrder([defaultFocusSelector, 'h2']);
+          // h2 fallback for review page
+          focusByOrder([defaultFocusSelector, 'h2'], root);
         }
       };
     },
-    [
-      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,7 +17,7 @@
 import FormNavButtons from '../components/FormNavButtons';
 import SchemaForm from '../components/SchemaForm';
 import { setData, uploadFile } from '../actions';
 import {
   getNextPagePath,
   getPreviousPagePath,
   checkValidPagePath,
@@ -26,11 +26,17 @@
 import { stringifyUrlParams } from '../helpers';
 
 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 && scrollAndFocusTarget) {
+    customScrollAndFocus(scrollAndFocusTarget, index);
   } else {
-    focusElement(defaultFocusSelector);
+    // Need to provide shadowRoot to focus on elements inside shadow-DOM
+    const root = v3SegmentedProgressBar
+      ? document.querySelector('va-segmented-progress-bar').shadowRoot
+      : document.querySelector('#react-root');
+    focusElement(defaultFocusSelector, {}, root);
   }
 }
 

src/platform/utilities/ui/focus.js

@@ -1,9 +1,20 @@
 /* eslint-disable no-console */
-import { isWebComponent, querySelectorWithShadowRoot } from './webComponents';
+import {
+  isInShadowDOM,
+  isWebComponent,
+  querySelectorWithShadowRoot,
+} from './webComponents';
 
-// .nav-header > h2 contains "Step {index} of {total}: {page title}"
+/** defaultFocusSelector
+ * Selector string for both pre-v3 and v3 va-segmented-progress-bar's H2
+ * Both H2s include "Step {index} of {total}: {page title}"
+ * NOTE: For v3 bar, pass its shadowRoot as root param to the focus methods.  [See FormNav.jsx.]
+ */
 export const defaultFocusSelector =
-  '.nav-header > h2, va-segmented-progress-bar[uswds][heading-text][header-level="2"]';
+  // #nav-form-header is pre-v3-bar's H2
+  // .usa-step-indicator__heading is v3-bar's H2
+  // TODO: Remove pre-v3 selector, after DST defaults all components to v3 [~2024-02-17].
+  '#nav-form-header, .usa-step-indicator__heading';
 
 /**
  * Focus on element
@@ -14,7 +25,7 @@ export const defaultFocusSelector =
  * @param {Element} root - root element for querySelector; would allow focusing
  *  on elements inside of shadow dom
  */
-export function focusElement(selectorOrElement, options, root) {
+export async function focusElement(selectorOrElement, options, root) {
   function applyFocus(el) {
     if (el) {
       // Use getAttribute to grab the "tabindex" attribute (returns string), not
@@ -39,13 +50,20 @@ export function focusElement(selectorOrElement, options, root) {
       }
 
       el.focus(options);
+      if (isInShadowDOM(el)) {
+        // Safari doesn't dispatch focus events on shadow-DOM elements,
+        // so we manually dispath it to ensure screen readers are aware.
+        el.dispatchEvent(new FocusEvent('focus'));
+      }
     }
   }
 
   if (isWebComponent(root) || isWebComponent(selectorOrElement, root)) {
-    querySelectorWithShadowRoot(selectorOrElement, root).then(
-      elWithShadowRoot => applyFocus(elWithShadowRoot), // async code
+    const elWithShadowRoot = await querySelectorWithShadowRoot(
+      selectorOrElement,
+      root,
     );
+    applyFocus(elWithShadowRoot); // synchronous code
   } else {
     const el =
       typeof selectorOrElement === 'string'

src/platform/utilities/ui/webComponents.js

@@ -37,6 +37,14 @@ export function isWebComponentReady(el, root) {
   return !!(element?.shadowRoot && element?.classList.contains('hydrated'));
 }
 
+/**
+ * Checks if an element is inside shadow-DOM
+ * @param {HTMLElement} el
+ */
+export function isInShadowDOM(el) {
+  return el.getRootNode() instanceof ShadowRoot;
+}
+
 /**
  * Web components initially render as 0 width / 0 height with no
  * shadow dom content, so this waits until it contains a shadowRoot