From 1d70fd4eb65e8d7ac4003f349a99e99393ff6664 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:07:49 -0400
Subject: [PATCH 01/26] Unit testing for ArticleCTA component

---
 .../fragment_components/ArticleCTA.test.js       | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/ArticleCTA.test.js

diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.test.js b/components/fragment_renderer/fragment_components/ArticleCTA.test.js
new file mode 100644
index 0000000000..0190c6186c
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/ArticleCTA.test.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ArticleCTA from "./ArticleCTA";
+import { Default } from "./ArticleCTA.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("ArticleCTA", () => {
+  test("renders ArticleCTA component with default props", async () => {
+    const { container } = render(<ArticleCTA {...Default.args} />);
+    expect(screen.getByText("This is a body")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From 82e8659bd4914614078099b2635b4f33e6af9193 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:08:41 -0400
Subject: [PATCH 02/26] Unit testing for BasicTextWithImage component

---
 .../BasicTextWithImage.test.js                 | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/BasicTextWithImage.test.js

diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.test.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.test.js
new file mode 100644
index 0000000000..53a2843fd9
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/BasicTextWithImage.test.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import BasicTextWithImage from "./BasicTextWithImage";
+import { Default } from "./BasicTextWithImage.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("BasicTextWithImage", () => {
+  test("renders BasicTextWithImage component with default props", async () => {
+    const { container } = render(<BasicTextWithImage {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(screen.getByText((content) => content.startsWith("Every week")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From 16c72b4d8ba0512012c4b601f08e0bd3b592f8c4 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:09:10 -0400
Subject: [PATCH 03/26] Unit testing for Button component

---
 .../fragment_components/Button.test.js        | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/Button.test.js

diff --git a/components/fragment_renderer/fragment_components/Button.test.js b/components/fragment_renderer/fragment_components/Button.test.js
new file mode 100644
index 0000000000..e63ae5f9e5
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/Button.test.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Button from "./Button";
+import { Primary } from "./Button.stories.js";
+import { Secondary } from "./Button.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("Button", () => {
+  test("renders Button component with Primary props", async () => {
+    const { container } = render(<Button {...Primary.args} />);
+    expect(screen.getByText("Primary Button")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  test("renders Button component with Secondary props", async () => {
+    const { container } = render(<Button {...Secondary.args} />);
+    expect(screen.getByText("Secondary Button")).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From 6172aa82ce4c4cfe9ddd18f74e8541cf48a379ff Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:09:48 -0400
Subject: [PATCH 04/26] fixed typos in ImageWithCollapse.stories.js

---
 .../fragment_components/ImageWithCollapse.stories.js        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
index b34d30cf33..91542a5ba2 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
@@ -21,10 +21,10 @@ Default.args = {
   longDesc: "Test Description",
   children: [
     <p>First paragraph tag</p>,
-    <p>Second paragprahp tag</p>,
+    <p>Second paragraph tag</p>,
     <ul>
-      <li>Unorderded list item 1</li>
-      <li>Unorderded list item 2</li>
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
     </ul>,
     <ol>
       <li>Ordered list item 1</li>

From 8227db5574e54a221fd841faed22c9c4580e7f6a Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:10:16 -0400
Subject: [PATCH 05/26] Unit testing for ImageWithCollapse component

---
 .../ImageWithCollapse.test.js                 | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/ImageWithCollapse.test.js

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
new file mode 100644
index 0000000000..92483f7c91
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -0,0 +1,31 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ImageWithCollapse from "./ImageWithCollapse";
+import { Default } from "./ImageWithCollapse.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("ImageWithCollapse", () => {
+  test("renders ImageWithCollapse component with default props", async () => {
+    const { container } = render(<ImageWithCollapse {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Example Title"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("First"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Unordered list item 1"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Ordered list item 1"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From 81f23a22927424aede711037a0d0b2955a4bcd62 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:10:48 -0400
Subject: [PATCH 06/26] Unit testing for QuoteVerticalLineContent component

---
 .../QuoteVerticalLineContent.stories.js       |  2 +-
 .../QuoteVerticalLineContent.test.js          | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js

diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
index cd1d25e8cb..7c0be892b6 100644
--- a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
@@ -17,7 +17,7 @@ Default.args = {
       content: [
         {
           nodeType: "text",
-          value: "Quote Text ",
+          value: "Quote Text",
         },
       ],
     },
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js
new file mode 100644
index 0000000000..5da07c029c
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.test.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import QuoteVerticalLineContent from "./QuoteVerticalLineContent";
+import { Default } from "./QuoteVerticalLineContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("QuoteVerticalLineContent", () => {
+  test("renders QuoteVerticalLineContent component with default props", async () => {
+    const { container } = render(
+      <QuoteVerticalLineContent {...Default.args} />
+    );
+    expect(
+      screen.getByText((content) => content.startsWith("Quote Text"))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Explanation Text"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From a4d9c538004075b93ab6f45703c7ee7938cc2130 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:11:30 -0400
Subject: [PATCH 07/26] Unit testing for ImageVerticalLineContent component

---
 .../ImageVerticalLineContent.test.js          | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js

diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js
new file mode 100644
index 0000000000..34ce010335
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ImageVerticalLineContent from "./ImageVerticalLineContent";
+import { Default } from "./ImageVerticalLineContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("ImageVerticalLineContent", () => {
+  test("renders ImageVerticalLineContent component with default props", async () => {
+    const { container } = render(
+      <ImageVerticalLineContent {...Default.args} />
+    );
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From a09e72ea18fe03fabafe97d2c7a89f67780a0158 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:11:58 -0400
Subject: [PATCH 08/26] Unit testing for TextContent component

---
 .../fragment_components/TextContent.test.js     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 components/fragment_renderer/fragment_components/TextContent.test.js

diff --git a/components/fragment_renderer/fragment_components/TextContent.test.js b/components/fragment_renderer/fragment_components/TextContent.test.js
new file mode 100644
index 0000000000..7c05555f3b
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/TextContent.test.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TextContent from "./TextContent";
+import { Default } from "./TextContent.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextContent", () => {
+  test("renders TextContent component with default props", async () => {
+    const { container } = render(<TextContent {...Default.args} />);
+    expect(screen.getByText((content) => content.startsWith("Every week")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From ba6cd8e4875c388e00f3ff8e4b5f20f0c9f6872b Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:12:38 -0400
Subject: [PATCH 09/26] Unit testing for TextWithImage component

---
 .../TextWithImage.stories.js                  |  4 +--
 .../fragment_components/TextWithImage.test.js | 29 +++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 components/fragment_renderer/fragment_components/TextWithImage.test.js

diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
index 1e516606fb..b06feec6d2 100644
--- a/components/fragment_renderer/fragment_components/TextWithImage.stories.js
+++ b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
@@ -13,7 +13,7 @@ export const Vertical = Template.bind({});
 
 Default.args = {
   src: "/image2.png",
-  alt: "alt",
+  alt: "image alt text",
   width: 359,
   height: 260,
   layout: "default",
@@ -33,7 +33,7 @@ Default.args = {
 
 Vertical.args = {
   src: "/image2.png",
-  alt: "alt",
+  alt: "Alt Text",
   width: 359,
   height: 260,
   layout: "image-vertical-line-content",
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.test.js b/components/fragment_renderer/fragment_components/TextWithImage.test.js
new file mode 100644
index 0000000000..303d0085ea
--- /dev/null
+++ b/components/fragment_renderer/fragment_components/TextWithImage.test.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TextWithImage from "./TextWithImage";
+import { Default } from "./TextWithImage.stories.js";
+import { Vertical } from "./TextWithImage.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextWithImage", () => {
+  test("renders TextWithImage component with default props", async () => {
+    const { container } = render(<TextWithImage {...Default.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  test("renders TextWithImage component with Vertical props", async () => {
+    const { container } = render(<TextWithImage {...Vertical.args} />);
+    expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every week"))
+    ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From 1fbae4128c6d1309a63c2e2c607d47ed918f370a Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Tue, 14 May 2024 17:14:38 -0400
Subject: [PATCH 10/26] updated alt arg value to match unit test query

---
 .../fragment_components/TextWithImage.stories.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
index b06feec6d2..596b26adc7 100644
--- a/components/fragment_renderer/fragment_components/TextWithImage.stories.js
+++ b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
@@ -33,7 +33,7 @@ Default.args = {
 
 Vertical.args = {
   src: "/image2.png",
-  alt: "Alt Text",
+  alt: "image alt text",
   width: 359,
   height: 260,
   layout: "image-vertical-line-content",

From bde63d7d544ca3994eb569b18f703b20a5c4bba7 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Tue, 14 May 2024 12:35:05 -0400
Subject: [PATCH 11/26] fix dcterms metadata to better support AA (#1019)

---
 pages/cdcp-apply.js           | 23 +++++++++++++++++++++++
 public/locales/en/common.json |  1 +
 public/locales/fr/common.json |  1 +
 3 files changed, 25 insertions(+)

diff --git a/pages/cdcp-apply.js b/pages/cdcp-apply.js
index 967121ca67..9a20cda6e1 100644
--- a/pages/cdcp-apply.js
+++ b/pages/cdcp-apply.js
@@ -55,6 +55,29 @@ export default function CDCPLanding(props) {
       <Head>
         {/* Primary HTML Meta Tags */}
         <title>{t("cdcp.secondaryHeading")}</title>
+
+        {/* DCMI Meta Tags */}
+        <meta name="dcterms.title" content={t("cdcp.tertiaryHeading")} />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2/T"
+        />
+        <meta
+          name="dcterms.creator"
+          content={
+            props.locale === "en"
+              ? "Employment and Social Development Canada"
+              : "Emploi et Développement social Canada"
+          }
+        />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta name="dcterms.spatial" content="Canada" />
+
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
       </Head>
       <section className="layout-container">
         <div className="grid grid-cols-12 gap-x-8">
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index d0b0086ed3..b68d47b38c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -521,6 +521,7 @@
   },
 
   "cdcp": {
+    "tertiaryHeading": "Canadian Dental Care Plan Prototype",
     "secondaryHeading": "Canadian Dental Care Plan",
     "primaryHeading": "Apply",
     "toCompleteApplication": "To complete your application, you’ll need to provide the following information for yourself, your spouse or common-law partner (if applicable):",
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 164a89ef55..0714eb8a5a 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -511,6 +511,7 @@
   },
 
   "cdcp": {
+    "tertiaryHeading": "Prototype Régime canadien de soins dentaires",
     "secondaryHeading": "Régime canadien de soins dentaires",
     "primaryHeading": "Présenter une demande",
     "toCompleteApplication": "Pour remplir votre demande, vous devrez fournir les renseignements suivantes pour vous-même, pour votre époux/épouse ou conjoint/conjointe de fait (s’il y a lieu) :",

From a6380d2ecb63a440241b44bf4096424d4c1f13a9 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Wed, 15 May 2024 11:47:59 -0400
Subject: [PATCH 12/26] Font Optimization (#1020)

* setup google fonts to be served locally

* implement fonts using next/font

* apply Lato and Notosans variables directly to Modal

* remove duplicate main landmark

* fix duplicate main landmarks in error pages
---
 components/organisms/HelpIcon.js |   2 +-
 components/organisms/Layout.js   |  32 +-
 pages/404.js                     | 154 +++----
 pages/500.js                     | 207 ++++-----
 pages/_app.js                    |  19 +-
 pages/error.js                   | 769 +++++++++++++++----------------
 pages/index.js                   |   4 +-
 pages/notsupported.js            | 225 +++++----
 styles/globals.css               |   6 +-
 tailwind.config.js               |   6 +-
 10 files changed, 707 insertions(+), 717 deletions(-)

diff --git a/components/organisms/HelpIcon.js b/components/organisms/HelpIcon.js
index 150f8ba9c7..94448a93ed 100644
--- a/components/organisms/HelpIcon.js
+++ b/components/organisms/HelpIcon.js
@@ -32,7 +32,7 @@ export const HelpIcon = ({ title, body, lang }) => {
           <Modal
             show={showModal}
             onHide={handleClose}
-            className="modal"
+            className="modal __variable_a1e2e3 __variable_3e745e"
             aria-label={title}
           >
             <Modal.Header className="modal-header">
diff --git a/components/organisms/Layout.js b/components/organisms/Layout.js
index fb54ef3309..378096b5ed 100644
--- a/components/organisms/Layout.js
+++ b/components/organisms/Layout.js
@@ -111,25 +111,23 @@ export const Layout = ({
         </div>
       </header>
 
-      <main>
-        {bannerText && bannerTitle ? (
-          <Banner siteTitle={bannerTitle} headline={bannerText} />
-        ) : null}
-        {children}
-        <div className="mt-12">
-          <h2 className="sr-only">{t("siteFooter")}</h2>
-          {!excludeFooterFeedback ? (
-            <div className="layout-container mt-5">
-              <Feedback />
-            </div>
-          ) : (
-            ""
-          )}
-          <div className="layout-container mb-2">
-            <DateModified date={dateModifiedOverride} />
+      {bannerText && bannerTitle ? (
+        <Banner siteTitle={bannerTitle} headline={bannerText} />
+      ) : null}
+      {children}
+      <div className="mt-12">
+        <h2 className="sr-only">{t("siteFooter")}</h2>
+        {!excludeFooterFeedback ? (
+          <div className="layout-container mt-5">
+            <Feedback />
           </div>
+        ) : (
+          ""
+        )}
+        <div className="layout-container mb-2">
+          <DateModified date={dateModifiedOverride} />
         </div>
-      </main>
+      </div>
 
       <Footer
         id="footer"
diff --git a/pages/404.js b/pages/404.js
index ff213382a2..dfd68bab66 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -34,88 +34,82 @@ export default function error404(props) {
 
   return (
     <>
-      <main className="min-h-screen relative">
-        <Head>
-          {/* Primary HTML Meta Tags */}
-          <title data-gc-analytics-error="404">
-            {pageData.scContentEn.json[0].content[0].value} (404) |{" "}
-            {pageData.scContentFr.json[0].content[0].value} (404)
-          </title>
-          <meta
-            name="description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+      <Head>
+        {/* Primary HTML Meta Tags */}
+        <title data-gc-analytics-error="404">
+          {pageData.scContentEn.json[0].content[0].value} (404) |{" "}
+          {pageData.scContentFr.json[0].content[0].value} (404)
+        </title>
+        <meta name="description" content={`${t("404errorMetaDescription")}`} />
+        <meta name="author" content="Service Canada" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
 
-          {/* DCMI Meta Tags */}
-          <meta name="dcterms.title" content={`404 — ${t("siteTitle")}`} />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2/T"
-          />
-          <meta
-            name="dcterms.description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta
-            name="dcterms.subject"
-            title="gccore"
-            content={t("metaSubject")}
-          />
-          <meta
-            name="dcterms.creator"
-            content={
-              props.locale === "en"
-                ? "Employment and Social Development Canada"
-                : "Emploi et Développement social Canada"
-            }
-          />
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2021-06-01" />
-          <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
-          <meta name="dcterms.spatial" content="Canada" />
+        {/* DCMI Meta Tags */}
+        <meta name="dcterms.title" content={`404 — ${t("siteTitle")}`} />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2/T"
+        />
+        <meta
+          name="dcterms.description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta
+          name="dcterms.subject"
+          title="gccore"
+          content={t("metaSubject")}
+        />
+        <meta
+          name="dcterms.creator"
+          content={
+            props.locale === "en"
+              ? "Employment and Social Development Canada"
+              : "Emploi et Développement social Canada"
+          }
+        />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta name="dcterms.issued" title="W3CDTF" content="2021-06-01" />
+        <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+        <meta name="dcterms.spatial" content="Canada" />
 
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
-            }
-          />
-          <meta property="og:title" content={`404 — ${t("siteTitle")}`} />
-          <meta
-            property="og:description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta property="og:image" content={`${t("metaImage")}`} />
-          <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
+        <meta
+          property="og:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+          }
+        />
+        <meta property="og:title" content={`404 — ${t("siteTitle")}`} />
+        <meta
+          property="og:description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta property="og:image" content={`${t("metaImage")}`} />
+        <meta property="og:image:alt" content={`${t("siteTitle")}`} />
 
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
-            }
-          />
-          <meta property="twitter:title" content={`500 — ${t("siteTitle")}`} />
-          <meta name="twitter:creator" content="Service Canada" />
-          <meta
-            property="twitter:description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta property="twitter:image" content={`${t("metaImage")}`} />
-          <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
-        </Head>
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+          }
+        />
+        <meta property="twitter:title" content={`500 — ${t("siteTitle")}`} />
+        <meta name="twitter:creator" content="Service Canada" />
+        <meta
+          property="twitter:description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta property="twitter:image" content={`${t("metaImage")}`} />
+        <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+      </Head>
+      <div className="min-h-screen relative">
         <section className="layout-container pb-44">
           <div className="pt-6">
             <img
@@ -229,7 +223,7 @@ export default function error404(props) {
             </span>
           </div>
         </footer>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/pages/500.js b/pages/500.js
index dbbfa27066..c4573880d3 100644
--- a/pages/500.js
+++ b/pages/500.js
@@ -34,114 +34,111 @@ export default function error500(props) {
 
   return (
     <>
-      <main className="min-h-screen relative">
-        <Head>
-          {/* Primary HTML Meta Tags */}
-          <title data-gc-analytics-error="500">
-            {pageData.scContentEn.json[0].content[0].value} (500) |{" "}
-            {pageData.scContentFr.json[0].content[0].value} (500)
-          </title>
-          <meta
-            name="description"
-            content="Error message stating that the server is down, or the URL is incorrect or expired"
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
-          <meta content="width=device-width, initial-scale=1" name="viewport" />
-          <meta name="robots" content="noindex, nofollow" />
+      <Head>
+        {/* Primary HTML Meta Tags */}
+        <title data-gc-analytics-error="500">
+          {pageData.scContentEn.json[0].content[0].value} (500) |{" "}
+          {pageData.scContentFr.json[0].content[0].value} (500)
+        </title>
+        <meta
+          name="description"
+          content="Error message stating that the server is down, or the URL is incorrect or expired"
+        />
+        <meta name="author" content="Service Canada" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta name="robots" content="noindex, nofollow" />
 
-          {/* DCMI Meta Tags */}
-          <meta
-            property="dcterms:title"
-            lang="en"
-            content="The web site has reported an error (500)"
-          />
-          <meta
-            property="dcterms:title"
-            lang="fr"
-            content="Le site Web a signalé une erreur (500)"
-          />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2"
-          />
-          <meta
-            property="dcterms:description"
-            lang="en"
-            content="Error message stating that the server is down, or the URL is incorrect or expired."
-          />
-          <meta
-            property="dcterms:description"
-            lang="fr"
-            content="Message d’erreur indiquant que le serveur est en panne ou l’URL est incorrecte ou expirée."
-          />
-          <meta property="dcterms:creator" lang="en" content="Service Canada" />
-          <meta property="dcterms:creator" lang="fr" content="Service Canada" />
-          <meta
-            property="dcterms:subject"
-            lang="en"
-            title="gccore"
-            content="GV Government and Politics;Government services"
-          />
-          <meta
-            property="dcterms:subject"
-            lang="fr"
-            title="gccore"
-            content="GV Gouvernement et vie politique;Services gouvernementaux"
-          />
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2021-06-22" />
-          <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
-          <meta property="dcterms:issued" content="2021-06-22" />
-          <meta property="dcterms:modified" content="2021-MM-DD" />
+        {/* DCMI Meta Tags */}
+        <meta
+          property="dcterms:title"
+          lang="en"
+          content="The web site has reported an error (500)"
+        />
+        <meta
+          property="dcterms:title"
+          lang="fr"
+          content="Le site Web a signalé une erreur (500)"
+        />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2"
+        />
+        <meta
+          property="dcterms:description"
+          lang="en"
+          content="Error message stating that the server is down, or the URL is incorrect or expired."
+        />
+        <meta
+          property="dcterms:description"
+          lang="fr"
+          content="Message d’erreur indiquant que le serveur est en panne ou l’URL est incorrecte ou expirée."
+        />
+        <meta property="dcterms:creator" lang="en" content="Service Canada" />
+        <meta property="dcterms:creator" lang="fr" content="Service Canada" />
+        <meta
+          property="dcterms:subject"
+          lang="en"
+          title="gccore"
+          content="GV Government and Politics;Government services"
+        />
+        <meta
+          property="dcterms:subject"
+          lang="fr"
+          title="gccore"
+          content="GV Gouvernement et vie politique;Services gouvernementaux"
+        />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta name="dcterms.issued" title="W3CDTF" content="2021-06-22" />
+        <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+        <meta property="dcterms:issued" content="2021-06-22" />
+        <meta property="dcterms:modified" content="2021-MM-DD" />
 
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
-            }
-          />
-          <meta
-            property="og:title"
-            content="The web site has reported an error (500) | Le site Web a signalé une
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
+        <meta
+          property="og:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
+          }
+        />
+        <meta
+          property="og:title"
+          content="The web site has reported an error (500) | Le site Web a signalé une
           erreur (500)"
-          />
-          <meta
-            property="og:description"
-            content="Error message stating that the server is down, or the URL is incorrect or expired"
-          />
-          <meta property="og:image" content={`${t("metaImage")}`} />
-          <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+        />
+        <meta
+          property="og:description"
+          content="Error message stating that the server is down, or the URL is incorrect or expired"
+        />
+        <meta property="og:image" content={`${t("metaImage")}`} />
+        <meta property="og:image:alt" content={`${t("siteTitle")}`} />
 
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
-            }
-          />
-          <meta
-            property="twitter:title"
-            content="Error message stating that the server is down, or the URL is incorrect or expired"
-          />
-          <meta name="twitter:creator" content="Service Canada" />
-          <meta
-            property="twitter:description"
-            content="Error message stating that the server is down, or the URL is incorrect or expired"
-          />
-          <meta property="twitter:image" content={`${t("metaImage")}`} />
-          <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
-        </Head>
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
+          }
+        />
+        <meta
+          property="twitter:title"
+          content="Error message stating that the server is down, or the URL is incorrect or expired"
+        />
+        <meta name="twitter:creator" content="Service Canada" />
+        <meta
+          property="twitter:description"
+          content="Error message stating that the server is down, or the URL is incorrect or expired"
+        />
+        <meta property="twitter:image" content={`${t("metaImage")}`} />
+        <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+      </Head>
+      <div className="min-h-screen relative">
         <section className="layout-container pb-44">
           <div className="pt-6">
             <img
@@ -255,7 +252,7 @@ export default function error500(props) {
             </span>
           </div>
         </footer>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/pages/_app.js b/pages/_app.js
index a2c7e1e48e..4e95a2f4e6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -5,16 +5,27 @@ import "../styles/menu.css";
 import Head from "next/head";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
+import { Noto_Sans, Lato } from "next/font/google";
 
 config.autoAddCss = false;
 
+const notoSans = Noto_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "700", "900"],
+  variable: "--font-notoSans",
+});
+const lato = Lato({
+  subsets: ["latin"],
+  weight: ["300", "400", "700", "900"],
+  variable: "--font-lato",
+});
+
 function MyApp({ Component, pageProps }) {
   return (
     <>
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      </Head>
-      <Component {...pageProps} />
+      <main className={`${notoSans.variable} ${lato.variable}`}>
+        <Component {...pageProps} />
+      </main>
     </>
   );
 }
diff --git a/pages/error.js b/pages/error.js
index 598ded1c83..e522e84a06 100644
--- a/pages/error.js
+++ b/pages/error.js
@@ -31,410 +31,403 @@ export default function ErrorPage(props) {
 
   return (
     <>
-      <main className="min-h-screen relative">
-        <Head>
-          {/* Primary HTML Meta Tags */}
-          <title data-gc-analytics-error={props.statusCode}>
-            {pageData.scContentEn.json[0].content[0].value} |{" "}
-            {pageData.scContentFr.json[0].content[0].value}
-          </title>
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
-          <meta content="width=device-width, initial-scale=1" name="viewport" />
-          <meta
-            name="description"
-            content={
-              props.locale === "en"
-                ? `${errorTitle}` + `${errorMessage}`
-                : `${errorTitleFr}` + `${errorMessageFr}`
-            }
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <meta name="robots" content="noindex, nofollow" />
+      <Head>
+        {/* Primary HTML Meta Tags */}
+        <title data-gc-analytics-error={props.statusCode}>
+          {pageData.scContentEn.json[0].content[0].value} |{" "}
+          {pageData.scContentFr.json[0].content[0].value}
+        </title>
+        <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta
+          name="description"
+          content={
+            props.locale === "en"
+              ? `${errorTitle}` + `${errorMessage}`
+              : `${errorTitleFr}` + `${errorMessageFr}`
+          }
+        />
+        <meta name="author" content="Service Canada" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="robots" content="noindex, nofollow" />
 
-          {/* DCMI Meta Tags */}
-          <meta
-            property="dcterms:title"
-            lang="en"
-            content="The web site has reported an error"
-          />
-          <meta
-            property="dcterms:title"
-            lang="fr"
-            content="Le site Web a signalé une erreur"
-          />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2"
-          />
-          <meta property="dcterms:creator" lang="en" content="Service Canada" />
-          <meta property="dcterms:creator" lang="fr" content="Service Canada" />
+        {/* DCMI Meta Tags */}
+        <meta
+          property="dcterms:title"
+          lang="en"
+          content="The web site has reported an error"
+        />
+        <meta
+          property="dcterms:title"
+          lang="fr"
+          content="Le site Web a signalé une erreur"
+        />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2"
+        />
+        <meta property="dcterms:creator" lang="en" content="Service Canada" />
+        <meta property="dcterms:creator" lang="fr" content="Service Canada" />
 
-          <meta
-            property="dcterms:subject"
-            lang="en"
-            title="gccore"
-            content="GV Government and Politics;Government services"
-          />
-          <meta
-            property="dcterms:subject"
-            lang="fr"
-            title="gccore"
-            content="GV Gouvernement et vie politique;Services gouvernementaux"
-          />
-          <meta
-            property="dcterms:description"
-            lang="en"
-            content="Error message stating that the site has reported an error."
-          />
-          <meta
-            property="dcterms:description"
-            lang="fr"
-            content="Message d'erreur indiquant que le site a signalé une erreur."
-          />
-          <meta
-            name="dcterms.creator"
-            content={
-              props.locale === "en"
-                ? "Employment and Social Development Canada"
-                : "Emploi et Développement social Canada"
-            }
-          />
+        <meta
+          property="dcterms:subject"
+          lang="en"
+          title="gccore"
+          content="GV Government and Politics;Government services"
+        />
+        <meta
+          property="dcterms:subject"
+          lang="fr"
+          title="gccore"
+          content="GV Gouvernement et vie politique;Services gouvernementaux"
+        />
+        <meta
+          property="dcterms:description"
+          lang="en"
+          content="Error message stating that the site has reported an error."
+        />
+        <meta
+          property="dcterms:description"
+          lang="fr"
+          content="Message d'erreur indiquant que le site a signalé une erreur."
+        />
+        <meta
+          name="dcterms.creator"
+          content={
+            props.locale === "en"
+              ? "Employment and Social Development Canada"
+              : "Emploi et Développement social Canada"
+          }
+        />
 
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2021-06-28" />
-          <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
-          <meta property="dcterms:modified" content="2021-12-16" />
-          <meta property="dcterms:issued" content="2021-06-28" />
-          <meta
-            name="dcterms.subject"
-            content="GV Government and Politics;Government services"
-          />
-          <meta name="dcterms.language" title="ISO639-2" content="eng" />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta name="dcterms.issued" title="W3CDTF" content="2021-06-28" />
+        <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+        <meta property="dcterms:modified" content="2021-12-16" />
+        <meta property="dcterms:issued" content="2021-06-28" />
+        <meta
+          name="dcterms.subject"
+          content="GV Government and Politics;Government services"
+        />
+        <meta name="dcterms.language" title="ISO639-2" content="eng" />
 
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
-            }
-          />
-          <meta
-            property="og:title"
-            content="The web site has reported an error | Le site Web a signalé une erreur"
-          />
-          <meta
-            property="og:description"
-            content={
-              props.locale === "en"
-                ? `${errorTitle}` + `${errorMessage}`
-                : `${errorTitleFr}` + `${errorMessageFr}`
-            }
-          />
-          <meta property="og:image" content={`${t("metaImage")}`} />
-          <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
+        <meta
+          property="og:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
+          }
+        />
+        <meta
+          property="og:title"
+          content="The web site has reported an error | Le site Web a signalé une erreur"
+        />
+        <meta
+          property="og:description"
+          content={
+            props.locale === "en"
+              ? `${errorTitle}` + `${errorMessage}`
+              : `${errorTitleFr}` + `${errorMessageFr}`
+          }
+        />
+        <meta property="og:image" content={`${t("metaImage")}`} />
+        <meta property="og:image:alt" content={`${t("siteTitle")}`} />
 
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
-            }
-          />
-          <meta
-            property="twitter:title"
-            content="The web site has reported an error | Le site Web a signalé une erreur"
-          />
-          <meta name="twitter:creator" content="Service Canada" />
-          <meta
-            property="twitter:description"
-            content={
-              props.locale === "en"
-                ? `${errorTitle}` + `${errorMessage}`
-                : `${errorTitleFr}` + `${errorMessageFr}`
-            }
-          />
-          <meta property="twitter:image" content={`${t("metaImage")}`} />
-          <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
-        </Head>
-        <div>
-          <section className="layout-container pb-44">
-            <div className="pt-6">
-              <img
-                src={`https://www.canada.ca${
-                  props.locale === "en"
-                    ? pageData.scGcImages[0].scImageEn._path
-                    : pageData.scGcImages[0].scImageFr._path
-                }`}
-                alt={
-                  props.locale === "en"
-                    ? pageData.scGcImages[0].scImageAltTextEn
-                    : pageData.scGcImages[0].scImageAltTextFr
-                }
-                width={575}
-                height={59}
-              />
-            </div>
-            <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
-              {/* Left Side (English section) */}
-              <div>
-                <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0">
-                  <h1
-                    className="font-bold font-display mb-4"
-                    data-testid="heading-en"
-                  >
-                    {errorTitle}
-                  </h1>
-                  {statusCode ? (
-                    <p
-                      className="font-bold font-body mb-8"
-                      data-testid="statuscode-en"
-                    >
-                      {pageData.scContentEn.json[2].content[0].value}{" "}
-                      {statusCode}
-                    </p>
-                  ) : (
-                    ""
-                  )}
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
+          }
+        />
+        <meta
+          property="twitter:title"
+          content="The web site has reported an error | Le site Web a signalé une erreur"
+        />
+        <meta name="twitter:creator" content="Service Canada" />
+        <meta
+          property="twitter:description"
+          content={
+            props.locale === "en"
+              ? `${errorTitle}` + `${errorMessage}`
+              : `${errorTitleFr}` + `${errorMessageFr}`
+          }
+        />
+        <meta property="twitter:image" content={`${t("metaImage")}`} />
+        <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+      </Head>
+      <div className="min-h-screen relative">
+        <section className="layout-container pb-44">
+          <div className="pt-6">
+            <img
+              src={`https://www.canada.ca${
+                props.locale === "en"
+                  ? pageData.scGcImages[0].scImageEn._path
+                  : pageData.scGcImages[0].scImageFr._path
+              }`}
+              alt={
+                props.locale === "en"
+                  ? pageData.scGcImages[0].scImageAltTextEn
+                  : pageData.scGcImages[0].scImageAltTextFr
+              }
+              width={575}
+              height={59}
+            />
+          </div>
+          <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+            {/* Left Side (English section) */}
+            <div>
+              <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0">
+                <h1
+                  className="font-bold font-display mb-4"
+                  data-testid="heading-en"
+                >
+                  {errorTitle}
+                </h1>
+                {statusCode ? (
                   <p
-                    className="font-body text-p font-bold mb-4 leading-30px"
-                    data-testid="errormessage-en"
+                    className="font-bold font-body mb-8"
+                    data-testid="statuscode-en"
                   >
-                    {errorMessage}
+                    {pageData.scContentEn.json[2].content[0].value} {statusCode}
                   </p>
-                  {errorMessage === "Wrong URL" ? (
-                    <>
-                      {/* Wrong URL English Section */}
-                      <p className="font-body text-sm leading-30px mb-5">
-                        {pageData.scContentEn.json[3].content[0].value}
-                      </p>
-                      <ul>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            {pageData.scContentEn.json[4].content[0].value}
-                          </p>
-                        </li>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            {pageData.scContentEn.json[5].content[0].value}
-                            <a
-                              href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
-                              className="text-custom-blue-link underline"
-                            >
-                              {
-                                process.env
-                                  .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
-                              }
-                            </a>{" "}
-                            {pageData.scContentEn.json[6].content[0].value}
-                          </p>
-                        </li>
-                      </ul>
-                      <p className="font-body text-sm leading-30px mt-5">
-                        {pageData.scContentEn.json[7].content[0].value}
-                      </p>
-                    </>
-                  ) : errorMessage === "Expired URL" ? (
-                    <>
-                      {/* Expired URL English Section */}
-                      <p className="font-body text-sm leading-30px mb-5">
-                        {pageData.scContentEn.json[8].content[0].value}
-                      </p>
-                      <ul>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            <Link
-                              href="/en/home"
-                              locale={false}
-                              className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
-                            >
-                              {pageData.scContentEn.json[9].content[0].value}
-                            </Link>{" "}
-                            {pageData.scContentEn.json[9].content[1].value}
-                          </p>
-                        </li>
-                      </ul>
-                      <p className="font-body text-sm leading-30px mt-5">
-                        {pageData.scContentEn.json[7].content[0].value}
-                      </p>
-                    </>
-                  ) : (
-                    /* General Error English Section */
-                    <div className="flex">
-                      <span className="error404-link" />
-                      <p className="font-body text-sm leading-30px">
-                        {pageData.scContentEn.json[10].content[0].value}
-                        <Link
-                          href="/en/home"
-                          locale={false}
-                          className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
-                        >
-                          {pageData.scContentEn.json[10].content[1].value}
-                        </Link>
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center justify-center circle-background my-8 lg:mt-0 lightbulb-bg">
-                <span className="relative lightbulb">
-                  <img
-                    src={`https://www.canada.ca${
-                      props.locale === "en"
-                        ? pageData.scImageList[0].scImageEn._path
-                        : pageData.scImageList[0].scImageFr._path
-                    }`}
-                    alt=""
-                  />
-                </span>
-              </div>
-              {/* Right Side (French section) */}
-              <div>
-                <div
-                  className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0"
-                  lang="fr"
+                ) : (
+                  ""
+                )}
+                <p
+                  className="font-body text-p font-bold mb-4 leading-30px"
+                  data-testid="errormessage-en"
                 >
-                  <h1
-                    className="font-bold font-display mb-4"
-                    data-testid="heading-fr"
-                  >
-                    {errorTitleFr}
-                  </h1>
-                  {statusCode ? (
-                    <p
-                      className="font-bold font-body mb-8"
-                      data-testid="statuscode-fr"
-                    >
-                      {pageData.scContentFr.json[2].content[0].value}{" "}
-                      {statusCode}
+                  {errorMessage}
+                </p>
+                {errorMessage === "Wrong URL" ? (
+                  <>
+                    {/* Wrong URL English Section */}
+                    <p className="font-body text-sm leading-30px mb-5">
+                      {pageData.scContentEn.json[3].content[0].value}
+                    </p>
+                    <ul>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          {pageData.scContentEn.json[4].content[0].value}
+                        </p>
+                      </li>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          {pageData.scContentEn.json[5].content[0].value}
+                          <a
+                            href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
+                            className="text-custom-blue-link underline"
+                          >
+                            {
+                              process.env
+                                .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
+                            }
+                          </a>{" "}
+                          {pageData.scContentEn.json[6].content[0].value}
+                        </p>
+                      </li>
+                    </ul>
+                    <p className="font-body text-sm leading-30px mt-5">
+                      {pageData.scContentEn.json[7].content[0].value}
+                    </p>
+                  </>
+                ) : errorMessage === "Expired URL" ? (
+                  <>
+                    {/* Expired URL English Section */}
+                    <p className="font-body text-sm leading-30px mb-5">
+                      {pageData.scContentEn.json[8].content[0].value}
+                    </p>
+                    <ul>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          <Link
+                            href="/en/home"
+                            locale={false}
+                            className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+                          >
+                            {pageData.scContentEn.json[9].content[0].value}
+                          </Link>{" "}
+                          {pageData.scContentEn.json[9].content[1].value}
+                        </p>
+                      </li>
+                    </ul>
+                    <p className="font-body text-sm leading-30px mt-5">
+                      {pageData.scContentEn.json[7].content[0].value}
                     </p>
-                  ) : (
-                    ""
-                  )}
+                  </>
+                ) : (
+                  /* General Error English Section */
+                  <div className="flex">
+                    <span className="error404-link" />
+                    <p className="font-body text-sm leading-30px">
+                      {pageData.scContentEn.json[10].content[0].value}
+                      <Link
+                        href="/en/home"
+                        locale={false}
+                        className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+                      >
+                        {pageData.scContentEn.json[10].content[1].value}
+                      </Link>
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center justify-center circle-background my-8 lg:mt-0 lightbulb-bg">
+              <span className="relative lightbulb">
+                <img
+                  src={`https://www.canada.ca${
+                    props.locale === "en"
+                      ? pageData.scImageList[0].scImageEn._path
+                      : pageData.scImageList[0].scImageFr._path
+                  }`}
+                  alt=""
+                />
+              </span>
+            </div>
+            {/* Right Side (French section) */}
+            <div>
+              <div
+                className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0"
+                lang="fr"
+              >
+                <h1
+                  className="font-bold font-display mb-4"
+                  data-testid="heading-fr"
+                >
+                  {errorTitleFr}
+                </h1>
+                {statusCode ? (
                   <p
-                    className="font-body text-p font-bold mb-4 leading-30px"
-                    data-testid="errormessage-fr"
+                    className="font-bold font-body mb-8"
+                    data-testid="statuscode-fr"
                   >
-                    {errorMessageFr}
+                    {pageData.scContentFr.json[2].content[0].value} {statusCode}
                   </p>
-                  {errorMessageFr === "URL erronée" ? (
-                    <>
-                      {/* Wrong URL French Section */}
-                      <p className="font-body text-sm leading-30px mb-5">
-                        {pageData.scContentFr.json[3].content[0].value}
-                      </p>
-                      <ul>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            {pageData.scContentFr.json[4].content[0].value}
-                          </p>
-                        </li>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            {pageData.scContentFr.json[5].content[0].value}
-                            <a
-                              href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
-                              className="text-custom-blue-link underline"
-                            >
-                              {
-                                process.env
-                                  .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
-                              }
-                            </a>{" "}
-                            {pageData.scContentFr.json[6].content[0].value}
-                          </p>
-                        </li>
-                      </ul>
-                      <p className="font-body text-sm leading-30px mt-5">
-                        {pageData.scContentFr.json[7].content[0].value}
-                      </p>
-                    </>
-                  ) : errorMessageFr === "URL expirée" ? (
-                    <>
-                      {/* Expired URL French Section */}
-                      <p className="font-body text-sm leading-30px mb-5">
-                        {pageData.scContentFr.json[8].content[0].value}
-                      </p>
-                      <ul>
-                        <li className="flex">
-                          <span className="error404-link" />
-                          <p className="font-body text-sm leading-30px">
-                            <Link
-                              href="/fr/accueil"
-                              locale={false}
-                              className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
-                            >
-                              {pageData.scContentFr.json[9].content[0].value}
-                            </Link>
-                            {pageData.scContentFr.json[9].content[1].value}
-                          </p>
-                        </li>
-                      </ul>
-                      <p className="font-body text-sm leading-30px mt-5">
-                        {pageData.scContentFr.json[7].content[0].value}
-                      </p>
-                    </>
-                  ) : (
-                    /* General Error French Section */
-                    <div className="flex">
-                      <span className="error404-link" />
-                      <p className="font-body text-sm leading-30px">
-                        {pageData.scContentFr.json[10].content[0].value}
-                        <Link
-                          href="/fr/accueil"
-                          locale={false}
-                          className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
-                        >
-                          {pageData.scContentFr.json[10].content[1].value}
-                        </Link>
-                      </p>
-                    </div>
-                  )}
-                </div>
+                ) : (
+                  ""
+                )}
+                <p
+                  className="font-body text-p font-bold mb-4 leading-30px"
+                  data-testid="errormessage-fr"
+                >
+                  {errorMessageFr}
+                </p>
+                {errorMessageFr === "URL erronée" ? (
+                  <>
+                    {/* Wrong URL French Section */}
+                    <p className="font-body text-sm leading-30px mb-5">
+                      {pageData.scContentFr.json[3].content[0].value}
+                    </p>
+                    <ul>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          {pageData.scContentFr.json[4].content[0].value}
+                        </p>
+                      </li>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          {pageData.scContentFr.json[5].content[0].value}
+                          <a
+                            href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
+                            className="text-custom-blue-link underline"
+                          >
+                            {
+                              process.env
+                                .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
+                            }
+                          </a>{" "}
+                          {pageData.scContentFr.json[6].content[0].value}
+                        </p>
+                      </li>
+                    </ul>
+                    <p className="font-body text-sm leading-30px mt-5">
+                      {pageData.scContentFr.json[7].content[0].value}
+                    </p>
+                  </>
+                ) : errorMessageFr === "URL expirée" ? (
+                  <>
+                    {/* Expired URL French Section */}
+                    <p className="font-body text-sm leading-30px mb-5">
+                      {pageData.scContentFr.json[8].content[0].value}
+                    </p>
+                    <ul>
+                      <li className="flex">
+                        <span className="error404-link" />
+                        <p className="font-body text-sm leading-30px">
+                          <Link
+                            href="/fr/accueil"
+                            locale={false}
+                            className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+                          >
+                            {pageData.scContentFr.json[9].content[0].value}
+                          </Link>
+                          {pageData.scContentFr.json[9].content[1].value}
+                        </p>
+                      </li>
+                    </ul>
+                    <p className="font-body text-sm leading-30px mt-5">
+                      {pageData.scContentFr.json[7].content[0].value}
+                    </p>
+                  </>
+                ) : (
+                  /* General Error French Section */
+                  <div className="flex">
+                    <span className="error404-link" />
+                    <p className="font-body text-sm leading-30px">
+                      {pageData.scContentFr.json[10].content[0].value}
+                      <Link
+                        href="/fr/accueil"
+                        locale={false}
+                        className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+                      >
+                        {pageData.scContentFr.json[10].content[1].value}
+                      </Link>
+                    </p>
+                  </div>
+                )}
               </div>
             </div>
-          </section>
-        </div>
-        <footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
-          <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
-            <ActionButton
-              id="errorTopOfPageButton"
-              href="#"
-              custom="text-left w-32 flex flex-col lg:hidden"
-              text="Top of page / Haut de la page"
-              icon="icon-up-caret"
-              iconEnd
-            />
-            <span className="relative footer-logo">
-              <img
-                src={`https://www.canada.ca${
-                  props.locale === "en"
-                    ? pageData.scGcImages[1].scImageEn._path
-                    : pageData.scGcImages[1].scImageFr._path
-                }`}
-                alt={
-                  props.locale === "en"
-                    ? pageData.scGcImages[1].scImageAltTextEn
-                    : pageData.scGcImages[1].scImageAltTextFr
-                }
-              />
-            </span>
           </div>
-        </footer>
-      </main>
+        </section>
+      </div>
+      <footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
+        <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
+          <ActionButton
+            id="errorTopOfPageButton"
+            href="#"
+            custom="text-left w-32 flex flex-col lg:hidden"
+            text="Top of page / Haut de la page"
+            icon="icon-up-caret"
+            iconEnd
+          />
+          <span className="relative footer-logo">
+            <img
+              src={`https://www.canada.ca${
+                props.locale === "en"
+                  ? pageData.scGcImages[1].scImageEn._path
+                  : pageData.scGcImages[1].scImageFr._path
+              }`}
+              alt={
+                props.locale === "en"
+                  ? pageData.scGcImages[1].scImageAltTextEn
+                  : pageData.scGcImages[1].scImageAltTextFr
+              }
+            />
+          </span>
+        </div>
+      </footer>
     </>
   );
 }
diff --git a/pages/index.js b/pages/index.js
index 83ada1c8ae..c6dbc68195 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -114,7 +114,7 @@ export default function Index(props) {
           content="cJ7yrE6jUDOrRFwPgxPanWrgaRqI9l0qG0F9rqFhZxM"
         />
       </Head>
-      <main className="h-full flex justify-center">
+      <div className="h-full flex justify-center">
         <div className="splash-cta fixed flex flex-col sm:justify-center sm:items-center">
           <div className="z-10 bg-white h-auto min-w-300px w-300px xl:w-500px">
             <h1 className="sr-only">alpha.service.canada.ca</h1>
@@ -180,7 +180,7 @@ export default function Index(props) {
             />
           </div>
         </div>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/pages/notsupported.js b/pages/notsupported.js
index 10700daa79..50c37e3554 100644
--- a/pages/notsupported.js
+++ b/pages/notsupported.js
@@ -31,124 +31,121 @@ export default function notSupported(props) {
   }
   return (
     <>
-      <main className="min-h-screen relative">
-        <Head>
-          {/* Primary HTML Meta Tags */}
-          <title data-gc-analytics-error="notSupported">
-            {pageData.scContentEn.json[0].content[0].value} |{" "}
-            {pageData.scContentFr.json[0].content[0].value}
-          </title>
-          <meta
-            name="description"
-            content="Error message stating that the site will not work with Internet Explorer."
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
-          <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <Head>
+        {/* Primary HTML Meta Tags */}
+        <title data-gc-analytics-error="notSupported">
+          {pageData.scContentEn.json[0].content[0].value} |{" "}
+          {pageData.scContentFr.json[0].content[0].value}
+        </title>
+        <meta
+          name="description"
+          content="Error message stating that the site will not work with Internet Explorer."
+        />
+        <meta name="author" content="Service Canada" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
 
-          {/* DCMI Meta Tags */}
-          <meta
-            property="dcterms:title"
-            lang="en"
-            content="Sorry, this site will not work with Internet Explorer"
-          />
-          <meta
-            property="dcterms:title"
-            lang="fr"
-            content="Désolé, ce site ne fonctionne pas avec Internet Explorer"
-          />
-          <meta
-            property="dcterms:description"
-            lang="en"
-            content="Error message stating that the site will not work with Internet Explorer."
-          />
-          <meta
-            property="dcterms:description"
-            lang="fr"
-            content="Message d'erreur indiquant que le site ne fonctionne pas avec Internet Explorer."
-          />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2"
-          />
-          <meta
-            name="dcterms.creator"
-            content={
-              props.locale === "en"
-                ? "Employment and Social Development Canada"
-                : "Emploi et Développement social Canada"
-            }
-          />
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta
-            property="dcterms:subject"
-            lang="fr"
-            title="gccore"
-            content="GV Gouvernement et vie politique;Services gouvernementaux"
-          />
-          <meta
-            property="dcterms:subject"
-            lang="en"
-            title="gccore"
-            content="GV Government and Politics;Government services"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2021-11-25" />
-          <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
-          <meta property="dcterms:issued" content="2021-11-25" />
-          <meta property="dcterms:modified" content="2021-12-16" />
+        {/* DCMI Meta Tags */}
+        <meta
+          property="dcterms:title"
+          lang="en"
+          content="Sorry, this site will not work with Internet Explorer"
+        />
+        <meta
+          property="dcterms:title"
+          lang="fr"
+          content="Désolé, ce site ne fonctionne pas avec Internet Explorer"
+        />
+        <meta
+          property="dcterms:description"
+          lang="en"
+          content="Error message stating that the site will not work with Internet Explorer."
+        />
+        <meta
+          property="dcterms:description"
+          lang="fr"
+          content="Message d'erreur indiquant que le site ne fonctionne pas avec Internet Explorer."
+        />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2"
+        />
+        <meta
+          name="dcterms.creator"
+          content={
+            props.locale === "en"
+              ? "Employment and Social Development Canada"
+              : "Emploi et Développement social Canada"
+          }
+        />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta
+          property="dcterms:subject"
+          lang="fr"
+          title="gccore"
+          content="GV Gouvernement et vie politique;Services gouvernementaux"
+        />
+        <meta
+          property="dcterms:subject"
+          lang="en"
+          title="gccore"
+          content="GV Government and Politics;Government services"
+        />
+        <meta name="dcterms.issued" title="W3CDTF" content="2021-11-25" />
+        <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+        <meta property="dcterms:issued" content="2021-11-25" />
+        <meta property="dcterms:modified" content="2021-12-16" />
 
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca/" +
-              `${props.locale}` +
-              "/notsupported"
-            }
-          />
-          <meta
-            property="og:title"
-            content={`Browser not supported — ${t("siteTitle")}`}
-          />
-          <meta
-            property="og:description"
-            content="Sorry, this site will not work with Internet Explorer | Désolé, ce
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
+        <meta
+          property="og:url"
+          content={
+            "https://alpha.service.canada.ca/" +
+            `${props.locale}` +
+            "/notsupported"
+          }
+        />
+        <meta
+          property="og:title"
+          content={`Browser not supported — ${t("siteTitle")}`}
+        />
+        <meta
+          property="og:description"
+          content="Sorry, this site will not work with Internet Explorer | Désolé, ce
             site ne fonctionne pas avec Internet Explorer"
-          />
-          <meta property="og:image" content={`${t("metaImage")}`} />
-          <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+        />
+        <meta property="og:image" content={`${t("metaImage")}`} />
+        <meta property="og:image:alt" content={`${t("siteTitle")}`} />
 
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca/" +
-              `${props.locale}` +
-              "/notsupported"
-            }
-          />
-          <meta
-            property="twitter:title"
-            content={`Browser not supported — ${t("siteTitle")}`}
-          />
-          <meta name="twitter:creator" content="Service Canada" />
-          <meta
-            property="twitter:description"
-            content="Sorry, this site will not work with Internet Explorer | Désolé, ce
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={
+            "https://alpha.service.canada.ca/" +
+            `${props.locale}` +
+            "/notsupported"
+          }
+        />
+        <meta
+          property="twitter:title"
+          content={`Browser not supported — ${t("siteTitle")}`}
+        />
+        <meta name="twitter:creator" content="Service Canada" />
+        <meta
+          property="twitter:description"
+          content="Sorry, this site will not work with Internet Explorer | Désolé, ce
             site ne fonctionne pas avec Internet Explorer"
-          />
-          <meta property="twitter:image" content={`${t("metaImage")}`} />
-          <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
-        </Head>
+        />
+        <meta property="twitter:image" content={`${t("metaImage")}`} />
+        <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+      </Head>
+      <div className="min-h-screen relative">
         <section className="xs:px-0 lg:mx-auto lg:px-6 container">
           <div className="pt-6">
             <img
@@ -465,7 +462,7 @@ export default function notSupported(props) {
             </span>
           </div>
         </footer>
-      </main>
+      </div>
     </>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index c7ee96f6e5..e5f1db5aa6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans:wght@400;700&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -487,6 +485,7 @@ html {
 }
 
 .modal-header {
+  @apply font-display;
   display: flex;
   justify-content: space-between;
   min-width: 290px;
@@ -532,7 +531,7 @@ html {
 }
 
 .modal-title {
-  font-family: "Lato";
+  @apply font-display;
   font-weight: 700;
   font-size: 36px;
   line-height: 40px;
@@ -541,6 +540,7 @@ html {
 }
 
 .modal-body {
+  @apply font-body;
   display: flex;
   width: 95%;
   margin-top: 1rem;
diff --git a/tailwind.config.js b/tailwind.config.js
index 4d4c7d1998..9101e4ba5f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,9 +36,9 @@ module.exports = {
   darkMode: "class",
   theme: {
     fontFamily: {
-      header: ["Lato", "font-serif"],
-      display: ["Lato"],
-      body: ["Noto sans"],
+      header: ["var(--font-lato)", "font-serif"],
+      display: ["var(--font-lato)"],
+      body: ["var(--font-notoSans)"],
     },
     fontSize: {
       xxs: ["12px", "16px"],

From 34f40a245d0243dde95456c28e211fe880c9686f Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Thu, 16 May 2024 15:10:38 -0400
Subject: [PATCH 13/26] added on click test-case for ImageWithCollapse.test

---
 .../fragment_components/ImageWithCollapse.test.js     | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
index 92483f7c91..5f3bcf5ddf 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 import ImageWithCollapse from "./ImageWithCollapse";
 import { Default } from "./ImageWithCollapse.stories.js";
 import { axe, toHaveNoViolations } from "jest-axe";
+import { userEvent } from "../../../node_modules/@storybook/test/dist/index";
 
 expect.extend(toHaveNoViolations);
 
@@ -13,6 +14,16 @@ describe("ImageWithCollapse", () => {
     expect(
       screen.getByText((content) => content.startsWith("Example Title"))
     ).toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("on click renders Collapse component with default props", async () => {
+    const { container } = render(<ImageWithCollapse {...Default.args} />);
+    const collapse = screen.getByText((content) =>
+      content.startsWith("Example Title")
+    );
+    userEvent.click(collapse);
     expect(
       screen.getByText((content) => content.startsWith("Every"))
     ).toBeInTheDocument();

From 409c45bde4b9926280ed5096d77e8a899ee263e0 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Thu, 16 May 2024 15:23:37 -0400
Subject: [PATCH 14/26] small update to ImageWithCollapse.test

---
 .../fragment_components/ImageWithCollapse.test.js           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
index 5f3bcf5ddf..b2a57f25cf 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -11,6 +11,9 @@ describe("ImageWithCollapse", () => {
   test("renders ImageWithCollapse component with default props", async () => {
     const { container } = render(<ImageWithCollapse {...Default.args} />);
     expect(screen.getByAltText("image alt text")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.startsWith("Every"))
+    ).toBeInTheDocument();
     expect(
       screen.getByText((content) => content.startsWith("Example Title"))
     ).toBeInTheDocument();
@@ -24,9 +27,6 @@ describe("ImageWithCollapse", () => {
       content.startsWith("Example Title")
     );
     userEvent.click(collapse);
-    expect(
-      screen.getByText((content) => content.startsWith("Every"))
-    ).toBeInTheDocument();
     expect(
       screen.getByText((content) => content.startsWith("First"))
     ).toBeInTheDocument();

From 4a309cfa2c6cb3827c068c06c3c528e2a9bd8943 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Thu, 23 May 2024 13:50:13 -0400
Subject: [PATCH 15/26] stashing WIP changes for ImageWithCollapse.test.js

---
 .../fragment_components/ImageWithCollapse.test.js   | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
index b2a57f25cf..669e4080e9 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -36,6 +36,19 @@ describe("ImageWithCollapse", () => {
     expect(
       screen.getByText((content) => content.startsWith("Ordered list item 1"))
     ).toBeInTheDocument();
+
+    // const details = screen.getByTestId("details");
+    // const div = screen.getByTestId("div");
+    // const paragraph = div.getElementsByTagName("p")[0];
+    // const unordered = div.getElementsByTagName("ul")[0];
+    // const ordered = div.getElementsByTagName("ol")[0];
+    // userEvent.click(details);
+    // const open = details.hasAttribute("open")
+    // expect( await open).toBeTruthy();
+    // expect(await paragraph).toBeVisible();
+    // expect(await unordered).toBeVisible();
+    // expect(await ordered).toBeVisible();
+
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });

From efc17326d31af897894cca2baaf0945eb4e5f379 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Fri, 31 May 2024 09:50:08 -0400
Subject: [PATCH 16/26] updated title path for fragment components

---
 .../fragment_components/ArticleCTA.stories.js                  | 2 +-
 .../fragment_components/BasicTextWithImage.stories.js          | 2 +-
 .../fragment_renderer/fragment_components/Button.stories.js    | 2 +-
 .../fragment_components/ImageFragment.stories.js               | 2 +-
 .../fragment_components/ImageVerticalLineContent.stories.js    | 3 ++-
 .../fragment_components/ImageWithCollapse.stories.js           | 2 +-
 .../fragment_components/QuoteVerticalLineContent.stories.js    | 3 ++-
 .../fragment_components/TextContent.stories.js                 | 2 +-
 .../fragment_components/TextWithImage.stories.js               | 2 +-
 9 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.stories.js b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
index 84e9d58516..63ac8a5be1 100644
--- a/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
+++ b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ArticleCTA from "./ArticleCTA";
 
 export default {
-  title: "Components/Fragment_Renderer/ArticleCTA",
+  title: "Components/Fragment_Renderer/Fragment_Components/ArticleCTA",
   component: ArticleCTA,
 };
 
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js
index 5b43c8f4c3..f09c719e24 100644
--- a/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js
+++ b/components/fragment_renderer/fragment_components/BasicTextWithImage.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import BasicTextWithImage from "./BasicTextWithImage";
 
 export default {
-  title: "Components/Fragment_Renderer/BasicTextWithImage",
+  title: "Components/Fragment_Renderer/Fragment_Components/BasicTextWithImage",
   component: BasicTextWithImage,
 };
 
diff --git a/components/fragment_renderer/fragment_components/Button.stories.js b/components/fragment_renderer/fragment_components/Button.stories.js
index 3063403426..ade94271e0 100644
--- a/components/fragment_renderer/fragment_components/Button.stories.js
+++ b/components/fragment_renderer/fragment_components/Button.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import Button from "./Button";
 
 export default {
-  title: "Components/Fragment_Renderer/Button",
+  title: "Components/Fragment_Renderer/Fragment_Components/Button",
   component: Button,
 };
 
diff --git a/components/fragment_renderer/fragment_components/ImageFragment.stories.js b/components/fragment_renderer/fragment_components/ImageFragment.stories.js
index ac1045d3ba..769059a226 100644
--- a/components/fragment_renderer/fragment_components/ImageFragment.stories.js
+++ b/components/fragment_renderer/fragment_components/ImageFragment.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ImageFragment from "./ImageFragment";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageFragment",
+  title: "Components/Fragment_Renderer/Fragment_Components/ImageFragment",
   component: ImageFragment,
 };
 
diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js
index 9f68582d35..67bc8a7f16 100644
--- a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js
+++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js
@@ -2,7 +2,8 @@ import * as React from "react";
 import ImageVerticalLineContent from "./ImageVerticalLineContent";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageVerticalLineContent",
+  title:
+    "Components/Fragment_Renderer/Fragment_Components/ImageVerticalLineContent",
   component: ImageVerticalLineContent,
 };
 
diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
index 91542a5ba2..419e3d2399 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import ImageWithCollapse from "./ImageWithCollapse";
 
 export default {
-  title: "Components/Fragment_Renderer/ImageWithCollapse",
+  title: "Components/Fragment_Renderer/Fragment_Components/ImageWithCollapse",
   component: ImageWithCollapse,
 };
 
diff --git a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
index 7c0be892b6..c3e29ba8be 100644
--- a/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
+++ b/components/fragment_renderer/fragment_components/QuoteVerticalLineContent.stories.js
@@ -2,7 +2,8 @@ import * as React from "react";
 import QuoteVerticalLineContent from "./QuoteVerticalLineContent";
 
 export default {
-  title: "Components/Fragment_Renderer/QuoteVerticalLineContent",
+  title:
+    "Components/Fragment_Renderer/Fragment_Components/QuoteVerticalLineContent",
   component: QuoteVerticalLineContent,
 };
 
diff --git a/components/fragment_renderer/fragment_components/TextContent.stories.js b/components/fragment_renderer/fragment_components/TextContent.stories.js
index 9a51b0406f..3b2ae5263e 100644
--- a/components/fragment_renderer/fragment_components/TextContent.stories.js
+++ b/components/fragment_renderer/fragment_components/TextContent.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import TextContent from "./TextContent";
 
 export default {
-  title: "Components/Fragment_Renderer/TextContent",
+  title: "Components/Fragment_Renderer/Fragment_Components/TextContent",
   component: TextContent,
 };
 
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
index 596b26adc7..ed07d59cb1 100644
--- a/components/fragment_renderer/fragment_components/TextWithImage.stories.js
+++ b/components/fragment_renderer/fragment_components/TextWithImage.stories.js
@@ -2,7 +2,7 @@ import * as React from "react";
 import TextWithImage from "./TextWithImage";
 
 export default {
-  title: "Components/Fragment_Renderer/TextWithImage",
+  title: "Components/Fragment_Renderer/Fragment_Components/TextWithImage",
   component: TextWithImage,
 };
 

From 4f3a14f78afeda45c2c663d5b926c513b82f1969 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Fri, 31 May 2024 09:50:55 -0400
Subject: [PATCH 17/26] Created storybook entry for FragmentRender component

---
 .../FragmentRender.stories.js                 | 1249 +++++++++++++++++
 1 file changed, 1249 insertions(+)
 create mode 100644 components/fragment_renderer/FragmentRender.stories.js

diff --git a/components/fragment_renderer/FragmentRender.stories.js b/components/fragment_renderer/FragmentRender.stories.js
new file mode 100644
index 0000000000..255188bd3f
--- /dev/null
+++ b/components/fragment_renderer/FragmentRender.stories.js
@@ -0,0 +1,1249 @@
+import * as React from "react";
+import FragmentRender from "./FragmentRender";
+
+export default {
+  title: "Components/Fragment_Renderer/FragmentRender",
+  component: FragmentRender,
+  locale: "en",
+};
+
+const Template = (args) => <FragmentRender {...args} />;
+
+export const ArticleCTA = Template.bind({});
+export const TextWithImage = Template.bind({});
+export const QuoteVerticalLineContent = Template.bind({});
+export const TextContent = Template.bind({});
+export const Button = Template.bind({});
+export const ImageWithCollapse = Template.bind({});
+
+ArticleCTA.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Feature-v1",
+      },
+      scId: "INFORMATION-ALPHA-SCLABS",
+      scTitleEn: "Information",
+      scTitleFr: "Information",
+      scContentEn: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Alpha:",
+                format: {
+                  variants: ["strong"],
+                },
+              },
+              {
+                nodeType: "text",
+                value:
+                  " Building a draft tool or service and testing it to see if it meets needs.",
+              },
+            ],
+          },
+        ],
+      },
+      scContentFr: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Alpha : ",
+                format: {
+                  variants: ["strong"],
+                },
+              },
+              {
+                nodeType: "text",
+                value:
+                  "Construire une première version d’un outil ou d’un service et le tester pour savoir s’il répond aux besoins.",
+              },
+            ],
+          },
+        ],
+      },
+      scLabsButton: [
+        {
+          scId: "GIVE-FEEDBACK-OAS-ESTIMATOR",
+          scTitleEn: "Give feedback",
+          scTitleFr: "Fournir des commentaires",
+          scDestinationURLEn:
+            "https://srv217.services.gc.ca/ihst4/Intro.aspx?cid=74938e05-8e91-42a9-8e9d-29daf79f6fe0&lc=eng",
+          scDestinationURLFr:
+            "https://srv217.services.gc.ca/ihst4/Intro.aspx?cid=74938e05-8e91-42a9-8e9d-29daf79f6fe0&lc=fra",
+          scButtonType: ["gc:custom/decd-endc/button-type/secondary"],
+        },
+      ],
+    },
+  ],
+};
+
+TextWithImage.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Comp-Content-Image-v1",
+      },
+      scId: "NAVIGATOR-DIFFICULTIES-MAIN",
+      scLabContent: [
+        {
+          scId: "DIFFICULTIES-COMMUNITY-WORKERS",
+          scContentEn: {
+            json: [
+              {
+                nodeType: "header",
+                style: "h1",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Difficulties faced by community workers who help people with their benefits",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Government benefits are designed to improve the lives of Canadians. Many benefits help people based on their health, job, housing, or family situation.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "According to the 2022 Auditor General’s report, accessing these benefits can be hard for many reasons (see ",
+                  },
+                  {
+                    nodeType: "link",
+                    data: {
+                      href: "https://www.oag-bvg.gc.ca/internet/English/parl_oag_202205_01_e_44033.html",
+                    },
+                    value: "Access to Benefits for Hard-to-Reach Populations",
+                  },
+                  {
+                    nodeType: "text",
+                    value: ").",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "The report lists a few of those reasons. It also lists some options available to those who need help with applying.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "The report says that people often rely on community organizations to learn about the help they could receive. We saw a similar trend in other research reports. From that, we concluded that community workers play an important role in helping people get government benefits. So, we decided to learn more about the problems that they face when they carry out this task.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Here are some problems that we identified from our own research studies and other reports.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "It takes time to learn about government benefits",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "We talked to several community workers who said it takes a lot of time and effort to become familiar with government benefits. This is because there are so many of them, they come from different sources, and they have different eligibility criteria.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "They also said it’s hard to understand information on government websites. This was also mentioned in the reports we read.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "It's hard to stay updated on news about benefits",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "From our research, we learned that community workers try to stay updated on news about benefits, but don’t have a good way to do so.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "There isn’t one location that a person can go to see all the updates. Instead, the workers we talked to said that they made their own solutions. Some created news alerts, others subscribed to newsletters. Despite that, they were sure that they were missing some updates.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "It's hard to understand eligibility conditions and the application process",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "The reports we read said that it’s difficult to apply for benefits because applications are long and ask for a lot of information.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "The workers we talked to said that it’s hard to know which forms people need and where to find them.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Complicated eligibility criteria make it hard to know if someone qualifies for a benefit. This can stop people from starting a long application process. Most don’t want to spend the effort if they don’t think they qualify.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "We want to make it easier to understand government benefits",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "To fix the problems identified in our research, we want to make a tool that simplifies information about government benefits.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "This tool will make it easier for anyone to:",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "be aware of benefits ",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "know how to apply ",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "stay updated on changes ",
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "By making this information easier to understand, we believe more people will apply for the benefits to which they are entitled.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+            ],
+          },
+          scContentFr: {
+            json: [
+              {
+                nodeType: "header",
+                style: "h1",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Difficultés rencontrées par les travailleuses et travailleurs communautaires qui aident les gens avec leurs prestations",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Les prestations du gouvernement sont conçues pour améliorer la vie des gens. Plusieurs prestations aident les personnes selon leur état de santé, leur emploi, leur logement ou leur situation familiale.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Selon le rapport de la vérificatrice générale de 2022, l’accès aux prestations peut être difficile pour de nombreuses raisons (voir ",
+                  },
+                  {
+                    nodeType: "link",
+                    data: {
+                      href: "https://www.oag-bvg.gc.ca/internet/Francais/parl_oag_202205_01_f_44033.html",
+                    },
+                    value:
+                      "L’accès aux prestations pour les populations difficiles à joindre",
+                  },
+                  {
+                    nodeType: "text",
+                    value: ").",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Le rapport énumère quelques-unes de ces raisons. Il énumère aussi des options disponibles pour les gens qui ont besoin d’aide pour faire la demande de prestations.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Le rapport explique que les gens ont souvent recours aux organismes communautaires pour en savoir plus sur l'aide qu’ils pourraient recevoir. Nous avons constaté une tendance similaire dans d’autres projets de recherche. Nous en avons conclu que les travailleuses et travailleurs communautaires jouent un rôle important en aidant les gens à obtenir des prestations gouvernementales. Nous avons donc décidé d’en savoir plus sur les obstacles rencontrés lorsqu’ils accomplissent cette tâche.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Voici quelques problèmes que nous avons identifiés dans nos recherches et d’autres rapports. ",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Il faut du temps pour se renseigner sur les prestations",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Nous avons parlé à plusieurs travailleuses et travailleurs communautaires qui ont dit qu’il faut beaucoup de temps et d’efforts pour se familiariser avec les prestations gouvernementales. La raison est qu’elles sont très nombreuses, proviennent de sources différentes et ont des critères d’admissibilité différents.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Ils nous ont aussi dit qu’il est difficile de comprendre l’information sur les sites Web du gouvernement. C'est également ce qui ressort des rapports que nous avons lus.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Il est difficile de se tenir au courant des nouveautés à propos des prestations",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Nos recherches nous ont appris que les travailleuses et travailleurs communautaires essaient de se tenir au courant des nouvelles concernant les prestations, mais n'ont pas de bon moyen de le faire.",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Il n'existe pas d'endroit où l'on peut consulter toutes les mises à jour. Au lieu de cela, les travailleuses et travailleurs auxquels nous avons parlé ont dit qu'ils avaient trouvé leurs propres solutions. Certaines personnes ont créé des alertes, d’autres se sont abonnées à des bulletins d'information. Malgré cela, elles étaient sûres que des mises à jour leur échappaient.",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Il est difficile de comprendre les conditions d'admissibilité et la procédure de demande",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Les rapports que nous avons lus indiquent qu'il est difficile de demander des prestations parce que les formulaires sont longs et exigent beaucoup d'informations.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Les travailleuses et travailleurs auxquels nous avons parlé ont dit qu'il était difficile de savoir de quels formulaires les gens avaient besoin et où les trouver.",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "La complexité des critères d'admissibilité fait qu'il est difficile de savoir si une personne a droit à une prestation. Cela peut empêcher les gens d'entamer une longue procédure de demande. La plupart ne veulent pas faire cet effort s'ils pensent qu'ils n'ont pas droit à une prestation. ",
+                  },
+                ],
+              },
+              {
+                nodeType: "header",
+                style: "h2",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Nous voulons faciliter la compréhension des prestations gouvernementales ",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Pour résoudre les problèmes identifiés dans nos recherches, nous voulons créer un outil qui simplifie l'information sur les prestations gouvernementales. ",
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "Cet outil permettra de mieux :",
+                  },
+                ],
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "connaître les prestations;",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "savoir comment présenter une demande;",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "rester au courant des changements.",
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "En rendant ces informations plus faciles à comprendre, nous pensons que plus de personnes demanderont les prestations auxquelles elles ont droit. ",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+      scLabImage: {
+        scId: "COMMUNITY-WORKERS-IMAGE",
+        scImageEn: {
+          _publishUrl:
+            "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/community-workers.jpg",
+          width: 555,
+          height: 321,
+        },
+        scImageFr: {
+          _publishUrl:
+            "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/community-workers.jpg",
+          width: 555,
+          height: 321,
+        },
+        scImageMobileEn: null,
+        scImageMobileFr: null,
+        scImageAltTextEn: "Community workers helping people",
+        scImageAltTextFr:
+          "Travailleuses et travailleurs communautaires qui aident des gens",
+        scImageCaptionEn: {
+          json: null,
+        },
+        scImageCaptionFr: {
+          json: null,
+        },
+      },
+      scLabLayout: "default",
+    },
+  ],
+};
+
+TextContent.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Content-v1",
+      },
+      _path:
+        "/content/dam/decd-endc/content-fragments/sclabs/components/tooltips/information-alpha",
+      scId: "INFORMATION-ALPHA-SCLABS",
+      scTitleEn: "Information",
+      scTitleFr: "Information",
+      scContentEn: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Alpha:",
+                format: {
+                  variants: ["strong"],
+                },
+              },
+              {
+                nodeType: "text",
+                value:
+                  " Building a draft tool or service and testing it to see if it meets needs.",
+              },
+            ],
+          },
+        ],
+      },
+      scContentFr: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Alpha : ",
+                format: {
+                  variants: ["strong"],
+                },
+              },
+              {
+                nodeType: "text",
+                value:
+                  "Construire une première version d’un outil ou d’un service et le tester pour savoir s’il répond aux besoins.",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+
+ImageWithCollapse.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Image-v1",
+      },
+      scId: "NEWS-IMAGE",
+      scImageEn: {
+        _publishUrl:
+          "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/news-en.png",
+        width: 1363,
+        height: 890,
+      },
+      scImageFr: {
+        _publishUrl:
+          "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/news-fr.png",
+        width: 1363,
+        height: 890,
+      },
+      scImageMobileEn: null,
+      scImageMobileFr: null,
+      scImageAltTextEn: "Benefit news and updates page",
+      scImageAltTextFr: "Page Nouvelles et mises à jour sur les prestations",
+      scImageCaptionEn: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Figure 1",
+              },
+            ],
+          },
+        ],
+      },
+      scImageCaptionFr: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "Figure 1",
+              },
+            ],
+          },
+        ],
+      },
+      scLongDescHeadingEn: "Text version of the image Benefit news and updates",
+      scLongDescHeadingFr:
+        "Version textuelle de l'image Nouvelles et mises à jour sur les prestations",
+      scLongDescEn: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value: "The Benefit news and updates page contains 3 sections:",
+              },
+            ],
+          },
+          {
+            nodeType: "unordered-list",
+            content: [
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "a search bar to search by benefit name or source",
+                  },
+                ],
+              },
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value: "a list of benefits to filter the news:",
+                  },
+                  {
+                    nodeType: "unordered-list",
+                    content: [
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Old Age Security",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Guaranteed Income Supplement",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Allowance for the survivor",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Canada Pension Plan",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Post-Retirement Benefit",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Employment Insurance",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Canada Dental Benefit",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Home and Community program care",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Disability tax credit",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Refund of Federal Excise Tax on Gas",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "a list of benefit news and updates with details. For example:",
+                  },
+                  {
+                    nodeType: "unordered-list",
+                    content: [
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Service disruption - Service Canada June 29, 2023 (update)",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "OAS pension amounts - July to September 2023 (update)",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Grocery rebate will be issued July 5, 2023 (new)",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      scLongDescFr: {
+        json: [
+          {
+            nodeType: "paragraph",
+            content: [
+              {
+                nodeType: "text",
+                value:
+                  "La page Nouvelles et mises à jour sur les prestations contient 3 sections :",
+              },
+            ],
+          },
+          {
+            nodeType: "unordered-list",
+            content: [
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "une barre de recherche où on peut rechercher par le nom de la prestation ou la source",
+                  },
+                ],
+              },
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "une liste de prestations pour filtrer les nouvelles :",
+                  },
+                  {
+                    nodeType: "unordered-list",
+                    content: [
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Sécurité de la vieillesse",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Supplément de revenu garanti",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Allocation au survivant",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Régime de pensions du Canada",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Post retirement benefit",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Assurance-emploi",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value: "Prestation dentaire canadienne",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Programme de soins à domicile et en milieu communautaire",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Crédit d’impôt pour les personnes handicapées",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Remboursement de la taxe d'accise sur l'essence",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                nodeType: "list-item",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "une liste de nouvelles et de mises à jour. Par exemple :",
+                  },
+                  {
+                    nodeType: "unordered-list",
+                    content: [
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Interruption de service : Service Canada, 29 juin 2023 (mise à jour)",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Montant de la pension de la Sécurité de la vieillesse de juillet à septembre 2023 (mise à jour)",
+                          },
+                        ],
+                      },
+                      {
+                        nodeType: "list-item",
+                        content: [
+                          {
+                            nodeType: "text",
+                            value:
+                              "Le remboursement pour l’épicerie sera émis le 5 juillet 2023 (nouvelle)",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+
+Button.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Button-v1",
+      },
+      scId: "SIGN-IN-MSCA-BUTTON",
+      scTitleEn: "Sign in to My Service Canada Account",
+      scTitleFr: "Se connecter à Mon dossier Service Canada",
+      scDestinationURLEn:
+        "https://www.canada.ca/en/employment-social-development/services/my-account.html",
+      scDestinationURLFr:
+        "https://www.canada.ca/fr/emploi-developpement-social/services/mon-dossier.html",
+      scButtonType: ["gc:custom/decd-endc/button-type/primary"],
+    },
+  ],
+};
+
+QuoteVerticalLineContent.args = {
+  locale: "en",
+  fragments: [
+    {
+      _model: {
+        title: "SCLabs-Comp-Content-v1",
+      },
+      scId: "ESTIMATOR-FUTURE-ESTIMATE-COMMENT-1",
+      scLabContent: [
+        {
+          scContentEn: {
+            json: [
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "I didn’t like having to change my birth year to get an estimate",
+                  },
+                ],
+              },
+            ],
+          },
+          scContentFr: {
+            json: [
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Je n’aimais pas devoir changer mon année de naissance pour avoir une estimation",
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        {
+          scContentEn: {
+            json: [
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "We now generate results that give future estimates to those who aren’t eligible yet. ",
+                  },
+                ],
+              },
+            ],
+          },
+          scContentFr: {
+            json: [
+              {
+                nodeType: "paragraph",
+                content: [
+                  {
+                    nodeType: "text",
+                    value:
+                      "Nous générons maintenant des résultats qui donnent des estimations futures aux personnes qui ne sont pas encore admissibles. ",
+                  },
+                  {
+                    nodeType: "line-break",
+                    content: [],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+      scLabLayout: "quote",
+    },
+  ],
+};

From d31ae72f8f1ab4dd4b90be82f4b947a04674e90f Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Fri, 31 May 2024 09:51:25 -0400
Subject: [PATCH 18/26] created unit test for FragmentRender component

---
 .../fragment_renderer/FragmentRender.test.js  | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 components/fragment_renderer/FragmentRender.test.js

diff --git a/components/fragment_renderer/FragmentRender.test.js b/components/fragment_renderer/FragmentRender.test.js
new file mode 100644
index 0000000000..3208b292b1
--- /dev/null
+++ b/components/fragment_renderer/FragmentRender.test.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FragmentRender from "./FragmentRender";
+import { axe, toHaveNoViolations } from "jest-axe";
+import {
+  ArticleCTA,
+  TextWithImage,
+  QuoteVerticalLineContent,
+  ImageWithCollapse,
+  Button,
+  TextContent,
+} from "./FragmentRender.stories";
+expect.extend(toHaveNoViolations);
+
+describe("FragmentRender", () => {
+  it("renders ArticleCTA component", async () => {
+    const { container } = render(<FragmentRender {...ArticleCTA.args} />);
+    expect(screen.getByText((content) => content.startsWith("Information")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders TextWithImage component", async () => {
+    const { container } = render(<FragmentRender {...TextWithImage.args} />);
+    expect(screen.getByText("It takes time to learn about government benefits"))
+      .toBeInTheDocument;
+    expect(screen.getByAltText("Community workers helping people"))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders QuoteVerticalLineContent component", async () => {
+    const { container } = render(
+      <FragmentRender {...QuoteVerticalLineContent.args} />
+    );
+    expect(
+      screen.getByText(
+        "I didn’t like having to change my birth year to get an estimate"
+      )
+    ).toBeInTheDocument;
+    expect(screen.getByText((content) => content.startsWith("We now")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders Button component", async () => {
+    const { container } = render(<FragmentRender {...Button.args} />);
+    expect(screen.getByText((content) => content.startsWith("Sign in")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders TextContent component", async () => {
+    const { container } = render(<FragmentRender {...TextContent.args} />);
+    expect(screen.getByText((content) => content.startsWith("Alpha")))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders ImageWithCollapse component", async () => {
+    const { container } = render(
+      <FragmentRender {...ImageWithCollapse.args} />
+    );
+    expect(screen.getByText((content) => content.startsWith("Text version")))
+      .toBeInTheDocument;
+    expect(screen.getByAltText("Benefit news and updates page"))
+      .toBeInTheDocument;
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

From fa4a7340708cf10a2ac123a19949ce04be21731e Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Thu, 23 May 2024 13:01:35 -0400
Subject: [PATCH 19/26] add missing ISR_ENABLED ARG to Dockerfile (#1030)

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index a5fd8a2742..576f4377f9 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,6 +22,7 @@ ARG NEXT_PUBLIC_BUILD_DATE
 ARG NEXT_PUBLIC_BUILD_ID
 ARG AEM_GRAPHQL_ENDPOINT
 ARG ADOBE_ANALYTICS_URL=""
+ARG ISR_ENABLED
 ARG THANK_YOU_EMAIL
 ARG NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
 ARG ENVIRONMENT

From bb62eff773327ce72e72e529f77ab9dca700c568 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Thu, 23 May 2024 13:20:32 -0400
Subject: [PATCH 20/26] add nullish coalescing operator to error page AA check
 (#1024)

---
 pages/error.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/error.js b/pages/error.js
index e522e84a06..dd25dd9c81 100644
--- a/pages/error.js
+++ b/pages/error.js
@@ -438,7 +438,7 @@ export const getStaticProps = async ({ locale }) => {
   return {
     props: {
       locale: locale,
-      adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+      adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? null,
       ...(await serverSideTranslations("en", ["common"])),
       ...(await serverSideTranslations("fr", ["common"])),
       pageData: data.sclabsErrorpageV1ByPath,

From 063a3c7c0883c866753757032f154b34abaccf45 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Thu, 23 May 2024 13:21:17 -0400
Subject: [PATCH 21/26] upgrade nextjs version to fix issue with sharp and
 output:standalone (#1025)

---
 package.json |   2 +-
 yarn.lock    | 145 ++++++++++++++++++++++++++++++---------------------
 2 files changed, 87 insertions(+), 60 deletions(-)

diff --git a/package.json b/package.json
index aec48eda3c..9059a71909 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "i18next": "^23.9.0",
     "i18next-http-backend": "^1.4.5",
     "joi": "^17.12.3",
-    "next": "^14.0.1",
+    "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index 514a89cf42..c38fdd48e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2938,72 +2938,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/env@npm:14.0.1"
-  checksum: e0dad5ba1e68e05563d11524dd8d866a52e9c414d3cfb34bbc9d3c2618cff4bf0696effc3851249dcbcf76322c2c8fa3e413a7f5729881ea56dfcfbe3fe992d3
+"@next/env@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/env@npm:14.2.3"
+  checksum: 82b445331d46b4896dc86c0e33a7eaaa6f6abfd2408d49e1cb90fbfd6b26c698ea8e69c911ffe597e30fd8294db4e3445cde44b0771eabbfcd13663a9832a397
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-darwin-arm64@npm:14.0.1"
+"@next/swc-darwin-arm64@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-darwin-arm64@npm:14.2.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-darwin-x64@npm:14.0.1"
+"@next/swc-darwin-x64@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-darwin-x64@npm:14.2.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.0.1"
+"@next/swc-linux-arm64-gnu@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-linux-arm64-musl@npm:14.0.1"
+"@next/swc-linux-arm64-musl@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-arm64-musl@npm:14.2.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-linux-x64-gnu@npm:14.0.1"
+"@next/swc-linux-x64-gnu@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-x64-gnu@npm:14.2.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-linux-x64-musl@npm:14.0.1"
+"@next/swc-linux-x64-musl@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-x64-musl@npm:14.2.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.0.1"
+"@next/swc-win32-arm64-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.0.1"
+"@next/swc-win32-ia32-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:14.0.1":
-  version: 14.0.1
-  resolution: "@next/swc-win32-x64-msvc@npm:14.0.1"
+"@next/swc-win32-x64-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-x64-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4124,7 +4124,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.2, @swc/helpers@npm:^0.5.0":
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:0.5.5":
+  version: 0.5.5
+  resolution: "@swc/helpers@npm:0.5.5"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+    tslib: "npm:^2.4.0"
+  checksum: 1c5ef04f642542212df28c669438f3e0f459dcde7b448a5b1fcafb2e9e4f13e76d8428535a270e91ed123dd2a21189dbed34086b88a8cf68baf84984d6d0e39b
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:^0.5.0":
   version: 0.5.2
   resolution: "@swc/helpers@npm:0.5.2"
   dependencies:
@@ -6504,13 +6521,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001426, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001541, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001587":
+"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001426, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001541, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001587":
   version: 1.0.30001615
   resolution: "caniuse-lite@npm:1.0.30001615"
   checksum: 3dfb48e9b8fbf4d550cf204075b170ef4a5bcbc7faf9e14b03dc7456ac1aec2da1405d4fca808bc72b47a2ca0818d6d138aa62769548472440ff605ad1313719
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001579":
+  version: 1.0.30001618
+  resolution: "caniuse-lite@npm:1.0.30001618"
+  checksum: b5a65a60af4dd089e80487754a8ea82e41ce104222b3c2b849cc34ffb412282817d6bf2791f2a24caaf8c7bbf36b22e5b17a55c1edeabfbe68912de106ab0f59
+  languageName: node
+  linkType: hard
+
 "case-sensitive-paths-webpack-plugin@npm:^2.4.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -12220,28 +12244,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.0.1":
-  version: 14.0.1
-  resolution: "next@npm:14.0.1"
+"next@npm:^14.2.3":
+  version: 14.2.3
+  resolution: "next@npm:14.2.3"
   dependencies:
-    "@next/env": "npm:14.0.1"
-    "@next/swc-darwin-arm64": "npm:14.0.1"
-    "@next/swc-darwin-x64": "npm:14.0.1"
-    "@next/swc-linux-arm64-gnu": "npm:14.0.1"
-    "@next/swc-linux-arm64-musl": "npm:14.0.1"
-    "@next/swc-linux-x64-gnu": "npm:14.0.1"
-    "@next/swc-linux-x64-musl": "npm:14.0.1"
-    "@next/swc-win32-arm64-msvc": "npm:14.0.1"
-    "@next/swc-win32-ia32-msvc": "npm:14.0.1"
-    "@next/swc-win32-x64-msvc": "npm:14.0.1"
-    "@swc/helpers": "npm:0.5.2"
+    "@next/env": "npm:14.2.3"
+    "@next/swc-darwin-arm64": "npm:14.2.3"
+    "@next/swc-darwin-x64": "npm:14.2.3"
+    "@next/swc-linux-arm64-gnu": "npm:14.2.3"
+    "@next/swc-linux-arm64-musl": "npm:14.2.3"
+    "@next/swc-linux-x64-gnu": "npm:14.2.3"
+    "@next/swc-linux-x64-musl": "npm:14.2.3"
+    "@next/swc-win32-arm64-msvc": "npm:14.2.3"
+    "@next/swc-win32-ia32-msvc": "npm:14.2.3"
+    "@next/swc-win32-x64-msvc": "npm:14.2.3"
+    "@swc/helpers": "npm:0.5.5"
     busboy: "npm:1.6.0"
-    caniuse-lite: "npm:^1.0.30001406"
+    caniuse-lite: "npm:^1.0.30001579"
+    graceful-fs: "npm:^4.2.11"
     postcss: "npm:8.4.31"
     styled-jsx: "npm:5.1.1"
-    watchpack: "npm:2.4.0"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
+    "@playwright/test": ^1.41.2
     react: ^18.2.0
     react-dom: ^18.2.0
     sass: ^1.3.0
@@ -12267,11 +12292,13 @@ __metadata:
   peerDependenciesMeta:
     "@opentelemetry/api":
       optional: true
+    "@playwright/test":
+      optional: true
     sass:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: a21dd825cb5cb5d2e9a15eacf4cda3949d49e999c4690f2d2348bb4f270318a075cc78a994e84156364ce9207c04b9136c987261fdf0ec780a5c8f264a6fa5fe
+  checksum: 666c9770206ce693732a6d772297f1ddb3ce72f59862fa4cd104c5536da596026f758c4c9256ea790cf22d1bb8a15e27e5ea9455c948f72a9e3ca61fb745b0f5
   languageName: node
   linkType: hard
 
@@ -14730,7 +14757,7 @@ __metadata:
     jest-environment-jsdom: "npm:^29.7.0"
     joi: "npm:^17.12.3"
     lint-staged: "npm:^11.0.1"
-    next: "npm:^14.0.1"
+    next: "npm:^14.2.3"
     next-i18next: "npm:^14.0.3"
     next-router-mock: "npm:^0.9.3"
     node-mocks-http: "npm:^1.10.1"
@@ -16371,23 +16398,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack@npm:2.4.0, watchpack@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "watchpack@npm:2.4.0"
+"watchpack@npm:^2.2.0, watchpack@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "watchpack@npm:2.4.1"
   dependencies:
     glob-to-regexp: "npm:^0.4.1"
     graceful-fs: "npm:^4.1.2"
-  checksum: 4280b45bc4b5d45d5579113f2a4af93b67ae1b9607cc3d86ae41cdd53ead10db5d9dc3237f24256d05ef88b28c69a02712f78e434cb7ecc8edaca134a56e8cab
+  checksum: 0736ebd20b75d3931f9b6175c819a66dee29297c1b389b2e178bc53396a6f867ecc2fd5d87a713ae92dcb73e487daec4905beee20ca00a9e27f1184a7c2bca5e
   languageName: node
   linkType: hard
 
-"watchpack@npm:^2.2.0, watchpack@npm:^2.4.1":
-  version: 2.4.1
-  resolution: "watchpack@npm:2.4.1"
+"watchpack@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "watchpack@npm:2.4.0"
   dependencies:
     glob-to-regexp: "npm:^0.4.1"
     graceful-fs: "npm:^4.1.2"
-  checksum: 0736ebd20b75d3931f9b6175c819a66dee29297c1b389b2e178bc53396a6f867ecc2fd5d87a713ae92dcb73e487daec4905beee20ca00a9e27f1184a7c2bca5e
+  checksum: 4280b45bc4b5d45d5579113f2a4af93b67ae1b9607cc3d86ae41cdd53ead10db5d9dc3237f24256d05ef88b28c69a02712f78e434cb7ecc8edaca134a56e8cab
   languageName: node
   linkType: hard
 

From b94661a8bc12b43255f73c4bb6434618e1553689 Mon Sep 17 00:00:00 2001
From: Shaun Laughland <22419216+s-laugh@users.noreply.github.com>
Date: Mon, 27 May 2024 09:46:52 -0400
Subject: [PATCH 22/26] [Snyk] Upgrade: react, react-dom (#1026)

* fix: upgrade multiple dependencies with Snyk

Snyk has created this PR to upgrade:
  - react from 18.2.0 to 18.3.1.
    See this package in yarn:
  - react-dom from 18.2.0 to 18.3.1.
    See this package in yarn:

See this project in Snyk:
https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr

* update yarn.lock

---------

Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 package.json |  4 ++--
 yarn.lock    | 38 ++++----------------------------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 9059a71909..a2508d2d1b 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,10 @@
     "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-i18next": "^13.5.0",
     "react-lock-scroll": "^0.1.8",
     "sharp": "^0.33.3",
diff --git a/yarn.lock b/yarn.lock
index c38fdd48e7..78a69f7415 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13879,7 +13879,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -13891,18 +13891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.0"
-  peerDependencies:
-    react: ^18.2.0
-  checksum: ca5e7762ec8c17a472a3605b6f111895c9f87ac7d43a610ab7024f68cd833d08eda0625ce02ec7178cc1f3c957cf0b9273cdc17aa2cd02da87544331c43b1d21
-  languageName: node
-  linkType: hard
-
 "react-element-to-jsx-string@npm:^15.0.0":
   version: 15.0.0
   resolution: "react-element-to-jsx-string@npm:15.0.0"
@@ -13999,7 +13987,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -14008,15 +13996,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: b9214a9bd79e99d08de55f8bef2b7fc8c39630be97c4e29d7be173d14a9a10670b5325e94485f74cd8bff4966ef3c78ee53c79a7b0b9b70cba20aa8973acc694
-  languageName: node
-  linkType: hard
-
 "read-cache@npm:^1.0.0":
   version: 1.0.0
   resolution: "read-cache@npm:1.0.0"
@@ -14582,15 +14561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 0c4557aa37bafca44ff21dc0ea7c92e2dbcb298bc62eae92b29a39b029134f02fb23917d6ebc8b1fa536b4184934314c20d8864d156a9f6357f3398aaf7bfda8
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.2":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"
@@ -14765,10 +14735,10 @@ __metadata:
     postcss-loader: "npm:^6.2.1"
     prettier: "npm:^2.3.2"
     prop-types: "npm:^15.8.1"
-    react: "npm:^18.2.0"
+    react: "npm:^18.3.1"
     react-bootstrap: "npm:^2.10.2"
     react-copy-to-clipboard: "npm:^5.1.0"
-    react-dom: "npm:^18.2.0"
+    react-dom: "npm:^18.3.1"
     react-i18next: "npm:^13.5.0"
     react-lock-scroll: "npm:^0.1.8"
     sharp: "npm:^0.33.3"

From 6d2feb3d759894c92cf8942d0e06e7c7c31b4ea0 Mon Sep 17 00:00:00 2001
From: Shaun Laughland <22419216+s-laugh@users.noreply.github.com>
Date: Mon, 27 May 2024 09:53:23 -0400
Subject: [PATCH 23/26] [Snyk] Upgrade i18next from 23.10.1 to 23.11.3 (#1027)

* fix: upgrade i18next from 23.10.1 to 23.11.3

Snyk has created this PR to upgrade i18next from 23.10.1 to 23.11.3.

See this package in yarn:
i18next

See this project in Snyk:
https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr

* update yarn.lock

---------

Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a2508d2d1b..7b29531152 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "cuid": "^2.1.8",
     "focus-trap-react": "^8.11.2",
     "graphql": "^16.8.1",
-    "i18next": "^23.9.0",
+    "i18next": "^23.11.3",
     "i18next-http-backend": "^1.4.5",
     "joi": "^17.12.3",
     "next": "^14.2.3",
diff --git a/yarn.lock b/yarn.lock
index 78a69f7415..1b23500153 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9894,12 +9894,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next@npm:^23.9.0":
-  version: 23.10.1
-  resolution: "i18next@npm:23.10.1"
+"i18next@npm:^23.11.3":
+  version: 23.11.5
+  resolution: "i18next@npm:23.11.5"
   dependencies:
     "@babel/runtime": "npm:^7.23.2"
-  checksum: e4cfb143bdb6fd343f68749a40cf562aa47f11c7af0243c0533868ae097912c3ddd6c384eb4116d1fced024a91279424abd8c2d1f694bbf304c42ebe3968ecca
+  checksum: 3a8e0d5d2b9ac6c6fa8c2180452aaf816d60e1cc790da69d6be515feec85553f8af9fcc19414ade1a621f08236e84f38df4415a8234919fa97fa2e35624e86b6
   languageName: node
   linkType: hard
 
@@ -14719,7 +14719,7 @@ __metadata:
     focus-trap-react: "npm:^8.11.2"
     graphql: "npm:^16.8.1"
     husky: "npm:^7.0.1"
-    i18next: "npm:^23.9.0"
+    i18next: "npm:^23.11.3"
     i18next-http-backend: "npm:^1.4.5"
     jest: "npm:^29.7.0"
     jest-axe: "npm:^5.0.1"

From a3ad8284f747763dc9529b970d58ed8f9d95475c Mon Sep 17 00:00:00 2001
From: Shaun Laughland <22419216+s-laugh@users.noreply.github.com>
Date: Mon, 27 May 2024 10:04:59 -0400
Subject: [PATCH 24/26] [Snyk] Upgrade @types/react from 18.2.79 to 18.3.1
 (#1028)

* fix: upgrade @types/react from 18.2.79 to 18.3.1

Snyk has created this PR to upgrade @types/react from 18.2.79 to 18.3.1.

See this package in yarn:
@types/react

See this project in Snyk:
https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr

* update yarn.lock

---------

Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7b29531152..477637f5a4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.3.1",
     "cors": "^2.8.5",
     "cuid": "^2.1.8",
     "focus-trap-react": "^8.11.2",
diff --git a/yarn.lock b/yarn.lock
index 1b23500153..b747a4df27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4781,13 +4781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.2.74":
-  version: 18.2.79
-  resolution: "@types/react@npm:18.2.79"
+"@types/react@npm:^18.3.1":
+  version: 18.3.2
+  resolution: "@types/react@npm:18.3.2"
   dependencies:
     "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 2ef833e7d0a5c226beddbbe090811582371f6ae5e2f092a3d9f47cc6087c8bce0b96ee33e351de6d1d470f0a0ec5892d971933f841ef31538c1821681fc6569e
+  checksum: a85eed82c1009dc9d979281d9ea1f5322255003de3378390f35d897b4bdaf1d34ea748636c03e9e9b4b7cc97c2f4582993d2d60e40846226ad497d97c7d8565a
   languageName: node
   linkType: hard
 
@@ -14707,7 +14707,7 @@ __metadata:
     "@testing-library/jest-dom": "npm:^5.17.0"
     "@testing-library/react": "npm:^14.3.1"
     "@testing-library/user-event": "npm:^14.4.3"
-    "@types/react": "npm:^18.2.74"
+    "@types/react": "npm:^18.3.1"
     autoprefixer: "npm:^10.4.1"
     axe-core: "npm:^4.3.1"
     cors: "npm:^2.8.5"

From ff9da2382c80630ab89dcecebfc92d3acf815c98 Mon Sep 17 00:00:00 2001
From: Shaun Laughland <22419216+s-laugh@users.noreply.github.com>
Date: Mon, 27 May 2024 13:17:56 -0400
Subject: [PATCH 25/26] [Snyk] Upgrade joi from 17.13.0 to 17.13.1 (#1029)

* fix: upgrade joi from 17.13.0 to 17.13.1

Snyk has created this PR to upgrade joi from 17.13.0 to 17.13.1.

See this package in yarn:
joi

See this project in Snyk:
https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr

* update yarn.lock

---------

Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 477637f5a4..1686f96e6b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "graphql": "^16.8.1",
     "i18next": "^23.11.3",
     "i18next-http-backend": "^1.4.5",
-    "joi": "^17.12.3",
+    "joi": "^17.13.1",
     "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "prop-types": "^15.8.1",
diff --git a/yarn.lock b/yarn.lock
index b747a4df27..35570c7c3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11214,16 +11214,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"joi@npm:^17.12.3":
-  version: 17.13.0
-  resolution: "joi@npm:17.13.0"
+"joi@npm:^17.13.1":
+  version: 17.13.1
+  resolution: "joi@npm:17.13.1"
   dependencies:
     "@hapi/hoek": "npm:^9.3.0"
     "@hapi/topo": "npm:^5.1.0"
     "@sideway/address": "npm:^4.1.5"
     "@sideway/formula": "npm:^3.0.1"
     "@sideway/pinpoint": "npm:^2.0.0"
-  checksum: aae196d71edeb752b76c12560728e0c5a2b813956934443ddf5294af993a0bdf81c22cffc2170e4751f2adaa56873a4eafc24d697c2ec7055709219505e3e56b
+  checksum: 9e34f93afbb490e12d7ec4aa05803788cd9ff4de00af30389c9d0f4af193ae85941365f80cb0ac38d0d04a45b85ee3a8b78cb0c10b5efeccce8922d68719603c
   languageName: node
   linkType: hard
 
@@ -14725,7 +14725,7 @@ __metadata:
     jest-axe: "npm:^5.0.1"
     jest-canvas-mock: "npm:^2.3.1"
     jest-environment-jsdom: "npm:^29.7.0"
-    joi: "npm:^17.12.3"
+    joi: "npm:^17.13.1"
     lint-staged: "npm:^11.0.1"
     next: "npm:^14.2.3"
     next-i18next: "npm:^14.0.3"

From 311c848dbfd6fb23708a7713d264f5ea59107830 Mon Sep 17 00:00:00 2001
From: blai0264 <mblais93@gmail.com>
Date: Fri, 31 May 2024 10:16:04 -0400
Subject: [PATCH 26/26] formatting

---
 .../fragment_components/ImageWithCollapse.test.js              | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
index d05bd8dc23..669e4080e9 100644
--- a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
+++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js
@@ -37,7 +37,6 @@ describe("ImageWithCollapse", () => {
       screen.getByText((content) => content.startsWith("Ordered list item 1"))
     ).toBeInTheDocument();
 
-
     // const details = screen.getByTestId("details");
     // const div = screen.getByTestId("div");
     // const paragraph = div.getElementsByTagName("p")[0];
@@ -50,8 +49,6 @@ describe("ImageWithCollapse", () => {
     // expect(await unordered).toBeVisible();
     // expect(await ordered).toBeVisible();
 
-
-
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });