From 6d870fddebf2b42ad342aefbd65f313f52c5a436 Mon Sep 17 00:00:00 2001
From: Aaron Ponce <aaron.ponce@va.gov>
Date: Mon, 13 May 2024 09:22:42 -0700
Subject: [PATCH] fix form nav button imports (#29700)

* fix form nav button imports

* fix explainer focus
---
 .../resolution/ResolutionExplainerWidget.jsx          | 11 +++++++----
 .../components/shared/ExplainerComponent.jsx          |  7 ++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/applications/financial-status-report/components/resolution/ResolutionExplainerWidget.jsx b/src/applications/financial-status-report/components/resolution/ResolutionExplainerWidget.jsx
index 9db91220124e..05dd481307cd 100644
--- a/src/applications/financial-status-report/components/resolution/ResolutionExplainerWidget.jsx
+++ b/src/applications/financial-status-report/components/resolution/ResolutionExplainerWidget.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormNavButtons from 'platform/forms-system/src/js/components/FormNavButtons';
+import FormNavButtons from '@department-of-veterans-affairs/platform-forms-system/FormNavButtons';
+import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
 import ReviewPageNavigationAlert from '../alerts/ReviewPageNavigationAlert';
 
 const ResolutionExplainerWidget = ({
@@ -28,7 +29,10 @@ const ResolutionExplainerWidget = ({
       goBack();
     }
   };
-
+  React.useEffect(() => {
+    // focus on the h3  when the page loads for screen readers
+    waitForRenderThenFocus('h3');
+  }, []);
   return (
     <form
       onSubmit={event => {
@@ -41,9 +45,8 @@ const ResolutionExplainerWidget = ({
           close-btn-aria-label="Close notification"
           disable-analytics="false"
           full-width="false"
-          show-icon
           status="info"
-          visible="true"
+          visible
         >
           <h3 slot="headline">
             Next, you’ll be asked to choose a relief option for each debt you
diff --git a/src/applications/financial-status-report/components/shared/ExplainerComponent.jsx b/src/applications/financial-status-report/components/shared/ExplainerComponent.jsx
index c1de16e79271..adb143845bbd 100644
--- a/src/applications/financial-status-report/components/shared/ExplainerComponent.jsx
+++ b/src/applications/financial-status-report/components/shared/ExplainerComponent.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormNavButtons from 'platform/forms-system/src/js/components/FormNavButtons';
+import FormNavButtons from '@department-of-veterans-affairs/platform-forms-system/FormNavButtons';
+import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
 
 const ExplainerComponent = ({
   headline,
@@ -11,6 +12,10 @@ const ExplainerComponent = ({
   goBack,
   goForward,
 }) => {
+  React.useEffect(() => {
+    // focus on the h3  when the page loads for screen readers
+    waitForRenderThenFocus('h3');
+  }, []);
   return (
     <form>
       <fieldset className="vads-u-margin-y--2">