Description

The corrects the missing i18n text for web components.

Ticket

https://github.com/department-of-veterans-affairs/va.gov-cms/issues/19670

Developer Task

- [ ] PR submitted against the `main` branch of `next-build`.
- [ ] Link to the issue that this PR addresses (if applicable).
- [ ] Define all changes in your PR and note any changes that could potentially be breaking changes.
- [ ] PR includes steps to test your changes and links to these changes in the Tugboat preview (if applicable).
- [ ] Provided before and after screenshots of your changes (if applicable).
- [ ] Alerted the #accelerated-publishing Slack channel to request a PR review.
- [ ] You understand that once approved, you are responsible for merging your changes into `main`. (Note that changes to `main` will move automatically into production.)

Code diff

The effective code different between the last working version of the file and the new version is as follows:

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c070a36f..728ac917 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -4,10 +4,11 @@ import Script from 'next/script'

 const Document = () => {
   const ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
+  const nonce = '**CSP_NONCE**'

   return (
     <Html lang="en" dir="ltr">
-      <Head>
+      <Head nonce={nonce}>
         <meta charSet="utf-8" />
         <link
           href={`${ASSETS_URL}static-pages.css`}
@@ -20,6 +21,7 @@ const Document = () => {
           id="web-components"
           strategy="beforeInteractive"
           src={`${ASSETS_URL}web-components.entry.js`}
+          data-nb-nonce={nonce}
         />

         {/* Add vendor file */}
@@ -27,6 +29,7 @@ const Document = () => {
           id="vendor"
           strategy="beforeInteractive"
           src={`${ASSETS_URL}vendor.entry.js`}
+          data-nb-nonce={nonce}
         />

         {/* Preconnect to google tag manager domain */}
@@ -97,6 +100,7 @@ const Document = () => {
           noModule
           strategy="afterInteractive"
           src={`${ASSETS_URL}polyfills.entry.js`}
+          data-nb-nonce={nonce}
         />

         {/* We participate in the US government’s analytics program. See the data at analytics.usa.gov. https://github.com/digital-analytics-program/gov-wide-code */}
@@ -104,6 +108,7 @@ const Document = () => {
           src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
           id="_fed_an_ua_tag"
           strategy="afterInteractive"
+          data-nb-nonce={nonce}
           async
         />
       </Head>
@@ -117,7 +122,7 @@ const Document = () => {
           />
         </noscript>
         <Main />
-        <NextScript />
+        <NextScript nonce={nonce} />
       </body>
     </Html>
   )

QA steps

Viewing elements via web inspector

[x] On https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/, any <script> tag with a url like /_next/static/chunks should have nonce="**CSP_NONCE**" on it
[x] On https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/, web-components.entry.js scripts should be present and have should have nonce="**CSP_NONCE**" on them
[x] At the bottom of this page, the pagination should show the word 'Next' with the right arrow: https://pr805-3h8lqxrf8pgmvcaf2snm8gywogeeyblk.tugboat.vfs.va.gov/pittsburgh-health-care/stories/
[x] https://staging.va.gov/outreach-and-events/events/ loads without any CSP errors reported in the console
[x] https://staging.va.gov/outreach-and-events/events/ loads with 'Next' visible in the pagination at the bottom of the page

Reviewer

Reviewing a PR

This section lists items that need to be checked or updated when making changes to this repository.

Standard Checks

- [ ] Code Quality: Readabilty, Naming Conventions, Consistency, Reusability
- [ ] Test Coverage: 80% coverage
- [ ] Functionality: Change functions as expected with no additional bugs
- [ ] Performance: Code does not introduce performance issues
- [ ] Documentation: Changes are documented in their respective README.md files
- [ ] Security: Packages have been approved in the TRM

Merging an Approved Layout

When merging a layout, you must ensure that the content type has been turned on for next-build inside the CMS. This CMS flag must be turned on for editors to preview their work using the next build preview server.

Resource types (layouts) that have not been approved by design should NOT be pushed to production. Ensure that slug.tsx does not include your resource type if it is not approved.

The status of layouts should be kept up to date inside templates.md. This includes QA progress, development progress, etc. A link should be provided for where testing can occur.

Merging a Non-Approved Layout

Your new resource type should not be included inside slug.tsx. Items added here will go into production once merged into the main branch. It is imperative that we do not push anything live that has not been approved.

Ensure that this layout has been added to the templates.md file with the current status of the work.

department-of-veterans-affairs / next-build

Roll back custom head & document; add nonce to head and nextscript. #805