MHV-61850: Focus & Offline handling

src/applications/mhv-medications/components/PrescriptionDetails/NonVaPrescription.jsx

@@ -16,7 +16,7 @@ const NonVaPrescription = prescription => {
           <h3 className="vads-u-font-size--base vads-u-font-family--sans">
             Status
           </h3>
-          <div data-testid="rx-status">{validateField(status)}</div>
+          <p data-testid="rx-status">{validateField(status)}</p>
           <div className="no-print">
             <va-additional-info
               trigger="What does this status mean?"

src/applications/mhv-medications/components/shared/PrintDownload.jsx

@@ -9,7 +9,8 @@
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [printIndex, setPrintIndex] = useState(0);
-  const menu = useRef(null);
+  const containerEl = useRef(null);
+  const toggleButton = useRef(null);
   let toggleMenuButtonClasses =
     'toggle-menu-button vads-u-justify-content--space-between';
   let menuOptionsClasses = 'menu-options';
@@ -20,8 +21,14 @@
   }
 
   const handleDownload = async format => {
+    setMenuOpen(!menuOpen);
+    toggleButton.current.focus();
+    if (!navigator.onLine) {
+      setIsError(true);
+      return;
+    }
+
     try {
-      setMenuOpen(!menuOpen);
       setIsError(false);
       if (format === DOWNLOAD_FORMAT.TXT && onText) {
         onText();
@@ -43,7 +50,11 @@
   };
 
   const closeMenu = e => {
-    if (menu.current && menuOpen && !menu.current.contains(e.target)) {
+    if (
+      containerEl.current &&
+      menuOpen &&
+      !containerEl.current.contains(e.target)
+    ) {
       setMenuOpen(false);
     }
   };
@@ -77,23 +88,27 @@
       {isLoading && (
         <va-loading-indicator
           message="Loading..."
-          setFocus
           data-testid="print-download-loading-indicator"
         />
       )}
-      {isSuccess && (
-        <div
-          className="vads-u-margin-bottom--3"
-          data-testid="download-success-banner"
-        >
-          <va-alert role="alert" status="success" background-only uswds>
-            <h2 slot="headline">Download started</h2>
-            <p className="vads-u-margin--0">
-              Check your device’s downloads location for your file.
-            </p>
-          </va-alert>
-        </div>
-      )}
+      {isSuccess &&
+        !isError && (
+          <div
+            className="vads-u-margin-bottom--3"
+            data-testid="download-success-banner"
+          >
+            <va-alert role="alert" status="success" background-only uswds>
+              <h2 slot="headline">Download started</h2>
+              <p className="vads-u-margin--0">
+                Check your device’s downloads location for your file.
+              </p>
+            </va-alert>
+          </div>
+        )}
+      {/* hack to generate va-alert and va-telephone web components in case there is no network at the time of download */}
+      <va-alert visible="false" uswds>
+        <va-telephone />
+      </va-alert>
       {isError && (
         <div className="vads-u-margin-bottom--3">
           <va-alert role="alert" status="error" uswds>
@@ -119,10 +134,10 @@
         className="print-download vads-u-margin-y--2 no-print"
         role="none"
         onKeyDown={handleUserKeyPress}
-        ref={menu}
+        ref={containerEl}
         onFocus={handleFocus}
       >
         <button
           data-dd-action-name={`${
             dataDogActionNames.shared.PRINT_OR_DOWNLOAD_BUTTON
           }${list ? pageType.LIST : pageType.DETAILS}`}
@@ -131,6 +146,7 @@
           onClick={() => setMenuOpen(!menuOpen)}
           data-testid="print-records-button"
           aria-expanded={menuOpen}
+          ref={toggleButton}
         >
           <span>Print or download</span>
           <va-icon
@@ -141,7 +157,7 @@
         </button>
         <ul className={menuOptionsClasses} data-testid="print-download-list">
           <li>
             <button
               data-dd-action-name={`${dataDogActionNames.shared.PRINT_THIS}${
                 list ? 'Page Of The List' : 'Page'
               } Option - ${list ? pageType.LIST : pageType.DETAILS}`}
@@ -156,7 +172,7 @@
           </li>
           {list && (
             <li>
               <button
                 data-dd-action-name={
                   dataDogActionNames.medicationsListPage
                     .PRINT_ALL_MEDICATIONS_OPTION
@@ -172,7 +188,7 @@
             </li>
           )}
           <li>
             <button
               data-dd-action-name={`${
                 dataDogActionNames.shared.DOWNLOAD_A_PDF_OF_THIS
               }${list ? 'List' : 'Page'} Option - ${
@@ -188,7 +204,7 @@
             </button>
           </li>
           <li>
             <button
               type="button"
               data-dd-action-name={`${
                 dataDogActionNames.shared.DOWNLOAD_A_TEXT_FILE_OF_THIS
@@ -216,6 +232,6 @@
   list: PropTypes.any,
   onDownload: PropTypes.any,
   onPrint: PropTypes.func,
   onText: PropTypes.func,
   isLoading: PropTypes.bool,
 };

src/applications/mhv-medications/containers/Prescriptions.jsx

@@ -152,7 +152,7 @@
         focusElement(document.querySelector('h1'));
       }
     }
   }, []);
 
   useEffect(
     () => {
@@ -426,7 +426,7 @@
         updateLoadingStatus(false, '');
       }
     },
     [
       allergies,
       allergiesError,
       prescriptionsFullList,
@@ -620,7 +620,6 @@
                     )}
                     {showFilterContent && (
                       <>
-                        <BeforeYouDownloadDropdown page={pageType.LIST} />
                         <PrintDownload
                           onDownload={handleFullListDownload}
                           isSuccess={
@@ -634,6 +633,7 @@
                           }
                           list
                         />
+                        <BeforeYouDownloadDropdown page={pageType.LIST} />
                       </>
                     )}
                   </div>

src/applications/mhv-medications/tests/components/shared/PrintDownload.unit.spec.jsx

@@ -95,6 +95,9 @@ describe('Medicaitons Print/Download button component', () => {
   });
 
   it('should start downloading PDF on PDF button click', () => {
+    global.navigator = {
+      onLine: true,
+    };
     const screen = setup(handleFullListDownload, false, true);
     const downloadButton = screen.getByText('Download a PDF of this list');
     fireEvent.click(downloadButton);
@@ -104,6 +107,9 @@ describe('Medicaitons Print/Download button component', () => {
   });
 
   it('should start downloading TXT on TXT button click', () => {
+    global.navigator = {
+      onLine: true,
+    };
     const screen = setup(handleFullListDownload, false, true);
     const downloadButton = screen.getByText(
       'Download a text file (.txt) of this list',
@@ -122,6 +128,9 @@ describe('Medicaitons Print/Download button component', () => {
   });
 
   it('should start txt download using custom fn on txt button click', () => {
+    global.navigator = {
+      onLine: true,
+    };
     const screen = setup(
       undefined,
       false,

src/applications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js

@@ -1,4 +1,4 @@
 import moment from 'moment-timezone';
 import MedicationsSite from './med_site/MedicationsSite';
 import MedicationsDetailsPage from './pages/MedicationsDetailsPage';
 import MedicationsListPage from './pages/MedicationsListPage';
@@ -21,9 +21,10 @@
     detailsPage.clickDownloadMedicationDetailsAsPdfOnDetailsPage();
     detailsPage.verifyLoadingSpinnerForDownloadOnDetailsPage();
     listPage.verifyDownloadCompleteSuccessMessageBanner();
+    detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage();
     site.verifyDownloadedPdfFile(
       'VA-medications-list-Safari-Mhvtp',
       moment(),
       '',
     );
     cy.injectAxe();

src/applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js

@@ -18,6 +18,7 @@ describe('Medications Download PDF on List Page', () => {
     listPage.clickDownloadListAsPDFButtonOnListPage();
     listPage.verifyLoadingSpinnerForDownloadOnListPage();
     listPage.verifyDownloadCompleteSuccessMessageBanner();
+    listPage.verifyFocusOnPrintDownloadDropDownButton();
     site.verifyDownloadedPdfFile(
       'VA-medications-list-Safari-Mhvtp',
       moment(),

src/applications/mhv-medications/tests/e2e/medications-download-txt-details-page.cypress.spec.js

@@ -18,6 +18,7 @@ describe('Medications Details Page Download', () => {
     detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage();
     detailsPage.clickDownloadMedicationsDetailsAsTxtOnDetailsPage();
     listPage.verifyDownloadCompleteSuccessMessageBanner();
+    detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage();
     listPage.verifyDownloadTextFileHeadless('Safari', 'Mhvtp', 'Mhvtp, Safari');
     cy.injectAxe();
     cy.axeCheck('main');

src/applications/mhv-medications/tests/e2e/medications-download-txt-list-page.cypress.spec.js

@@ -17,6 +17,7 @@ describe('Medications Download Txt on List Page', () => {
     listPage.clickDownloadListAsTxtButtonOnListPage();
     listPage.verifyLoadingSpinnerForDownloadOnListPage();
     listPage.verifyDownloadCompleteSuccessMessageBanner();
+    listPage.verifyFocusOnPrintDownloadDropDownButton();
     listPage.verifyDownloadTextFileHeadless('Safari', 'Mhvtp', 'Mhvtp, Safari');
   });
 });