Release

package.json

@@ -8,11 +8,11 @@
     "dev": "npm run copy-assets && nodemon src/backend/server.ts --ignore src/frontend",
     "local": "env $(cat .env-signon-mock|xargs) npm run start",
     "clean-build": "rm -rf dist public && npm run build",
-    "build": "npm run build-frontend && npm run copy-assets && npm run build-app",
+    "build": "npm run copy-assets && npm run build-frontend && npm run build-app",
     "postbuild": "mv dist/src/* dist/ && cp -r src/backend/views dist/backend/views",
     "build-app": "tsc",
     "build-frontend": "webpack",
-    "copy-assets": "cp -r ./node_modules/govuk-frontend/govuk/assets ./public/assets && cp ./node_modules/govuk-frontend/govuk/all.js ./public/assets/all.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/assets/accessible-autocomplete.min.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/assets/aaccessible-autocomplete.min.css && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/assets/accessible-autocomplete.min.js.map && cp ./node_modules/govuk-frontend/govuk/all.js.map ./public/assets/all.js.map",
+    "copy-assets": "sh scripts/install-govuk-frontend.sh && sh scripts/install-accessible-autocomplete.sh",
     "test": "jest --watchAll --coverage --verbose --detectOpenHandles",
     "test-ci": "jest --coverage --coverageReporters=json --verbose --detectOpenHandles --colors",
     "lint": "eslint './**/*.{ts,tsx}' --fix",
@@ -51,7 +51,7 @@
     "express-session": "^1.18.2",
     "google-libphonenumber": "^3.2.33",
     "got": "^12.5.0",
-    "govuk-frontend": "^4.7.0",
+    "govuk-frontend": "^5.14.0",
     "ioredis": "^5.3.2",
     "nunjucks": "^3.2.4",
     "passport": "^0.6.0",

scripts/install-accessible-autocomplete.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/stylesheets/accessible-autocomplete.min.css
+
+# JS
+mkdir -p public/javascripts
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/javascripts/accessible-autocomplete.min.js
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/javascripts/accessible-autocomplete.min.js.map

scripts/install-govuk-frontend.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css public/stylesheets/govuk-frontend.min.css
+
+# Images
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/images public/assets/images
+
+# Fonts
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/fonts public/assets/
+
+# Manifest
+mkdir -p public/assets
+cp ./node_modules/govuk-frontend/dist/govuk/assets/manifest.json public/assets
+
+# JS
+mkdir -p ./public/javascripts
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js ./public/javascripts/govuk-frontend.min.js
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.map ./public/javascripts/govuk-frontend.min.js.map

src/backend/app.ts

@@ -98,7 +98,7 @@ class App {
 
   private initializeRenderEngine() {
     const views = [
-      path.join(__dirname, '../../node_modules/govuk-frontend'),
+      path.join(__dirname, '../../node_modules/govuk-frontend/dist'),
       path.join(__dirname, './views'),
     ]
 

src/backend/views/layouts/main.njk

@@ -27,8 +27,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.2/dist/ag-grid-community.min.js" integrity="sha256-ULzU4/8xnTp9F6pbUw2GByUtsteCMTKi2W0+QNGuzwA=" crossorigin="anonymous"></script>
 
 <!--[if !IE 8]><!-->
-<link href="/main.css" rel="stylesheet" />
-<link href="/assets/aaccessible-autocomplete.min.css" rel="stylesheet">
+<link href="/stylesheets/main.css" rel="stylesheet" />
+<link href="/stylesheets/accessible-autocomplete.min.css" rel="stylesheet">
 <!--<![endif]-->
 
 <!--[if IE 8]>
@@ -68,7 +68,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 {% block main %}
   <div class="govuk-width-container {{ containerClasses }}">
     {% block beforeContent %}{% endblock %}
-    <main class="govuk-main-wrapper {{ mainClasses }}" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+    <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
       {% if hideFeedbackSurvey === true %}
       {% include "../partials/phaseBanner.njk" %}
       {% else %}
@@ -95,11 +95,12 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 {% endblock %}
 {% block bodyEnd %}
   {% block scripts %}
-  <script src="/assets/all.js"></script>
-  <script src="/assets/accessible-autocomplete.min.js"></script>
-  <script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+  <script src="/javascripts/accessible-autocomplete.min.js"></script>
+  <script type="module">
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     window.havePostScriptsRun = false;
-    window.GOVUKFrontend.initAll();
+    initAll()
   </script>
 
     {% block pageScripts %}{% endblock %}

src/backend/views/search.njk

@@ -31,5 +31,5 @@
 {% endblock %}
 
 {% block pageScripts %}
-  <script type="module" src="/main.js"></script>
+  <script type="module" src="/javascripts/main.js"></script>
 {% endblock %}

src/frontend/scss/main.scss

@@ -1,4 +1,4 @@
-@import '../../../node_modules/govuk-frontend/govuk/all';
+@import '~govuk-frontend/dist/govuk/index';
 @import './app-masthead';
 @import './grid.scss';
 
@@ -283,17 +283,6 @@ h2:focus-visible {
     color: $govuk-inverse-button-text-colour;
   }
 
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited links a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-inverse-button-text-colour;
-    }
-  }
-
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;
 

src/frontend/view/customURLCellRenderer.ts

@@ -18,35 +18,6 @@ export class URLCellRenderer {
     this.eGui.innerHTML = `<a class="govuk-link" key=${this.getUniqueKey()} href="${
       params.value
     }">${params.value}</a>`
-    this.registerEventsListeners()
-  }
-
-  registerEventsListeners() {
-    document.addEventListener('keydown', (event) => {
-      if (
-        !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
-          event.key
-        )
-      ) {
-        return
-      }
-      const {
-        colDef: { field },
-        rowIndex,
-      } = this.params
-      const focusedCell = this.params.api.getFocusedCell()
-      if (
-        focusedCell?.column.getColId() === field &&
-        focusedCell?.rowIndex === rowIndex
-      ) {
-        const innerLink = document.querySelector(
-          `a[key="${this.getUniqueKey()}"]`
-        )
-        if (innerLink instanceof HTMLElement) {
-          innerLink.focus()
-        }
-      }
-    })
   }
 
   getUniqueKey = () => {

src/frontend/view/view-grid.ts

@@ -75,9 +75,31 @@ const createAgGrid = () => {
     ...(sortConfig[field] || {}),
   }))
 
+  const suppressKeyboardEvent = (
+    params: SuppressKeyboardEventParams
+  ): boolean => {
+    return params.event.key.toUpperCase() === 'TAB'
+  }
+
+  const suppressHeaderKeyboardEvent = (params): boolean => {
+    const colNames = gridOptions.columnApi
+      .getAllDisplayedColumns()
+      .map((col) => col.colId)
+    const lastCol = colNames[colNames.length - 1]
+
+    return (
+      params.event.key.toUpperCase() === 'TAB' &&
+      params.column.getId() === lastCol
+    )
+  }
+
   const gridOptions = {
     rowData,
     columnDefs,
+    defaultColDef: {
+      suppressKeyboardEvent,
+      suppressHeaderKeyboardEvent,
+    },
     onPaginationChanged: function () {
       viewPagination(gridOptions)
     },

src/frontend/view/view-search-panel.ts

@@ -40,7 +40,7 @@ const viewKeywordSearchPanel = () => `
             state.searchResults
               ? ''
               : `<details class="govuk-details" data-module="govuk-details">
-            <summary class="govuk-details__summary">
+            <summary class="govuk-details__summary" role="button">
               <span class="govuk-details__summary-text">
                 Search filters
               </span>
@@ -114,10 +114,10 @@ const viewLinkSearchPanel = () => `
           state.searchResults
             ? ''
             : `<details class="govuk-details" data-module="govuk-details">
-          <summary class="govuk-details__summary">
-          <span class="govuk-details__summary-text">
-          Search filters
-          </span>
+          <summary class="govuk-details__summary" role="button">
+            <span class="govuk-details__summary-text">
+              Search filters
+            </span>
           </summary>
           <div class="govuk-details__text">
           <div class="search-filters-container">
@@ -187,7 +187,7 @@ const viewTaxonSearchPanel = () => `
             state.searchResults
               ? ''
               : `<details class="govuk-details" data-module="govuk-details">
-            <summary class="govuk-details__summary">
+            <summary class="govuk-details__summary" role="button">
               <span class="govuk-details__summary-text">
                 Search filters
               </span>
@@ -222,7 +222,7 @@ const viewPersonSearchPanel = () => `
             state.searchResults
               ? ''
               : `<details class="govuk-details" data-module="govuk-details">
-            <summary class="govuk-details__summary">
+            <summary class="govuk-details__summary" role="button">
               <span class="govuk-details__summary-text">
                 Search filters
               </span>
@@ -237,8 +237,6 @@ const viewPersonSearchPanel = () => `
                 <div class="search-filters-right-col taxon-search">
                   ${viewDocumentType()}
                   ${viewPublishingAppSelector()}
-                  ${viewPoliticalStatusSelector()}
-                  ${viewGovernmentSelector()}
                 </div>
               </div>
             </div>
@@ -257,7 +255,7 @@ const viewLanguageSearchPanel = () => `
             state.searchResults
               ? ''
               : `<details class="govuk-details" data-module="govuk-details">
-            <summary class="govuk-details__summary">
+            <summary class="govuk-details__summary" role="button">
               <span class="govuk-details__summary-text">
                 Search filters
               </span>
@@ -292,7 +290,7 @@ const viewOrganisationSearchPanel = () => `
             state.searchResults
               ? ''
               : `<details class="govuk-details" data-module="govuk-details">
-            <summary class="govuk-details__summary">
+            <summary class="govuk-details__summary" role="button">
               <span class="govuk-details__summary-text">
                 Search filters
               </span>

webpack.config.js

@@ -27,6 +27,11 @@ module.exports = (env) => ({
           },
           {
             loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true,
+              },
+            },
           },
         ],
       },
@@ -36,14 +41,14 @@ module.exports = (env) => ({
     extensions: ['.tsx', '.ts', '.js'],
   },
   output: {
-    filename: '[name].js',
+    filename: 'javascripts/[name].js',
     path: path.resolve(__dirname, 'public'),
   },
   plugins: [
     env?.enableHMR
       ? new webpack.HotModuleReplacementPlugin()
       : new MiniCssExtractPlugin({
-          filename: '[name].css',
+          filename: 'stylesheets/[name].css',
         }),
     new webpack.DefinePlugin({
       buildConfig: {