VIA-608 Render care card headings at level specified in Content-API

Fixes issue on the Rotavirus page where the care card was rendering
without a heading. In the content-api response this care card heading is
at level h4 because it sits beneath another subheading, which we have
not seen on other pages up until this point.

Updates the content styling service to preserve the heading level and
use it when rendering the react component.

Heading level is optional to preserve compatibility with other
non-content api usages of the care card (EliD, rsv-pregnancy, etc); if
heading level is not specified the react component library will render
at the default level as it did before (h2 at time of writing).

Note that incorrect heading levels would not have been obviously visible
in the UI as a single css style was applied which sets the text-size.
However, a screenreader would have noticed that the h2/h3/h4 elements
were appearing in the wrong structure.

Author: donna-belsey-nhs

src/app/_components/nhs-frontend/NonUrgentCareCard.test.tsx

@@ -13,9 +13,25 @@ describe("NonUrgentCareCard", () => {
   it("should render heading", () => {
     render(<NonUrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
 
-    const heading: HTMLElement = screen.getByRole("heading", { name: "Non-urgent advice: Contact GP:", level: 2 });
+    const defaultLevel2Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Non-urgent advice: Contact GP:",
+      level: 2,
+    });
 
-    expect(heading).toBeVisible();
+    expect(defaultLevel2Heading).toBeVisible();
+  });
+
+  it("should render heading at specified level", () => {
+    render(
+      <NonUrgentCareCard heading={"Contact GP lvl 4:"} headingLevel={"h4"} content={<p>this is their contact</p>} />,
+    );
+
+    const level4Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Non-urgent advice: Contact GP lvl 4:",
+      level: 4,
+    });
+
+    expect(level4Heading).toBeVisible();
   });
 
   it("should render content inside of care card", () => {

src/app/_components/nhs-frontend/NonUrgentCareCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { HeadingLevel } from "@src/services/content-api/types";
 import { Heading } from "@src/services/eligibility-api/types";
 import { Card } from "nhsuk-react-components";
 import { JSX } from "react";
@@ -8,13 +9,18 @@ import styles from "./styles.module.css";
 
 interface NonUrgentCareCardProps {
   heading: Heading | string | JSX.Element;
+  headingLevel?: HeadingLevel;
   content: JSX.Element;
 }
 
-const NonUrgentCareCard = ({ heading, content }: NonUrgentCareCardProps) => {
+const NonUrgentCareCard = ({ heading, headingLevel, content }: NonUrgentCareCardProps) => {
   return (
     <Card cardType="non-urgent" data-testid="non-urgent-care-card">
-      <Card.Heading>{heading}</Card.Heading>
+      {headingLevel ? (
+        <Card.Heading headingLevel={headingLevel}>{heading}</Card.Heading>
+      ) : (
+        <Card.Heading>{heading}</Card.Heading>
+      )}
       <Card.Content className={styles.careCardZeroMarginBottom}>{content}</Card.Content>
     </Card>
   );

src/app/_components/nhs-frontend/UrgentCareCard.test.tsx

@@ -13,6 +13,28 @@ describe("UrgentCareCard", () => {
   it("should render heading", () => {
     render(<UrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
 
+    const defaultLevel2Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Urgent advice: Contact GP:",
+      level: 2,
+    });
+
+    expect(defaultLevel2Heading).toBeVisible();
+  });
+
+  it("should render heading at specified heading level", () => {
+    render(<UrgentCareCard heading={"Contact GP lvl 3:"} headingLevel={"h3"} content={<p>this is their contact</p>} />);
+
+    const level3Heading: HTMLElement = screen.getByRole("heading", {
+      name: "Urgent advice: Contact GP lvl 3:",
+      level: 3,
+    });
+
+    expect(level3Heading).toBeVisible();
+  });
+
+  it("should render heading at level 2 by default if no heading level provided", () => {
+    render(<UrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
     const heading: HTMLElement = screen.getByRole("heading", { name: "Urgent advice: Contact GP:", level: 2 });
 
     expect(heading).toBeVisible();

src/app/_components/nhs-frontend/UrgentCareCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { HeadingLevel } from "@src/services/content-api/types";
 import { Heading } from "@src/services/eligibility-api/types";
 import { Card } from "nhsuk-react-components";
 import { JSX } from "react";
@@ -8,13 +9,18 @@ import styles from "./styles.module.css";
 
 interface NonUrgentCareCardProps {
   heading: Heading | string | JSX.Element;
+  headingLevel?: HeadingLevel;
   content: JSX.Element;
 }
 
-const UrgentCareCard = ({ heading, content }: NonUrgentCareCardProps) => {
+const UrgentCareCard = ({ heading, headingLevel, content }: NonUrgentCareCardProps) => {
   return (
     <Card cardType="urgent" data-testid="urgent-care-card">
-      <Card.Heading>{heading}</Card.Heading>
+      {headingLevel ? (
+        <Card.Heading headingLevel={headingLevel}>{heading}</Card.Heading>
+      ) : (
+        <Card.Heading>{heading}</Card.Heading>
+      )}
       <Card.Content className={styles.careCardZeroMarginBottom}>{content}</Card.Content>
     </Card>
   );

src/services/content-api/parsers/content-styling-service.test.tsx

@@ -13,7 +13,7 @@ import {
   VaccinePageSection,
   VaccinePageSubsection,
 } from "@src/services/content-api/types";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { JSX, isValidElement } from "react";
 
 const mockNBSBookingActionHTML = "NBS Booking Link Test";
@@ -135,11 +135,16 @@ describe("ContentStylingService", () => {
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph non-urgent subsection");
-      const heading: HTMLElement = screen.getByText("Heading for Non Urgent Component");
+      const cardHeading: HTMLElement = screen.getByRole("heading", {
+        level: 3,
+        name: "Non-urgent advice: Heading for Non Urgent Component",
+      });
       const nonUrgent: HTMLElement = screen.getByText("Non-urgent advice:");
+      const visibleHeading: HTMLElement = within(cardHeading).getByText("Heading for Non Urgent Component");
 
       expect(text).toBeInTheDocument();
-      expect(heading).toBeInTheDocument();
+      expect(cardHeading).toBeInTheDocument();
+      expect(visibleHeading).toBeInTheDocument();
       expect(nonUrgent).toBeInTheDocument();
     });
 
@@ -148,11 +153,16 @@ describe("ContentStylingService", () => {
       render(styledSubsection);
 
       const text: HTMLElement = screen.getByText("This is a styled paragraph urgent subsection");
-      const heading: HTMLElement = screen.getByText("Heading for Urgent Component");
+      const cardHeading: HTMLElement = screen.getByRole("heading", {
+        level: 3,
+        name: "Urgent advice: Heading for Urgent Component",
+      });
+      const visibleHeading: HTMLElement = within(cardHeading).getByText("Heading for Urgent Component");
       const nonUrgent: HTMLElement = screen.getByText("Urgent advice:");
 
       expect(text).toBeInTheDocument();
-      expect(heading).toBeInTheDocument();
+      expect(cardHeading).toBeInTheDocument();
+      expect(visibleHeading).toBeInTheDocument();
       expect(nonUrgent).toBeInTheDocument();
     });
 
@@ -341,6 +351,23 @@ describe("ContentStylingService", () => {
       expect(headingAndContent.content).toEqual("<p>you have not been contacted</p>");
     });
 
+    it("should extract heading level", async () => {
+      const headingAndContentFromLevel4: HeadingWithContent = extractHeadingAndContent(
+        "<h4>Heading level 4</h4><p>you have not been contacted</p>",
+      );
+
+      expect(headingAndContentFromLevel4.headingLevel).toEqual("h4");
+    });
+
+    it("should extract first heading at any level from simple non-urgent html string", async () => {
+      const heading: HeadingWithContent = extractHeadingAndContent(
+        "<h3>Heading level 3</h3><p>you have not been contacted</p><h4>heading level 4</h4>",
+      );
+
+      expect(heading.heading).toEqual("Heading level 3");
+      expect(heading.headingLevel).toEqual("h3");
+    });
+
     it("should return empty heading and content from empty string", async () => {
       const headingAndContent: HeadingWithContent = extractHeadingAndContent("");
 

src/services/content-api/parsers/content-styling-service.tsx

@@ -3,7 +3,8 @@ import UrgentCareCard from "@src/app/_components/nhs-frontend/UrgentCareCard";
 import { VaccineType } from "@src/models/vaccine";
 import { styleHowToGetSectionForRsv } from "@src/services/content-api/parsers/custom/rsv";
 import { styleHowToGetSectionForRsvPregnancy } from "@src/services/content-api/parsers/custom/rsv-pregnancy";
-import type {
+import {
+  HeadingLevel,
   HeadingWithContent,
   Overview,
   StyledPageSection,
@@ -62,20 +63,22 @@ const styleSubsection = (subsection: VaccinePageSubsection, id: number, isLastSu
   if (subsection.name === Subsections.INFORMATION) {
     return <InsetText key={id}>{_getDivWithSanitisedHtml(text)}</InsetText>;
   } else if (subsection.name === Subsections.NON_URGENT) {
-    const { heading, content } = extractHeadingAndContent(subsection.text);
+    const { heading, headingLevel, content } = extractHeadingAndContent(subsection.text);
     return (
       <NonUrgentCareCard
         key={id}
         heading={_getDivWithSanitisedHtml(heading)}
+        headingLevel={headingLevel}
         content={_getDivWithSanitisedHtml(content)}
       />
     );
   } else if (subsection.name === Subsections.URGENT) {
-    const { heading, content } = extractHeadingAndContent(subsection.text);
+    const { heading, headingLevel, content } = extractHeadingAndContent(subsection.text);
     return (
       <UrgentCareCard
         key={id}
         heading={_getDivWithSanitisedHtml(heading)}
+        headingLevel={headingLevel}
         content={_getDivWithSanitisedHtml(content)}
       />
     );
@@ -117,14 +120,15 @@ const styleSection = (section: VaccinePageSection): StyledPageSection => {
 };
 
 const extractHeadingAndContent = (text: string): HeadingWithContent => {
-  const pattern: RegExp = /^<h3>(.*?)<\/h3>/;
+  const pattern: RegExp = /^<(h\d)>(.*?)<\/h\d>/;
   const match: RegExpMatchArray | null = pattern.exec(text);
 
   if (match) {
-    const firstOccurrence: string = match[1];
+    const firstCaptureGroup: HeadingLevel = match[1] as HeadingLevel;
+    const secondCaptureGroup: string = match[2];
     const remainingText: string = text.replace(pattern, "").trim();
 
-    return { heading: firstOccurrence, content: remainingText };
+    return { heading: secondCaptureGroup, headingLevel: firstCaptureGroup, content: remainingText };
   } else {
     return {
       heading: "",

src/services/content-api/types.ts

@@ -117,8 +117,11 @@ export type StyledPageSection = {
   component: JSX.Element;
 };
 
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+
 export type HeadingWithContent = {
   heading: string;
+  headingLevel?: HeadingLevel;
   content: string;
 };