Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix accessibility issue with lab result accordion headers #2422

Merged
merged 4 commits into from
Aug 23, 2024
Merged

Fix accessibility issue with lab result accordion headers #2422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7782021
update lab info from h5 to h2
austin-hall-skylight Aug 22, 2024
6d8eaef
Add parameter to change heading level, change lab info headings back …
austin-hall-skylight Aug 22, 2024
4cc632a
Update lab results to be ignored by sidenav
austin-hall-skylight Aug 23, 2024
5161c59
[pre-commit.ci] auto fixes from pre-commit hooks
pre-commit-ci[bot] Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions containers/ecr-viewer/seed-scripts/sql/data.sql
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions containers/ecr-viewer/src/app/services/ecrSummaryService.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@ export const evaluateEcrSummaryRelevantLabResults = (
fhirBundle,
relevantLabs,
fhirPathMappings,
"h4",
);

resultsArray = relevantLabElements.flatMap((element) =>
Expand Down
4 changes: 4 additions & 0 deletions containers/ecr-viewer/src/app/services/labsService.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down Expand Up @@ -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 = {};
Expand Down Expand Up @@ -522,6 +525,7 @@ export const evaluateLabInfoData = (
abnormalTag={checkAbnormalTag(labReportJson)}
content={content}
organizationId={organizationId}
headingLevel={accordionHeadingLevel}
/>
);
organizationElements = groupElementByOrgId(
Expand Down
12 changes: 6 additions & 6 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/LabInfo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
9 changes: 6 additions & 3 deletions containers/ecr-viewer/src/app/view-data/components/AccordionLabResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -7,6 +7,7 @@ interface AccordionLabResultsProps {
content: React.JSX.Element[];
organizationId: string;
collapsedByDefault?: boolean;
headingLevel?: HeadingLevel;
}

/**
Expand All @@ -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> = ({
Expand All @@ -25,6 +27,7 @@ export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({
content,
organizationId,
collapsedByDefault = false,
headingLevel = "h5",
}: AccordionLabResultsProps): React.JSX.Element => {
return (
<Accordion
Expand All @@ -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`}
Expand Down
Loading