Landing page semantic enhancements (#337)

query-connector/README.md

@@ -114,7 +114,7 @@ If the above doesn't work, try replacing `localhost` with `0.0.0.0`.
 
 #### Running the e2e tests locally
 
-Our e2e's are available locally via `npm run test:playright:local`. You'll need to have the app running locally at `localhost:3000` first (ie using `npm run dev` or running `npm run dev:db` and `npm run dev:next` in two separate terminals).
+Our e2e's are available locally via `npm run test:playwright:local`. You'll need to have the app running locally at `localhost:3000` first (ie using `npm run dev` or running `npm run dev:db` and `npm run dev:next` in two separate terminals).
 
 For flows that do queries to a FHIR server (ie `/query`), you'll need to use a DB utility to change the address of the local E2E server to whatever localhost port your dev HAPI server is living at. If you have questions, reach out to another eng on the team.
 

query-connector/e2e/alternate_queries.spec.ts

@@ -13,7 +13,7 @@ test.describe("alternate queries with the Query Connector", () => {
   test("query using form-fillable demo patient by phone number", async ({
     page,
   }) => {
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
     await page.getByRole("button", { name: "Fill fields" }).click();
 
     // Delete Last name and MRN to force phone number as one of the 3 fields
@@ -52,7 +52,7 @@ test.describe("alternate queries with the Query Connector", () => {
 
   // test("social determinants query with generalized function", async ({
   test("cancer query with generalized function", async ({ page }) => {
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
     await page.getByRole("button", { name: "Fill fields" }).click();
     // Select FHIR server from drop down
     await page.getByRole("button", { name: "Advanced" }).click();
@@ -79,7 +79,7 @@ test.describe("alternate queries with the Query Connector", () => {
   test("form-fillable STI query using generalized function", async ({
     page,
   }) => {
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
     await page.getByRole("button", { name: "Fill fields" }).click();
     // Select FHIR server from drop down
     await page.getByRole("button", { name: "Advanced" }).click();

query-connector/e2e/customize_query.spec.ts

@@ -10,7 +10,7 @@ test.describe("querying with the Query Connector", () => {
   // Start every test by navigating to the customize query workflow
   test.beforeEach(async ({ page }) => {
     await page.goto(TEST_URL);
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
 
     // Check that the info alert is visible and contains the correct text
     const alert = page.locator(".custom-alert");

query-connector/e2e/load.spec.ts

@@ -18,5 +18,5 @@ test("landing page loads", async ({ page }) => {
 
   // Check that interactable elements are present (header and Get Started)
   await expect(page.getByRole("link", { name: metadata.title })).toBeVisible();
-  await expect(page.getByRole("button", { name: "Try it out" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Try it out" })).toBeVisible();
 });

query-connector/e2e/query_workflow.spec.ts

@@ -16,7 +16,7 @@ test.describe("querying with the Query Connector", () => {
   });
 
   test("unsuccessful user query: no patients", async ({ page }) => {
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
     await page.getByRole("button", { name: "Fill fields" }).click();
     await page.getByLabel("First name").fill("Shouldnt");
     await page.getByLabel("Last name").fill("Findanyone");
@@ -41,7 +41,7 @@ test.describe("querying with the Query Connector", () => {
   });
 
   test("successful demo user query", async ({ page }) => {
-    await page.getByRole("button", { name: "Try it out" }).click();
+    await page.getByRole("link", { name: "Try it out" }).click();
 
     // Check that the info alert is visible and contains the correct text
     const alert = page.locator(".custom-alert");

query-connector/src/app/(pages)/query/components/resultsView/tableComponents/ImmunizationTable.tsx

@@ -37,7 +37,7 @@ const ImmunizationTable: React.FC<ImmunizationTableProps> = ({
         {immunizations.map((immunization) => (
           <tr className={styles.immunizationRow} key={immunization.id}>
             <td>{formatDate(immunization.occurrenceDateTime)}</td>
-            <td>{immunization.vaccineCode.coding?.[0].display}</td>
+            <td>{immunization.vaccineCode?.coding?.[0].display}</td>
             <td>
               {immunization.doseQuantity?.value}{" "}
               {immunization.doseQuantity?.code}

query-connector/src/app/page.tsx

@@ -1,44 +1,34 @@
-"use client";
 import {
   ProcessList,
   ProcessListItem,
   ProcessListHeading,
-  Button,
 } from "@trussworks/react-uswds";
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import Image from "next/image";
 import styles from "./page.module.scss";
 /**
  * The landing page for the TEFCA Viewer.
  * @returns The LandingPage component.
  */
 export default function LandingPage() {
-  const router = useRouter();
-
-  const handleGoToDemo = () => {
-    router.push(`/query`);
-  };
-
   return (
     <div className="main-body display-flex flex-column flex-justify-center">
       <div className="gradient-blue-background flex-1">
         <div className="container">
           <div className="text-holder">
             <h1 className={styles.pageSubtitle}>Data collection made easier</h1>
-            <h2 className={styles.pageContent}>
+            <p className={styles.pageContent}>
               The Query Connector allows your jurisdiction to query a wide
               network of healthcare providers through your existing data use
               agreements, giving you access to more complete and timely data.
-            </h2>
-
-            <Button
-              className="next-button margin-bottom-2"
-              type="button"
+            </p>
+            <Link
+              className="usa-button next-button margin-bottom-2"
               id="next-button"
-              onClick={() => handleGoToDemo()}
+              href="/query"
             >
               Try it out
-            </Button>
+            </Link>
           </div>
           <Image
             alt="Graphic illustrating what TEFCA is"
@@ -50,8 +40,10 @@ export default function LandingPage() {
         </div>
       </div>
       <div className="home flex-1">
-        <h3 className={styles.pageSubtitle}>What is it?</h3>
-        <h2 className={styles.pageContent}>
+        <h3 className={styles.pageSubtitle} role="heading" aria-level={2}>
+          What is it?
+        </h3>
+        <p className={styles.pageContent}>
           The Query Connector is a data collection tool that uses an intuitive
           querying process to help your staff quickly retrieve patient records
           and relevant case information from a wide range of healthcare
@@ -60,27 +52,29 @@ export default function LandingPage() {
           the Data Use and Reciprocal Support Agreement (DURSA), while also
           supporting innovative standards for data sharing, like the Trusted
           Exchange Framework and Common Agreement (TEFCA).
-        </h2>
-        <h3 className={styles.pageSubtitle}>How does it work?</h3>
-        <h2 className={styles.pageContent}>
+        </p>
+        <h3 className={styles.pageSubtitle} role="heading" aria-level={2}>
+          How does it work?
+        </h3>
+        <p className={styles.pageContent}>
           Public health staff can interact with the Query Connector manually by
           entering simple patient details — such as name, date of birth, or
           medical identifiers — along with a query, into the web-based portal.
           The Query Connector surfaces patient data relevant to the use case in
           an easily readable format, making data more usable for case
           investigation.
-        </h2>
+        </p>
         <ProcessList className="padding-top-4">
           <ProcessListItem>
-            <ProcessListHeading type="h4">
+            <ProcessListHeading type="h3">
               Search for a patient
             </ProcessListHeading>
             <p className="margin-top-05 font-sans-xs">
               Based on name, date of birth, and other demographic information
             </p>
           </ProcessListItem>
           <ProcessListItem>
-            <ProcessListHeading type="h4">
+            <ProcessListHeading type="h3">
               View information tied to your case investigation
             </ProcessListHeading>
             <p className="font-sans-xs">

query-connector/src/app/ui/components/header/header.tsx

@@ -8,6 +8,7 @@ import styles from "./header.module.scss";
 import { metadata } from "@/app/shared/constants";
 import classNames from "classnames";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 /**
  * Produces the header.
@@ -72,13 +73,13 @@ const HeaderComponent: React.FC<{ authDisabled: boolean }> = ({
           <div className={classNames("display-flex", "flex-align-center")}>
             <div className="usa-logo" style={{ marginLeft: "0" }}>
               <em className="usa-logo__text text-base-lightest-important">
-                <a
+                <Link
                   className="font-mono-lg text-base-lightest-important font-weight-normal-important"
                   href={landingPage}
                   title={metadata.title}
                 >
                   {metadata.title}
-                </a>
+                </Link>
               </em>
             </div>
           </div>
@@ -135,19 +136,19 @@ const HeaderComponent: React.FC<{ authDisabled: boolean }> = ({
             {/* {isProduction && ( */}
             <>
               <li className={styles.subMenuItem}>
-                <a className={styles.menuItem} href={"/queryBuilding"}>
+                <Link className={styles.menuItem} href={"/queryBuilding"}>
                   My queries
-                </a>
+                </Link>
               </li>
               <li className={styles.subMenuItem}>
-                <a className={styles.menuItem} href={"/fhir-servers"}>
+                <Link className={styles.menuItem} href={"/fhir-servers"}>
                   FHIR Servers
-                </a>
+                </Link>
               </li>
               <li className={styles.subMenuItem}>
-                <a className={styles.menuItem} href={landingPage}>
+                <Link className={styles.menuItem} href={landingPage}>
                   Log out
-                </a>
+                </Link>
               </li>
             </>
             {/* )} */}