Specify language in HTML tags (#1798)

https://eaflood.atlassian.net/browse/IWTF-3674

This change makes sure that the correct language tags are applied to the HTML depending on whether the page is in English or Welsh. It also adds attributes to the language switch links to make sure those are always tagged with the correct language.

packages/gafl-webapp-service/src/handlers/__tests__/__snapshots__/page-handler.spec.js.snap

@@ -13,6 +13,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
         "backRef": null,
         "displayAnalytics": false,
         "mssgs": undefined,
+        "pageLanguageSetToWelsh": false,
         "uri": Object {
           "analyticsFormAction": "/buy/process-analytics-preferences",
         },
@@ -41,6 +42,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
         "backRef": null,
         "displayAnalytics": true,
         "mssgs": undefined,
+        "pageLanguageSetToWelsh": false,
         "uri": Object {
           "analyticsFormAction": "/buy/process-analytics-preferences",
         },

packages/gafl-webapp-service/src/handlers/__tests__/page-handler.spec.js

@@ -241,6 +241,55 @@ describe('The page handler function', () => {
       expect(set).toBeCalledWith(result)
     })
   })
+
+  describe('pageLanguageSetToWelsh', () => {
+    it('returns false when SHOW_WELSH_CONTENT is not true', async () => {
+      process.env.SHOW_WELSH_CONTENT = false
+      const { get } = pageHandler('', 'view', '/next/page')
+      const toolkit = getMockToolkit()
+
+      await get(getMockRequest(), toolkit)
+
+      expect(toolkit.view).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          pageLanguageSetToWelsh: false
+        })
+      )
+    })
+
+    it('returns false when SHOW_WELSH_CONTENT is true but the lang is not set to cy', async () => {
+      process.env.SHOW_WELSH_CONTENT = true
+      const { get } = pageHandler('', 'view', '/next/page')
+      const toolkit = getMockToolkit()
+
+      await get(getMockRequest(), toolkit)
+
+      expect(toolkit.view).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          pageLanguageSetToWelsh: false
+        })
+      )
+    })
+
+    it('returns true when SHOW_WELSH_CONTENT is true and the lang is set to cy', async () => {
+      process.env.SHOW_WELSH_CONTENT = true
+      const { get } = pageHandler('', 'view', '/next/page')
+      const query = { lang: 'cy' }
+      const request = getMockRequest({ query })
+      const toolkit = getMockToolkit()
+
+      await get(request, toolkit)
+
+      expect(toolkit.view).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          pageLanguageSetToWelsh: true
+        })
+      )
+    })
+  })
 })
 
 const getAnalytics = overides => ({
@@ -249,7 +298,7 @@ const getAnalytics = overides => ({
   ...overides
 })
 
-const getMockRequest = ({ setCurrentPermission = () => {}, path = '/buy/we/are/here', analytics, set = () => {} } = {}) => ({
+const getMockRequest = ({ setCurrentPermission = () => {}, path = '/buy/we/are/here', query = {}, analytics, set = () => {} } = {}) => ({
   cache: () => ({
     helpers: {
       page: {
@@ -275,6 +324,7 @@ const getMockRequest = ({ setCurrentPermission = () => {}, path = '/buy/we/are/h
     getLocale: () => ''
   },
   path,
+  query,
   url: {
     search: ''
   }

packages/gafl-webapp-service/src/handlers/page-handler.js

@@ -40,6 +40,11 @@ const omitPageFromAnalytics = async request => {
   }
 }
 
+const pageLanguageSetToWelsh = request => {
+  const showWelshContent = process.env.SHOW_WELSH_CONTENT?.toLowerCase() === 'true'
+  return showWelshContent && request.query.lang === 'cy'
+}
+
 /**
  * Flattens the error structure from joi for use in the templates
  * @param e
@@ -123,6 +128,7 @@ export default (path, view, completion, getData) => ({
     pageData.altLang = request.i18n.getLocales().filter(locale => locale !== request.i18n.getLocale())
     pageData.backRef = await getBackReference(request, view)
     pageData.uri = { ...(pageData.uri || {}), analyticsFormAction: addLanguageCodeToUri(request, PROCESS_ANALYTICS_PREFERENCES.uri) }
+    pageData.pageLanguageSetToWelsh = pageLanguageSetToWelsh(request)
 
     const analytics = await request.cache().helpers.analytics.get()
     pageData.analyticsMessageDisplayed = analytics ? analytics[ANALYTICS.seenMessage] : false

packages/gafl-webapp-service/src/pages/layout/layout.njk

@@ -9,6 +9,10 @@
 {% from "button/macro.njk" import govukButton %}
 {% from "footer/macro.njk" import govukFooter %}
 
+{% if pageLanguageSetToWelsh %}
+    {% set htmlLang = "cy" %}
+{% endif %}
+
 {% macro csrf() %}
     <div><input type="hidden" name="{{CSRF_TOKEN_NAME}}" value="{{CSRF_TOKEN_VALUE}}"></div>
 {% endmacro %}
@@ -86,7 +90,7 @@
                             <div class="govuk-width-container">
                                 <div class="govuk-cookie-banner__content">
                                     <p class="govuk-body">
-                                        {{ mssgs.analytics_banner_rejection }}  
+                                        {{ mssgs.analytics_banner_rejection }}
                                     </p>
                                 </div>
                                 <div class="govuk-button-group">
@@ -142,9 +146,9 @@
             <div class="govuk-width-container govuk-!-display-none-print govuk-!-margin-top-2">
                 <p class="govuk-body-s right-align govuk-!-margin-0">
                     {% if _uri.queryParams.lang == 'cy' %}
-                        <a class="govuk-link govuk-!-margin-2" href="?lang=en">English</a> | <span class="govuk-body-s govuk-!-margin-2">Cymraeg</a>
+                        <a class="govuk-link govuk-!-margin-2" href="?lang=en" hreflang="en" lang="en">English</a> | <span class="govuk-body-s govuk-!-margin-2">Cymraeg</a>
                     {% else %}
-                        <span class="govuk-body-s govuk-!-margin-2">English</span> | <a class="govuk-link govuk-!-margin-2" href="?lang=cy">Cymraeg</a>
+                        <span class="govuk-body-s govuk-!-margin-2">English</span> | <a class="govuk-link govuk-!-margin-2" href="?lang=cy" hreflang="cy" lang="cy">Cymraeg</a>
                     {% endif%}
                 </p>
             </div>