Fix accessibility issue with lab result accordion headers (#2422)

* update lab info from h5 to h2 * Add parameter to change heading level, change lab info headings back to h5 and condition summary lab results to h4 * Update lab results to be ignored by sidenav * [pre-commit.ci] auto fixes from pre-commit hooks --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
CDCgov · Aug 23, 2024 · 4ec0761 · 4ec0761
1 parent a411f83
commit 4ec0761
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 34 deletions.
diff --git a/containers/ecr-viewer/seed-scripts/sql/data.sql b/containers/ecr-viewer/seed-scripts/sql/data.sql
diff --git a/containers/ecr-viewer/src/app/services/ecrSummaryService.tsx b/containers/ecr-viewer/src/app/services/ecrSummaryService.tsx
@@ -328,6 +328,7 @@ export const evaluateEcrSummaryRelevantLabResults = (
     fhirBundle,
     relevantLabs,
     fhirPathMappings,
+    "h4",
   );
 
   resultsArray = relevantLabElements.flatMap((element) =>

diff --git a/containers/ecr-viewer/src/app/services/labsService.tsx b/containers/ecr-viewer/src/app/services/labsService.tsx
@@ -20,6 +20,7 @@ import {
   DataDisplay,
   DisplayDataProps,
 } from "@/app/view-data/components/DataDisplay";
+import { HeadingLevel } from "@trussworks/react-uswds";
 
 export interface LabReport {
   result: Array<Reference>;
@@ -406,12 +407,14 @@ export const evaluateOrganismsReportData = (
  * @param fhirBundle - The FHIR bundle containing lab and RR data.
  * @param labReports - An array of DiagnosticReport objects
  * @param mappings - An object containing the FHIR path mappings.
+ * @param accordionHeadingLevel - Heading level for the title of AccordionLabResults.
  * @returns An array of the Diagnostic reports Elements and Organization Display Data
  */
 export const evaluateLabInfoData = (
   fhirBundle: Bundle,
   labReports: any[],
   mappings: PathMappings,
+  accordionHeadingLevel?: HeadingLevel,
 ): LabReportElementData[] => {
   // the keys are the organization id, the value is an array of jsx elements of diagnsotic reports
   let organizationElements: ResultObject = {};
@@ -522,6 +525,7 @@ export const evaluateLabInfoData = (
         abnormalTag={checkAbnormalTag(labReportJson)}
         content={content}
         organizationId={organizationId}
+        headingLevel={accordionHeadingLevel}
       />
     );
     organizationElements = groupElementByOrgId(

diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/LabInfo.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/LabInfo.test.tsx.snap
@@ -113,7 +113,7 @@ Burbank, CA
               data-testid="accordion"
             >
               <h5
-                class="usa-accordion__heading acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9"
+                class="usa-accordion__heading acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9 side-nav-ignore"
               >
                 <button
                   aria-controls="STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
@@ -133,7 +133,7 @@ Burbank, CA
                 </button>
               </h5>
               <div
-                class="usa-accordion__content usa-prose acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9"
+                class="usa-accordion__content usa-prose acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9 side-nav-ignore"
                 data-testid="accordionItem_STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
                 hidden=""
                 id="STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
@@ -450,7 +450,7 @@ Burbank, CA
               data-testid="accordion"
             >
               <h5
-                class="usa-accordion__heading acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9"
+                class="usa-accordion__heading acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9 side-nav-ignore"
               >
                 <button
                   aria-controls="STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
@@ -463,7 +463,7 @@ Burbank, CA
                 </button>
               </h5>
               <div
-                class="usa-accordion__content usa-prose acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9"
+                class="usa-accordion__content usa-prose acc_item_9e215f4e-aac1-10cb-e412-020cd13a6ad9 side-nav-ignore"
                 data-testid="accordionItem_STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
                 hidden=""
                 id="STOOL PATHOGENS, NAAT, 12 TO 25 TARGETS"
@@ -880,7 +880,7 @@ NASHVILLE, TN
               data-testid="accordion"
             >
               <h5
-                class="usa-accordion__heading acc_item_22c6cdd0-bde1-e220-9ba4-2c2802f795ad"
+                class="usa-accordion__heading acc_item_22c6cdd0-bde1-e220-9ba4-2c2802f795ad side-nav-ignore"
               >
                 <button
                   aria-controls="Cytogenomic SNP microarray"
@@ -893,7 +893,7 @@ NASHVILLE, TN
                 </button>
               </h5>
               <div
-                class="usa-accordion__content usa-prose acc_item_22c6cdd0-bde1-e220-9ba4-2c2802f795ad"
+                class="usa-accordion__content usa-prose acc_item_22c6cdd0-bde1-e220-9ba4-2c2802f795ad side-nav-ignore"
                 data-testid="accordionItem_Cytogenomic SNP microarray"
                 hidden=""
                 id="Cytogenomic SNP microarray"

diff --git a/containers/ecr-viewer/src/app/view-data/components/AccordionLabResults.tsx b/containers/ecr-viewer/src/app/view-data/components/AccordionLabResults.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Tag } from "@trussworks/react-uswds";
+import { Accordion, HeadingLevel, Tag } from "@trussworks/react-uswds";
 import React from "react";
 
 interface AccordionLabResultsProps {
@@ -7,6 +7,7 @@ interface AccordionLabResultsProps {
   content: React.JSX.Element[];
   organizationId: string;
   collapsedByDefault?: boolean;
+  headingLevel?: HeadingLevel;
 }
 
 /**
@@ -17,6 +18,7 @@ interface AccordionLabResultsProps {
  * @param props.content - The content within the accordian.
  * @param props.organizationId - The id of the organization you are getting lab results for.
  * @param props.collapsedByDefault - Whether or not to collapse by default for the accordion
+ * @param props.headingLevel - Heading level for the Accordion menu title.
  * @returns React element representing the AccordionLabResults component.
  */
 export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({
@@ -25,6 +27,7 @@ export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({
   content,
   organizationId,
   collapsedByDefault = false,
+  headingLevel = "h5",
 }: AccordionLabResultsProps): React.JSX.Element => {
   return (
     <Accordion
@@ -43,8 +46,8 @@ export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({
           content: content,
           expanded: collapsedByDefault,
           id: title,
-          headingLevel: "h5",
-          className: `acc_item_${organizationId}`,
+          headingLevel,
+          className: `acc_item_${organizationId} side-nav-ignore`,
         },
       ]}
       className={`accordion-rr accordion_${organizationId} margin-bottom-3`}