Fix various front end warnings

.github/workflows/deploy_frontend_main.yml

@@ -16,7 +16,7 @@ jobs:
         working-directory: client
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
@@ -84,4 +84,4 @@ jobs:
           PATHS: "/*"
           AWS_REGION: "us-east-1"
           AWS_ACCESS_KEY_ID: ${{ secrets.CLIENT_DEV_AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.CLIENT_DEV_AWS_SECRET_ACCESS_KEY }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.CLIENT_DEV_AWS_SECRET_ACCESS_KEY }}

.github/workflows/pr_frontend.yml

@@ -5,7 +5,7 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
   cancel-in-progress: true
 env:
-  node-version: 14.x
+  node-version: 18.x
 jobs:
   # JOB to run change detection
   detect-fe-changes:
@@ -62,4 +62,4 @@ jobs:
       - name: Spanish translation test
         run: npm run test:intl-translations
       # - name: Check for security vulnerabilities
-      #   run: npm audit --production
+      #   run: npm audit --production

client/.nvmrc

@@ -1 +1 @@
-v14.17.1
+v18.20.6

client/cypress/support/step_definitions/commonSteps.js

@@ -30,11 +30,14 @@ When(`I click on the {string} button in the navigation`, (page) => {
 
 When(`I look for the {string} CTA`, (ctaString) => {
   cy.get(`[data-cy="${hyphenizeString(ctaString)}-block"]`).as('CTA_block');
-  cy.get('@CTA_block').scrollIntoView().should('be.visible');
+  cy.get('@CTA_block').scrollIntoView();
+  cy.get('@CTA_block').should('be.visible');
 });
 
 When(`I look for the {string}`, (footer) => {
-  cy.get(`[data-cy="${hyphenizeString(footer)}-primary-block"]`).scrollIntoView().should('be.visible');
+  cy.get(`[data-cy="${hyphenizeString(footer)}-primary-block"]`).as('string_block');
+  cy.get('@string_block').scrollIntoView();
+  cy.get('@string_block').should('be.visible');
 });
 
 // Common Thens:

client/gatsby-node.js

@@ -5,7 +5,7 @@ path = require('path');
 //
 // In react-map-gl 7.x this is no longer needed: https://visgl.github.io/react-map-gl/docs/get-started
 //
-exports.onCreateWebpackConfig = ({stage, loaders, actions}) => {
+exports.onCreateWebpackConfig = ({stage, loaders, actions, getConfig}) => {
   actions.setWebpackConfig({
     devtool: 'eval-source-map',
     resolve: {
@@ -14,4 +14,18 @@ exports.onCreateWebpackConfig = ({stage, loaders, actions}) => {
       },
     },
   });
+
+  if (stage === 'develop') {
+    const config = getConfig();
+
+    // Silence CSS ordering warnings, which aren't a risk with CSS Modules
+    const miniCssExtractPlugin = config.plugins.find(
+        (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+    );
+    if (miniCssExtractPlugin) {
+      miniCssExtractPlugin.options.ignoreOrder = true;
+    }
+
+    actions.replaceWebpackConfig(config);
+  }
 };

client/package.json

@@ -39,7 +39,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@types/d3-ease": "^3.0.0",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.5.2",
     "@types/js-search": "^1.4.4",
     "@types/maplibre-gl": "^1.14.0",
     "@types/node": "^15.14.9",
@@ -47,8 +47,8 @@
     "@types/react-dom": "^17.0.14",
     "@types/react-helmet": "^6.1.5",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "axe-core": "^4.4.1",
     "babel-jest": "^27.5.1",
     "babel-preset-gatsby": "^1.14.0",
@@ -58,11 +58,11 @@
     "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-formatjs": "^2.21.0",
+    "eslint-plugin-formatjs": "2.19.1",
     "eslint-plugin-react": "^7.29.4",
     "gatsby": "^3.14.6",
     "gatsby-cli": "^3.14.2",
-    "gatsby-plugin-intl": "^0.3.3",
+    "gatsby-plugin-intl": "^5.10.0",
     "gatsby-plugin-prettier-eslint": "^1.0.6",
     "gatsby-plugin-react-helmet": "^4.14.0",
     "gatsby-plugin-sass": "^4.14.0",
@@ -80,11 +80,11 @@
   },
   "dependencies": {
     "@sentry/gatsby": "^7.7.0",
-    "@trussworks/react-uswds": "^3.1.0",
+    "@trussworks/react-uswds": "^3.2.0",
     "@turf/bbox": "^6.5.0",
     "d3-ease": "^3.0.1",
     "gatsby-plugin-env-variables": "^2.2.0",
-    "gatsby-plugin-robots-txt": "^1.7.0",
+    "gatsby-plugin-robots-txt": "1.7.1",
     "gatsby-plugin-sitemap": "^4.10.0",
     "js-search": "^2.0.1",
     "maplibre-gl": "^1.14.0",
@@ -96,8 +96,7 @@
     "react-intl": "^5.24.7",
     "react-map-gl": "^6.1.19",
     "react-tooltip": "^4.2.21",
-    "react-use": "^17.3.2",
+    "react-use": "^17.3.2"
-    "uswds": "^2.13.3"
   },
   "cypress-cucumber-preprocessor": {
     "nonGlobalStepDefinitions": false

client/src/components/GovernmentBanner/__snapshots__/GovernmentBanner.test.tsx.snap

@@ -16,9 +16,11 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
           >
             <div
               class="usa-banner__inner"
+              data-testid="banner-header-inner-div"
             >
               <div
                 class="grid-col-auto"
+                data-testid="banner-header-flag-div"
               >
                 <img
                   alt="U.S. flag"
@@ -28,6 +30,7 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
               </div>
               <div
                 class="grid-col-fill tablet:grid-col-auto"
+                data-testid="banner-header-grid-div"
               >
                 <p
                   class="usa-banner__header-text"
@@ -109,19 +112,38 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
                     <br />
                     A 
                     <strong>
-                      lock (
+                      lock ( 
                       <span
                         class="icon-lock"
                       >
-                        <img
+                        <svg
-                          alt="lock"
+                          aria-labelledby="banner-lock-title banner-lock-description"
                           class="usa-banner__lock-image"
+                          focusable="false"
+                          height="64"
                           role="img"
-                          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                          viewBox="0 0 52 64"
-                          title="Lock"
+                          width="52"
-                        />
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <title
+                            id="banner-lock-title"
+                          >
+                            Lock
+                          </title>
+                          <desc
+                            id="banner-lock-description"
+                          >
+                            A locked padlock
+                          </desc>
+                          <path
+                            d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                            fill="#000000"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </span>
-                      )
+                       )
                     </strong>
                      or 
                     <strong>

client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/contact.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/privacy.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the Privacy Policy page matches Privacy Policy page snapsh
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the Privacy Policy page matches Privacy Policy page snapsh
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the Privacy Policy page matches Privacy Policy page snapsh
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the Privacy Policy page matches Privacy Policy page snapsh
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div

client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap

@@ -21,9 +21,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             >
               <div
                 class="usa-banner__inner"
+                data-testid="banner-header-inner-div"
               >
                 <div
                   class="grid-col-auto"
+                  data-testid="banner-header-flag-div"
                 >
                   <img
                     alt="U.S. flag"
@@ -33,6 +35,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                 </div>
                 <div
                   class="grid-col-fill tablet:grid-col-auto"
+                  data-testid="banner-header-grid-div"
                 >
                   <p
                     class="usa-banner__header-text"
@@ -114,19 +117,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       <br />
                       A 
                       <strong>
-                        lock (
+                        lock ( 
                         <span
                           class="icon-lock"
                         >
-                          <img
+                          <svg
-                            alt="lock"
+                            aria-labelledby="banner-lock-title banner-lock-description"
                             class="usa-banner__lock-image"
+                            focusable="false"
+                            height="64"
                             role="img"
-                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                            viewBox="0 0 52 64"
-                            title="Lock"
+                            width="52"
-                          />
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title
+                              id="banner-lock-title"
+                            >
+                              Lock
+                            </title>
+                            <desc
+                              id="banner-lock-description"
+                            >
+                              A locked padlock
+                            </desc>
+                            <path
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                              fill="#000000"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
                         </span>
-                        )
+                         )
                       </strong>
                        or 
                       <strong>
@@ -161,24 +183,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
     </div>
     <div>
-      <div
+      <div>
-        class="usa-alert usa-alert--info"
+        <strong>
-        data-testid="alert"
+          This tool has been updated.
-      >
+        </strong>
-        <div
+         The 2.0 version of the tool was released on Dec 20, 2024.
-          class="usa-alert__body"
-        >
-          <h1
-            class="usa-alert__heading"
-          >
-            Version 2.0 of the tool is now available
-          </h1>
-          <p
-            class="usa-alert__text"
-          >
-            The Council on Environmental Quality (CEQ) made the 2.0 version of the tool available on Dec 20, 2024.
-          </p>
-        </div>
       </div>
     </div>
     <div