[Mhv-65064] Resolve Download Accessibility Findings MR pt1. (#33706)

* [MHV-65064] Added new constants and form helper for accessibility focus * [MHV-65064] Update File Type error message * [MHV-65064] Removed PHI/PII from breadcrumb navigation * [MHV-65064] Updated accordion header size * [MHV-65064] Update file type error alert * [MHV-65064] update mr-breadcrumbs testId * [MHV-65064] Updated data-testids on mr-breadcrumb details nav * Update breadcrumbs auto-test * [MHV-65064] Update allergies back navigation * [MHV-65064] Refactored validity check for fileType radio button --------- Co-authored-by: Timothy Steele <107265904+timothy-steele-va@users.noreply.github.com>
department-of-veterans-affairs · Jan 3, 2025 · 535c95c · 535c95c
1 parent b137dd3
commit 535c95c
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 26 deletions.
diff --git a/src/applications/mhv-medical-records/components/DownloadRecords/DownloadFileType.jsx b/src/applications/mhv-medical-records/components/DownloadRecords/DownloadFileType.jsx
@@ -21,6 +21,7 @@ import {
   getNameDateAndTime,
   makePdf,
   generateTextFile,
+  focusOnErrorField,
   getLastUpdatedText,
   formatUserDob,
   sendDataDogAction,
@@ -41,6 +42,7 @@ const DownloadFileType = props => {
   const { runningUnitTest = false } = props;
   const history = useHistory();
   const [fileType, setFileType] = useState('');
+  const [fileTypeError, setFileTypeError] = useState('');
 
   const dispatch = useDispatch();
   const user = useSelector(state => state.user.profile);
@@ -363,6 +365,15 @@ const DownloadFileType = props => {
     [dispatch, isDataFetched, recordData, user],
   );
 
+  const checkFileTypeValidity = useCallback(
+    () => {
+      const isValid = !!fileType;
+      setFileTypeError(isValid ? '' : 'Please select a file type');
+      return isValid;
+    },
+    [fileType],
+  );
+
   const handleDdRum = useCallback(e => {
     const selectedNode = Array.from(e.target.childNodes).find(
       node => node.value === e.detail.value,
@@ -371,6 +382,11 @@ const DownloadFileType = props => {
     sendDataDogAction(`${selectedText} - File type`);
   }, []);
 
+  const selectFileTypeHandler = e => {
+    checkFileTypeValidity();
+    if (e?.detail?.value) setFileTypeError(null);
+  };
+
   return (
     <div>
       <h1>Select records and download report</h1>
@@ -418,10 +434,12 @@ const DownloadFileType = props => {
               onVaValueChange={e => {
                 setFileType(e.detail.value);
                 handleDdRum(e);
+                selectFileTypeHandler(e);
               }}
+              error={fileTypeError}
             >
-              <va-radio-option label="PDF" value="pdf" />
-              <va-radio-option label="Text file" value="txt" />
+              <va-radio-option label="PDF" value="pdf" name="file-type" />
+              <va-radio-option label="Text file" value="txt" name="file-type" />
             </VaRadio>
             {downloadStarted && <DownloadSuccessAlert />}
             <div className="vads-u-margin-top--1">
@@ -449,6 +467,8 @@ const DownloadFileType = props => {
               className="vads-u-margin-y--0p5"
               data-testid="download-report-button"
               onClick={() => {
+                selectFileTypeHandler();
+                focusOnErrorField();
                 if (fileType === 'pdf') {
                   generatePdf().then(() => history.push('/download'));
                 } else if (fileType === 'txt') {

diff --git a/src/applications/mhv-medical-records/components/MrBreadcrumbs.jsx b/src/applications/mhv-medical-records/components/MrBreadcrumbs.jsx
@@ -29,7 +29,7 @@ const MrBreadcrumbs = () => {
   const textContent = document.querySelector('h1')?.textContent;
   const searchIndex = new URLSearchParams(window.location.search);
   const page = searchIndex.get('page');
-  const { labId } = useParams();
+  const { labId, vaccineId, summaryId, allergyId, conditionId } = useParams();
 
   useEffect(
     () => {
@@ -82,6 +82,11 @@ const MrBreadcrumbs = () => {
     ? crumbsList[crumbsList.length - 1].href
     : `/${locationBasePath}`;
 
+  const backToAllergiesBreadcrumb = () =>
+    location.pathname.includes(`/allergies/${allergyId}`)
+      ? history.goBack()
+      : `/${locationBasePath}`;
+
   if (!phase0p5Flag) {
     // TODO: !crumbsList will always be truthy due to the useEffect above
     // This should logic should be looked at and refactored when we deprecate the feature toggle
@@ -111,21 +116,28 @@ const MrBreadcrumbs = () => {
 
   if (
     phase0p5Flag &&
-    location.pathname.includes(`/${locationBasePath}/${labId}`)
+    location.pathname.includes(
+      `/${locationBasePath}/${labId ||
+        vaccineId ||
+        summaryId ||
+        allergyId ||
+        conditionId}`,
+    )
   ) {
     return (
       <div
         className="vads-l-row vads-u-padding-y--3 breadcrumbs-container no-print"
         label="Breadcrumb"
-        data-testid="lab-id-breadcrumbs"
+        data-testid="mr-breadcrumbs"
       >
-        <span className="breadcrumb-angle vads-u-padding-right--0p5 vads-u-padding-top--0p5">
+        <span className="breadcrumb-angle vads-u-padding-right--0p5">
           <va-icon icon="arrow_back" size={1} style={{ color: '#808080' }} />
         </span>
         <Link
           to={backToImagesBreadcrumb}
           onClick={() => {
             handleDataDogAction({ locationBasePath, locationChildPath });
+            backToAllergiesBreadcrumb();
           }}
         >
           Back

diff --git a/src/applications/mhv-medical-records/containers/DownloadReportPage.jsx b/src/applications/mhv-medical-records/containers/DownloadReportPage.jsx
@@ -319,11 +319,10 @@ const DownloadReportPage = ({ runningUnitTest }) => {
       <h2>Other reports you can download</h2>
       {accessErrors()}
       <va-accordion bordered>
-        <va-accordion-item
-          bordered
-          header="Continuity of Care Document (VA Health Summary)"
-          data-testid="ccdAccordionItem"
-        >
+        <va-accordion-item bordered data-testid="ccdAccordionItem">
+          <h3 slot="headline">
+            Continuity of Care Document (VA Health Summary)
+          </h3>
           <p className="vads-u-margin--0">
             This Continuity of Care Document (CCD) is a summary of your VA
             medical records that you can share with non-VA providers in your
@@ -362,11 +361,8 @@ const DownloadReportPage = ({ runningUnitTest }) => {
             />
           )}
         </va-accordion-item>
-        <va-accordion-item
-          bordered
-          header="Self-entered health information"
-          data-testid="selfEnteredAccordionItem"
-        >
+        <va-accordion-item bordered data-testid="selfEnteredAccordionItem">
+          <h3 slot="headline">Self-entered health information</h3>
           <p className="vads-u-margin--0">
             This report includes all the health information you entered yourself
             in the previous version of My HealtheVet.

diff --git a/src/applications/mhv-medical-records/tests/components/MrBreadcrumbs.unit.spec.jsx b/src/applications/mhv-medical-records/tests/components/MrBreadcrumbs.unit.spec.jsx
@@ -207,6 +207,6 @@ describe('MrBreadcrumbs component', () => {
       },
     );
     const { getByTestId } = screen;
-    expect(getByTestId('lab-id-breadcrumbs')).to.exist;
+    expect(getByTestId('mr-breadcrumbs')).to.exist;
   });
 });
diff --git a/...ations/mhv-medical-records/tests/e2e/medical-records-validate-breadcrumbs.cypress.spec.js b/...ations/mhv-medical-records/tests/e2e/medical-records-validate-breadcrumbs.cypress.spec.js
@@ -18,7 +18,7 @@ describe('Medical Records validate breadcrumbs', () => {
       allergyDetail.id,
       allergyDetail,
     );
-    const breadcrumbsText = 'Allergies and reactions';
+    const breadcrumbsText = 'Back';
     AllergyDetailsPage.verifyBreadcrumbs(breadcrumbsText);
     AllergyDetailsPage.clickBreadcrumbs(breadcrumbsText);
 

diff --git a/src/applications/mhv-medical-records/tests/e2e/pages/AllergyDetailsPage.js b/src/applications/mhv-medical-records/tests/e2e/pages/AllergyDetailsPage.js
@@ -48,16 +48,15 @@ class AllergyDetailsPage extends BaseDetailsPage {
   };
 
   verifyBreadcrumbs = breadcrumbsText => {
-    cy.get('[data-testid="breadcrumbs"]').contains(`${breadcrumbsText}`, {
+    cy.get('[data-testid="mr-breadcrumbs"]').contains(`${breadcrumbsText}`, {
       matchCase: false,
     });
   };
 
   clickBreadcrumbs = breadcrumb => {
-    cy.get('[data-testid="breadcrumbs"]')
-      .find('span')
+    cy.get('[data-testid="mr-breadcrumbs"]')
+      .find('a')
       .contains(breadcrumb)
-      .parent()
       .click({ waitForAnimations: true });
   };
 

diff --git a/src/applications/mhv-medical-records/tests/e2e/pages/DownloadAllPage.js b/src/applications/mhv-medical-records/tests/e2e/pages/DownloadAllPage.js
@@ -4,13 +4,13 @@ import DownloadAllPatient from '../fixtures/labs-and-tests/downloadAllPatient.js
 
 class DownloadAllPage {
   verifyBreadcrumbs = breadcrumbs => {
-    cy.get('[data-testid="breadcrumbs"]').contains(breadcrumbs, {
+    cy.get('[data-testid="mr-breadcrumbs"]').contains(breadcrumbs, {
       matchCase: false,
     });
   };
 
   clickBreadcrumbs = breadcrumb => {
-    cy.get('[data-testid="breadcrumbs"]')
+    cy.get('[data-testid="mr-breadcrumbs"]')
       .find('span')
       .contains(breadcrumb)
       .parent()

diff --git a/src/applications/mhv-medical-records/tests/e2e/pages/NotesDetailsPage.js b/src/applications/mhv-medical-records/tests/e2e/pages/NotesDetailsPage.js
@@ -50,7 +50,7 @@ class NotesDetailsPage extends BaseDetailsPage {
 
   clickBreadCrumbsLink = breadcrumb => {
     // Click Back to Care summaries and notes
-    cy.get('[data-testid="breadcrumbs"]')
+    cy.get('[data-testid="mr-breadcrumbs"]')
       .find('a')
       .eq(breadcrumb)
       .click();

diff --git a/src/applications/mhv-medical-records/tests/e2e/pages/VitalsDetailsPage.js b/src/applications/mhv-medical-records/tests/e2e/pages/VitalsDetailsPage.js
@@ -47,7 +47,7 @@ class VitalsDetailsPage extends BaseDetailsPage {
 
   clickBreadCrumbsLink = (breadcrumb = 0) => {
     // Click Back to "Vitals" Page
-    cy.get('[data-testid="breadcrumbs"]')
+    cy.get('[data-testid="mr-breadcrumbs"]')
       .find('a')
       .eq(breadcrumb)
       .click();

diff --git a/src/applications/mhv-medical-records/util/constants.js b/src/applications/mhv-medical-records/util/constants.js
@@ -468,6 +468,22 @@ export const Breadcrumbs = {
   WEIGHT: { href: Paths.WEIGHT, label: 'Weight', isRouterLink: true },
 };
 
+export const DateRangeValues = {
+  ANY: 'any',
+  LAST3: 3,
+  LAST6: 6,
+  LAST12: 12,
+  CUSTOM: 'custom',
+};
+
+export const DateRangeOptions = [
+  { value: DateRangeValues.ANY, label: 'Any' },
+  { value: DateRangeValues.LAST3, label: 'Last 3 months' },
+  { value: DateRangeValues.LAST6, label: 'Last 6 months' },
+  { value: DateRangeValues.LAST12, label: 'Last 12 months' },
+  { value: DateRangeValues.CUSTOM, label: 'Custom' },
+];
+
 export const CernerAlertContent = {
   MR_LANDING_PAGE: {
     linkPath: '/pages/health_record/comprehensive_record/health_summaries',

diff --git a/src/applications/mhv-medical-records/util/helpers.js b/src/applications/mhv-medical-records/util/helpers.js
@@ -4,6 +4,7 @@ import { datadogRum } from '@datadog/browser-rum';
 import { snakeCase } from 'lodash';
 import { generatePdf } from '@department-of-veterans-affairs/platform-pdf/exports';
 import { formatDateLong } from '@department-of-veterans-affairs/platform-utilities/exports';
+import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
 import { format as dateFnsFormat, parseISO, isValid } from 'date-fns';
 import {
   EMPTY_FIELD,
@@ -678,6 +679,26 @@ export const formatDateInLocalTimezone = date => {
   return `${formattedDate} ${localTimeZoneName}`;
 };
 
+/**
+ * Form Helper to focus on error field
+ */
+export const focusOnErrorField = () => {
+  setTimeout(() => {
+    const errors = document.querySelectorAll('[error]:not([error=""])');
+    const firstError =
+      errors.length > 0 &&
+      (errors[0]?.shadowRoot?.querySelector('select, input, textarea') ||
+        errors[0]
+          ?.querySelector('va-checkbox')
+          ?.shadowRoot?.querySelector('input') ||
+        errors[0].querySelector('input'));
+
+    if (firstError) {
+      focusElement(firstError);
+    }
+  }, 300);
+};
+
 export const formatUserDob = userProfile => {
   return userProfile?.dob ? formatDateLong(userProfile.dob) : 'Not found';
 };