Skip to content

Commit 170f567

Browse files
aaronfowlesaaronfowles
authored
Merge pull request #315 from alphagov/main
Release
2 parents 465fb0d + 3cee742 commit 170f567

12 files changed

Lines changed: 98 additions & 79 deletions

‎package-lock.json‎

Lines changed: 14 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
"dev": "npm run copy-assets && nodemon src/backend/server.ts --ignore src/frontend",
99
"local": "env $(cat .env-signon-mock|xargs) npm run start",
1010
"clean-build": "rm -rf dist public && npm run build",
11-
"build": "npm run build-frontend && npm run copy-assets && npm run build-app",
11+
"build": "npm run copy-assets && npm run build-frontend && npm run build-app",
1212
"postbuild": "mv dist/src/* dist/ && cp -r src/backend/views dist/backend/views",
1313
"build-app": "tsc",
1414
"build-frontend": "webpack",
15-
"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",
15+
"copy-assets": "sh scripts/install-govuk-frontend.sh && sh scripts/install-accessible-autocomplete.sh",
1616
"test": "jest --watchAll --coverage --verbose --detectOpenHandles",
1717
"test-ci": "jest --coverage --coverageReporters=json --verbose --detectOpenHandles --colors",
1818
"lint": "eslint './**/*.{ts,tsx}' --fix",
@@ -51,7 +51,7 @@
5151
"express-session": "^1.18.2",
5252
"google-libphonenumber": "^3.2.33",
5353
"got": "^12.5.0",
54-
"govuk-frontend": "^4.7.0",
54+
"govuk-frontend": "^5.14.0",
5555
"ioredis": "^5.3.2",
5656
"nunjucks": "^3.2.4",
5757
"passport": "^0.6.0",

‎scripts/install-accessible-autocomplete.sh‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/bin/bash
2+
3+
# CSS
4+
mkdir -p public/stylesheets
5+
cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/stylesheets/accessible-autocomplete.min.css
6+
7+
# JS
8+
mkdir -p public/javascripts
9+
cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/javascripts/accessible-autocomplete.min.js
10+
cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/javascripts/accessible-autocomplete.min.js.map

‎scripts/install-govuk-frontend.sh‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#!/bin/bash
2+
3+
# CSS
4+
mkdir -p public/stylesheets
5+
cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css public/stylesheets/govuk-frontend.min.css
6+
7+
# Images
8+
mkdir -p public/assets
9+
cp -r ./node_modules/govuk-frontend/dist/govuk/assets/images public/assets/images
10+
11+
# Fonts
12+
mkdir -p public/assets
13+
cp -r ./node_modules/govuk-frontend/dist/govuk/assets/fonts public/assets/
14+
15+
# Manifest
16+
mkdir -p public/assets
17+
cp ./node_modules/govuk-frontend/dist/govuk/assets/manifest.json public/assets
18+
19+
# JS
20+
mkdir -p ./public/javascripts
21+
cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js ./public/javascripts/govuk-frontend.min.js
22+
cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.map ./public/javascripts/govuk-frontend.min.js.map

‎src/backend/app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ class App {
9898

9999
private initializeRenderEngine() {
100100
const views = [
101-
path.join(__dirname, '../../node_modules/govuk-frontend'),
101+
path.join(__dirname, '../../node_modules/govuk-frontend/dist'),
102102
path.join(__dirname, './views'),
103103
]
104104

‎src/backend/views/layouts/main.njk‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
2727
<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>
2828

2929
<!--[if !IE 8]><!-->
30-
<link href="/main.css" rel="stylesheet" />
31-
<link href="/assets/aaccessible-autocomplete.min.css" rel="stylesheet">
30+
<link href="/stylesheets/main.css" rel="stylesheet" />
31+
<link href="/stylesheets/accessible-autocomplete.min.css" rel="stylesheet">
3232
<!--<![endif]-->
3333

3434
<!--[if IE 8]>
@@ -68,7 +68,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
6868
{% block main %}
6969
<div class="govuk-width-container {{ containerClasses }}">
7070
{% block beforeContent %}{% endblock %}
71-
<main class="govuk-main-wrapper {{ mainClasses }}" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
71+
<main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
7272
{% if hideFeedbackSurvey === true %}
7373
{% include "../partials/phaseBanner.njk" %}
7474
{% else %}
@@ -95,11 +95,12 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
9595
{% endblock %}
9696
{% block bodyEnd %}
9797
{% block scripts %}
98-
<script src="/assets/all.js"></script>
99-
<script src="/assets/accessible-autocomplete.min.js"></script>
100-
<script>
98+
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
99+
<script src="/javascripts/accessible-autocomplete.min.js"></script>
100+
<script type="module">
101+
import { initAll } from '/javascripts/govuk-frontend.min.js'
101102
window.havePostScriptsRun = false;
102-
window.GOVUKFrontend.initAll();
103+
initAll()
103104
</script>
104105

105106
{% block pageScripts %}{% endblock %}

‎src/backend/views/search.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@
3131
{% endblock %}
3232

3333
{% block pageScripts %}
34-
<script type="module" src="/main.js"></script>
34+
<script type="module" src="/javascripts/main.js"></script>
3535
{% endblock %}

‎src/frontend/scss/main.scss‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../node_modules/govuk-frontend/govuk/all';
1+
@import '~govuk-frontend/dist/govuk/index';
22
@import './app-masthead';
33
@import './grid.scss';
44

@@ -283,17 +283,6 @@ h2:focus-visible {
283283
color: $govuk-inverse-button-text-colour;
284284
}
285285

286-
// alphagov/govuk_template includes a specific a:link:focus selector
287-
// designed to make unvisited links a slightly darker blue when focussed, so
288-
// we need to override the text colour for that combination of selectors so
289-
// so that unvisited links styled as buttons do not end up with dark blue
290-
// text when focussed.
291-
@include _govuk-compatibility(govuk_template) {
292-
&:link:focus {
293-
color: $govuk-inverse-button-text-colour;
294-
}
295-
}
296-
297286
&:hover {
298287
background-color: $govuk-inverse-button-hover-colour;
299288

‎src/frontend/view/customURLCellRenderer.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,6 @@ export class URLCellRenderer {
1818
this.eGui.innerHTML = `<a class="govuk-link" key=${this.getUniqueKey()} href="${
1919
params.value
2020
}">${params.value}</a>`
21-
this.registerEventsListeners()
22-
}
23-
24-
registerEventsListeners() {
25-
document.addEventListener('keydown', (event) => {
26-
if (
27-
!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
28-
event.key
29-
)
30-
) {
31-
return
32-
}
33-
const {
34-
colDef: { field },
35-
rowIndex,
36-
} = this.params
37-
const focusedCell = this.params.api.getFocusedCell()
38-
if (
39-
focusedCell?.column.getColId() === field &&
40-
focusedCell?.rowIndex === rowIndex
41-
) {
42-
const innerLink = document.querySelector(
43-
`a[key="${this.getUniqueKey()}"]`
44-
)
45-
if (innerLink instanceof HTMLElement) {
46-
innerLink.focus()
47-
}
48-
}
49-
})
5021
}
5122

5223
getUniqueKey = () => {

‎src/frontend/view/view-grid.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,31 @@ const createAgGrid = () => {
7575
...(sortConfig[field] || {}),
7676
}))
7777

78+
const suppressKeyboardEvent = (
79+
params: SuppressKeyboardEventParams
80+
): boolean => {
81+
return params.event.key.toUpperCase() === 'TAB'
82+
}
83+
84+
const suppressHeaderKeyboardEvent = (params): boolean => {
85+
const colNames = gridOptions.columnApi
86+
.getAllDisplayedColumns()
87+
.map((col) => col.colId)
88+
const lastCol = colNames[colNames.length - 1]
89+
90+
return (
91+
params.event.key.toUpperCase() === 'TAB' &&
92+
params.column.getId() === lastCol
93+
)
94+
}
95+
7896
const gridOptions = {
7997
rowData,
8098
columnDefs,
99+
defaultColDef: {
100+
suppressKeyboardEvent,
101+
suppressHeaderKeyboardEvent,
102+
},
81103
onPaginationChanged: function () {
82104
viewPagination(gridOptions)
83105
},

0 commit comments

Comments
 (0)