cleanup frontend console errors (#2665)

* fix markup errors

* componentize modal

* try to fix modal issue

* upgrade truss

* add keys

* lint

* install peer dependency?

* downgrade uswds

* jk

* make patient results row clickable (#2664)

make entire row clickable

* fix export issues with package bumps

* removed extra prop

containers/tefca-viewer/e2e/query_workflow.spec.ts

@@ -115,7 +115,7 @@ test.describe("querying with the TryTEFCA viewer", () => {
  await expect(
  page.getByText("No records were found for your search"),
  ).toBeVisible();
- await page.getByRole("link", { name: RETURN_TO_STEP_ONE_LABEL }).click();
+ await page.getByText(RETURN_TO_STEP_ONE_LABEL).click();
  await expect(
  page.getByRole("heading", { name: "Search for a Patient", exact: true }),
  ).toBeVisible();

containers/tefca-viewer/next.config.js

@@ -4,14 +4,7 @@ const path = require("path");
 const nextConfig = {
  sassOptions: {
  includePaths: [
- path.join(
- __dirname,
- "../..",
- "node_modules",
- "@uswds",
- "uswds",
- "packages",
- ),
+ path.join(__dirname, "./", "node_modules", "@uswds", "uswds", "packages"),
  ],
  },
  transpilePackages: ["yaml"],

containers/tefca-viewer/package.json

@@ -21,9 +21,9 @@
  },
  "dependencies": {
  "@aws-sdk/client-s3": "^3.515.0",
- "@trussworks/react-uswds": "^6.1.0",
+ "@trussworks/react-uswds": "^9.1.0",
  "@types/sinonjs__fake-timers": "^8.1.1",
- "@uswds/uswds": "3.7.0",
+ "@uswds/uswds": "^3.8.2",
  "axios": "^1.6.0",
  "classnames": "^2.5.1",
  "date-fns": "^3.4.0",
@@ -54,7 +54,7 @@
  "@types/node": "^20",
  "@types/node-fetch": "^2.6.11",
  "@types/pg": "^8.11.8",
- "@types/react": "^18.3.3",
+ "@types/react": "^18.3.11",
  "@types/react-dom": "^18.3.0",
  "@types/uuid": "^9.0.8",
  "@typescript-eslint/eslint-plugin": "^6.17.0",
@@ -67,6 +67,7 @@
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-jsdoc": "^48.2.3",
  "eslint-plugin-unused-imports": "^3.1.0",
+ "focus-trap-react": "^10.3.0",
  "jest": "^29.7.0",
  "jest-axe": "^8.0.0",
  "jest-environment-jsdom": "^29.7.0",

containers/tefca-viewer/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import "../styles/styles.scss";
-import Header from "./header";
+import Header from "./query/components/header/header";
 import Footer from "./footer";
 import { DataProvider } from "./utils";
 

containers/tefca-viewer/src/app/page.tsx

@@ -39,6 +39,7 @@ export default function LandingPage() {
  src="/tefca-viewer/tefca-graphic.svg"
  width={250}
  height={300}
+ priority
  />
  </div>
  </div>

containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx

@@ -179,8 +179,11 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  valueSetOptions={valueSetOptions}
  />
  {Object.entries(valueSetOptions[activeTab]).map(([groupIndex, group]) => {
+ const id = group.author + ":" + group.system + ":" + group.valueSetName;
  return (
  <Accordion
+ key={id}
+ id={id}
  title={
  <CustomizeQueryAccordionHeader
  handleSelectAllChange={handleSelectAllChange}
@@ -195,7 +198,6 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  groupIndex={groupIndex}
  />
  }
- id={group.author + ":" + group.system}
  headingLevel="h3"
  accordionClassName={`customize-accordion ${styles.customizeQueryAccordion}`}
  containerClassName={styles.resultsContainer}

containers/tefca-viewer/src/app/query/components/backLink/Backlink.tsx

@@ -18,6 +18,7 @@ const Backlink: React.FC<BacklinkProps> = ({ onClick, label }) => {
  href="#"
  onClick={onClick}
  className="back-link unchanged-color-on-visit"
+ aria-label="Back arrow indicating ability to navigate back a page if clicked"
  >
  <Icon.ArrowBack /> {label}
  </a>

containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx

@@ -24,10 +24,12 @@ const CustomizeQueryAccordionBody: React.FC<
 > = ({ group, toggleInclude, groupIndex }) => {
  return (
  <Table className={`${styles.customizeQueryGridContainer}`}>
- <thead className={`${styles.customizeQueryGridHeader} margin-top-10`}>
- <th className={`${styles.accordionTableHeader}`}>Include</th>
- <th className={`${styles.accordionTableHeader}`}>Code</th>
- <th className={`${styles.accordionTableHeader}`}>Display</th>
+ <thead className={` margin-top-10`}>
+ <tr className={styles.customizeQueryGridHeader}>
+ <th className={`${styles.accordionTableHeader}`}>Include</th>
+ <th className={`${styles.accordionTableHeader}`}>Code</th>
+ <th className={`${styles.accordionTableHeader}`}>Display</th>
+ </tr>
  </thead>
  <tbody className="display-flex flex-column">
  {group.items.map((item, index) => (
@@ -48,8 +50,12 @@ const CustomizeQueryAccordionBody: React.FC<
  />
  )}
  </td>
- <div>{item.code}</div>
- <div>{item.display}</div>
+ <td className={styles.noBorderNoBackgroundNoPadding}>
+ {item.code}
+ </td>
+ <td className={styles.noBorderNoBackgroundNoPadding}>
+ {item.display}
+ </td>
  </tr>
  ))}
  </tbody>

containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx

@@ -45,13 +45,15 @@ const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
  className="usa-icon bg-base-lightest"
  size={4}
  color="#565C65"
+ aria-label="Checkmark icon indicating addition"
  />
  )}
  {selectedCount > 0 && selectedCount < group.items.length && (
  <Icon.Remove
  className="usa-icon bg-base-lightest"
  size={4}
  color="#565C65"
+ aria-label="Minus icon indicating removal"
  />
  )}
  </div>

containers/tefca-viewer/src/app/query/components/customizeQuery/customizeQuery.module.css

@@ -64,6 +64,12 @@
  border: none;
 }
 
+.noBorderNoBackgroundNoPadding {
+ border: none !important;
+ background-color: transparent !important;
+ padding: 0 !important;
+}
+
 .customizeQueryCheckbox {
  width: 2.25rem;
  height: 2.25rem;
@@ -144,6 +150,10 @@
  gap: var(--column-gap);
 }
 
+.customizeQueryGridHeader th {
+ padding: 0 !important;
+}
+
 .accordionTableHeader {
  display: flex;
  justify-content: space-between;

containers/tefca-viewer/src/app/query/components/header/header.module.css

@@ -0,0 +1,8 @@
+.dataUsagePolicyButton {
+ cursor: pointer;
+ background: none !important;
+ border: none !important;
+ color: white !important;
+ padding: 0px !important;
+ font: inherit !important;
+}

containers/tefca-viewer/src/app/query/components/header/header.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Modal, ModalButton } from "../../designSystem/Modal";
+import { ModalRef } from "@trussworks/react-uswds";
+import styles from "./header.module.css";
+/**
+ * Produces the header.
+ * @returns The HeaderComponent component.
+ */
+export default function HeaderComponent() {
+ const modalRef = useRef<ModalRef>(null);
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => {
+ setIsClient(true);
+ }, []);
+
+ return (
+ <>
+ <header className="usa-header usa-header--basic bg-primary-darker">
+ <div
+ className="header-footer-content usa-nav-container"
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ }}
+ >
+ <div style={{ display: "flex", alignItems: "center" }}>
+ <div className="usa-logo" style={{ marginLeft: "16px" }}>
+ <em className="usa-logo__text text-base-lightest">
+ <a
+ className="text-base-lightest font-sans-xl text-bold"
+ href="/tefca-viewer"
+ title="TEFCA Viewer"
+ >
+ TEFCA Viewer
+ </a>
+ </em>
+ </div>
+ </div>
+ <div
+ style={{
+ whiteSpace: "nowrap",
+ textAlign: "right",
+ marginLeft: "auto",
+ }}
+ >
+ {isClient && (
+ <ModalButton
+ modalRef={modalRef}
+ title={"Data Usage Policy"}
+ className={styles.dataUsagePolicyButton}
+ />
+ )}
+ </div>
+ </div>
+ </header>
+
+ {isClient && (
+ <Modal
+ modalRef={modalRef}
+ id="data-usage-policy"
+ heading="How is my data stored?"
+ description="It's not! Data inputted into the TEFCA Query Connector is not persisted or stored anywhere."
+ ></Modal>
+ )}
+ </>
+ );
+}

containers/tefca-viewer/src/app/query/components/resultsView/ResultsViewTable.tsx

@@ -22,7 +22,7 @@ const ResultsViewTable: React.FC<ResultsViewTable> = ({ accordionItems }) => {
  const titleId = formatIdForAnchorTag(item.title);
  return (
  item.content && (
- <div className="padding-bottom-2">
+ <div className="padding-bottom-2" key={item.title}>
  <Accordion
  title={item.title}
  content={
@@ -34,6 +34,7 @@ const ResultsViewTable: React.FC<ResultsViewTable> = ({ accordionItems }) => {
  }
  expanded={true}
  id={titleId}
+ key={titleId}
  headingLevel={"h3"}
  accordionClassName={styles.accordionWrapper}
  containerClassName={styles.accordionContainer}