@defra/lis-infra-ui-services 0.24.0 → 0.25.0-lreg-666.alpha.1

package/README.md

@@ -15,7 +15,7 @@ Install dependencies for this package locally with `npm install` from this direc
 | 503           | `service-unavailable`  |
 | anything else | `problem-with-service` |
 
-The links on these pages come from the `errorPages` option of `createNunjucksConfig` (or `createNunjucksContextBuilder`), exposed to templates as `errorPages`. Every key is optional:
+The contact link on these pages comes from the `errorPages` option of `createNunjucksConfig` (or `createNunjucksContextBuilder`), exposed to templates as `errorPages`. The key is optional:
 
 ```js
 createNunjucksConfig({
@@ -24,13 +24,41 @@ createNunjucksConfig({
   getRequestBasePath,
   errorPages: {
     contactHref:
-      'https://www.gov.uk/government/organisations/british-cattle-movement-service', // default
-    homeHref: '/', // default, "Home page" on page not found
-    getStartedHref: '/' // default, "Get started" on page not found
+      'https://www.gov.uk/government/organisations/british-cattle-movement-service' // default
   }
 })
 ```
 
+## Layout scripts
+
+`layoutComponents` from `@defra/lis-infra-ui-services/components/layout` is the list of GOV.UK Frontend components the layout template renders: Service navigation and Skip link.
+
+`errorPageComponents` from `@defra/lis-infra-ui-services/components/error-pages` is the list the shared error pages render (Button, for the not-authorised sign-in button). Every app that serves the shared error pages must add it.
+
+Start each with `createAll`, alongside any page-level components (see the full example under [Scrollable table](#scrollable-table)).
+
+Wrap the combined list in a `Set`, so a component that appears in more than one list (or that the app also lists itself) is only initialised once: govuk's base class logs an InitError on double init.
+
+### Scrollable table
+
+Apps that render the sortable paginated table macro also start `ScrollableTable` from `@defra/lis-infra-ui-services/components/scrollable-table`. It drops the tab stop (and the region role and label) from a table wrapper that fits, and restores them when the table overflows, re-checking whenever the wrapper or table changes size. Without JavaScript the wrapper stays focusable.
+
+```js
+import { createAll, Tabs } from 'govuk-frontend'
+import { errorPageComponents } from '@defra/lis-infra-ui-services/components/error-pages'
+import { layoutComponents } from '@defra/lis-infra-ui-services/components/layout'
+import { ScrollableTable } from '@defra/lis-infra-ui-services/components/scrollable-table'
+
+for (const component of new Set([
+  ...layoutComponents,
+  ...errorPageComponents,
+  ScrollableTable,
+  Tabs
+])) {
+  createAll(component)
+}
+```
+
 ## Scheduled maintenance
 
 Each hub switches maintenance on with its own config value, `maintenance.availableFrom`: the UK local date-time the service is back, in ISO 8601 form without an offset, e.g. `2026-11-19T09:00` or `2026-11-19T09:00:00`. Values with a `Z` or `+hh:mm` offset, and dates without a time, throw at start-up. An empty value leaves the service running as normal.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.24.0",
+  "version": "0.25.0-lreg-666.alpha.1",
   "description": "UI-Services shared definitions for the livestock taxonomy topology.",
   "main": "src/index.js",
   "repository": {
@@ -11,6 +11,9 @@
     ".": "./src/index.js",
     "./base-path": "./src/base-path.js",
     "./components/autocomplete": "./src/components/autocomplete.js",
+    "./components/error-pages": "./src/components/error-pages.js",
+    "./components/layout": "./src/components/layout.js",
+    "./components/scrollable-table": "./src/components/scrollable-table.js",
     "./components/autocomplete.scss": "./src/components/autocomplete.scss",
     "./components/search-form.scss": "./src/components/search-form.scss",
     "./components/service-navigation.scss": "./src/components/service-navigation.scss",
@@ -71,7 +74,8 @@
   "peerDependencies": {
     "@defra/lis-hubs-infra-access": ">=0.29.0 <1.0.0",
     "@defra/lis-hubs-infra-core": ">=0.4.0 <1.0.0",
-    "eslint": "^9.0.0"
+    "eslint": "^9.0.0",
+    "govuk-frontend": ">=6.5.0 <7.0.0"
   },
   "devDependencies": {
     "@defra/lis-hubs-infra-access": "^0.29.0",
@@ -81,7 +85,9 @@
     "@vitest/coverage-istanbul": "^4.1.10",
     "audit-ci": "^7.1.0",
     "eslint": "^9.0.0",
+    "govuk-frontend": "6.5.0",
     "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
     "prettier": "^3.8.4",
     "vitest": "^4.1.10"
   }

package/src/components/error-pages.js

@@ -0,0 +1,3 @@
+import { Button } from 'govuk-frontend'
+
+export const errorPageComponents = [Button]

package/src/components/error-pages.test.js

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import { Button } from 'govuk-frontend'
+import { describe, expect, test } from 'vitest'
+
+import { errorPageComponents } from './error-pages.js'
+
+describe('errorPageComponents', () => {
+  test('contains the error page components in order', () => {
+    // Arrange
+    const expected = [Button]
+
+    // Act
+    const actual = errorPageComponents
+
+    // Assert
+    expect(actual).toEqual(expected)
+  })
+})

package/src/components/layout.js

@@ -0,0 +1,3 @@
+import { ServiceNavigation, SkipLink } from 'govuk-frontend'
+
+export const layoutComponents = [ServiceNavigation, SkipLink]

package/src/components/layout.test.js

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import { ServiceNavigation, SkipLink } from 'govuk-frontend'
+import { describe, expect, test } from 'vitest'
+
+import { layoutComponents } from './layout.js'
+
+describe('layoutComponents', () => {
+  test('contains the layout components in order', () => {
+    // Arrange
+    const expected = [ServiceNavigation, SkipLink]
+
+    // Act
+    const actual = layoutComponents
+
+    // Assert
+    expect(actual).toEqual(expected)
+  })
+})

package/src/components/scrollable-table.js

@@ -0,0 +1,68 @@
+import { Component } from 'govuk-frontend'
+
+const ARIA_LABEL_ATTRIBUTE = 'aria-label'
+const ORIGINAL_LABEL_ATTRIBUTE = 'data-original-aria-label'
+
+/**
+ * Drops the tab stop from a scrollable region while its content fits.
+ */
+export class ScrollableTable extends Component {
+  static moduleName = 'lis-scrollable-table'
+
+  /**
+   * @param {object} $root - the scrollable wrapper element
+   */
+  constructor($root) {
+    super($root)
+
+    this.update()
+
+    // Watches the table as well as the wrapper: the table can widen after
+    // start-up without the window resizing, for example when the font loads.
+    const resizeObserver = new globalThis.ResizeObserver(() => this.update())
+    resizeObserver.observe(this.$root)
+    for (const $child of this.$root.children) {
+      resizeObserver.observe($child)
+    }
+  }
+
+  /**
+   * Applies the focusable region attributes only while the content overflows.
+   */
+  update() {
+    if (this.$root.scrollWidth > this.$root.clientWidth) {
+      this.makeFocusableRegion()
+    } else {
+      this.removeFocusableRegion()
+    }
+  }
+
+  /**
+   * Lets keyboard users reach the region to scroll it.
+   */
+  makeFocusableRegion() {
+    const label =
+      this.$root.getAttribute(ORIGINAL_LABEL_ATTRIBUTE) ??
+      this.$root.getAttribute(ARIA_LABEL_ATTRIBUTE)
+
+    if (label !== null) {
+      this.$root.setAttribute(ARIA_LABEL_ATTRIBUTE, label)
+    }
+    this.$root.setAttribute('tabindex', '0')
+    this.$root.setAttribute('role', 'region')
+  }
+
+  /**
+   * Avoids an empty tab stop on a table that fits, keeping the label to restore later.
+   */
+  removeFocusableRegion() {
+    const label = this.$root.getAttribute(ARIA_LABEL_ATTRIBUTE)
+
+    if (label !== null) {
+      this.$root.setAttribute(ORIGINAL_LABEL_ATTRIBUTE, label)
+    }
+    this.$root.removeAttribute('tabindex')
+    this.$root.removeAttribute('role')
+    this.$root.removeAttribute(ARIA_LABEL_ATTRIBUTE)
+  }
+}

package/src/components/scrollable-table.test.js

@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+import { createAll } from 'govuk-frontend'
+import { afterEach, beforeAll, describe, expect, test, vi } from 'vitest'
+
+import { ScrollableTable } from './scrollable-table.js'
+
+function setWidths(element, { scrollWidth, clientWidth }) {
+  Object.defineProperty(element, 'scrollWidth', {
+    configurable: true,
+    value: scrollWidth
+  })
+  Object.defineProperty(element, 'clientWidth', {
+    configurable: true,
+    value: clientWidth
+  })
+}
+
+const resizeObservers = []
+
+class FakeResizeObserver {
+  constructor(callback) {
+    this.callback = callback
+    this.observed = []
+    resizeObservers.push(this)
+  }
+
+  observe(element) {
+    this.observed.push(element)
+  }
+}
+
+function triggerResize() {
+  for (const resizeObserver of resizeObservers) {
+    resizeObserver.callback([])
+  }
+}
+
+function renderWrapper(widths) {
+  document.body.innerHTML =
+    '<div data-module="lis-scrollable-table" tabindex="0" role="region" aria-label="Animals"><table></table></div>'
+  const wrapper = document.querySelector('[data-module]')
+  setWidths(wrapper, widths)
+  return wrapper
+}
+
+describe('ScrollableTable', () => {
+  beforeAll(() => {
+    document.body.classList.add('govuk-frontend-supported')
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    resizeObservers.length = 0
+    document.body.innerHTML = ''
+  })
+
+  test('removes the focusable region attributes when the table does not overflow', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+
+    // Act
+    createAll(ScrollableTable)
+
+    // Assert
+    expect(wrapper.hasAttribute('tabindex')).toBe(false)
+    expect(wrapper.hasAttribute('role')).toBe(false)
+    expect(wrapper.hasAttribute('aria-label')).toBe(false)
+    expect(wrapper.getAttribute('data-original-aria-label')).toBe('Animals')
+    expect(wrapper.hasAttribute('data-lis-scrollable-table-init')).toBe(true)
+  })
+
+  test('keeps the focusable region attributes when the table overflows', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 600, clientWidth: 300 })
+
+    // Act
+    createAll(ScrollableTable)
+
+    // Assert
+    expect(wrapper.getAttribute('tabindex')).toBe('0')
+    expect(wrapper.getAttribute('role')).toBe('region')
+    expect(wrapper.getAttribute('aria-label')).toBe('Animals')
+  })
+
+  test('restores the attributes, including the label, when the table starts to overflow when resized', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+    createAll(ScrollableTable)
+
+    // Act
+    setWidths(wrapper, { scrollWidth: 600, clientWidth: 300 })
+    triggerResize()
+
+    // Assert
+    expect(wrapper.getAttribute('tabindex')).toBe('0')
+    expect(wrapper.getAttribute('role')).toBe('region')
+    expect(wrapper.getAttribute('aria-label')).toBe('Animals')
+  })
+
+  test('removes the attributes again when the table stops overflowing when resized', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 600, clientWidth: 300 })
+    createAll(ScrollableTable)
+
+    // Act
+    setWidths(wrapper, { scrollWidth: 300, clientWidth: 300 })
+    triggerResize()
+
+    // Assert
+    expect(wrapper.hasAttribute('tabindex')).toBe(false)
+    expect(wrapper.hasAttribute('aria-label')).toBe(false)
+  })
+
+  test('leaves a wrapper without an aria-label unlabelled when restoring', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+    wrapper.removeAttribute('aria-label')
+    createAll(ScrollableTable)
+
+    // Act
+    setWidths(wrapper, { scrollWidth: 600, clientWidth: 300 })
+    triggerResize()
+
+    // Assert
+    expect(wrapper.getAttribute('role')).toBe('region')
+    expect(wrapper.hasAttribute('aria-label')).toBe(false)
+  })
+
+  test('watches both the wrapper and the table for size changes', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+
+    // Act
+    createAll(ScrollableTable)
+
+    // Assert
+    expect(resizeObservers[0].observed).toEqual([
+      wrapper,
+      wrapper.querySelector('table')
+    ])
+  })
+
+  test('throws when constructed twice on the same element', () => {
+    // Arrange
+    const wrapper = renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+    const first = new ScrollableTable(wrapper)
+
+    // Act
+    let second, error
+    try {
+      second = new ScrollableTable(wrapper)
+    } catch (e) {
+      error = e
+    }
+
+    // Assert
+    expect(first).toBeInstanceOf(ScrollableTable)
+    expect(second).toBeUndefined()
+    expect(error).toBeDefined()
+    expect(error.name).toBe('InitError')
+    expect(resizeObservers).toHaveLength(1)
+  })
+
+  test('does not double-apply when createAll runs twice on the same document', () => {
+    // Arrange
+    renderWrapper({ scrollWidth: 300, clientWidth: 300 })
+    const log = vi.spyOn(console, 'log').mockReturnValueOnce(undefined)
+    createAll(ScrollableTable)
+
+    // Act
+    createAll(ScrollableTable)
+
+    // Assert
+    expect(resizeObservers).toHaveLength(1)
+    expect(log).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/sortable-paginated-table.scss

@@ -13,7 +13,7 @@
   }
 
   &:focus {
-    outline: none;
+    outline: $govuk-focus-width solid transparent;
     color: govuk-functional-colour('focus-text');
     background-color: govuk-functional-colour('focus');
     box-shadow:
@@ -34,6 +34,27 @@
   position: relative;
   overflow-x: auto;
 
+  // Scroll shadows: an edge shadows only while more of the table is hidden
+  // past it. The body-coloured covers scroll with the content and hide each
+  // shadow once that end is reached, so a table that fits shows none.
+  background:
+    linear-gradient(
+        to right,
+        govuk-functional-colour('body-background') 30%,
+        transparent
+      )
+      left center / 40px 100% no-repeat local,
+    linear-gradient(
+        to left,
+        govuk-functional-colour('body-background') 30%,
+        transparent
+      )
+      right center / 40px 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), transparent)
+      left center / 14px 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), transparent)
+      right center / 14px 100% no-repeat scroll;
+
   // The GOV.UK non-text focus state - yellow alone has too little contrast
   // against a white page. Both rings sit outside the box, clear of the text.
   &:focus {

package/src/components/sub-navigation.scss

@@ -60,7 +60,7 @@
       0 -2px govuk-functional-colour('focus'),
       0 4px govuk-functional-colour('focus-text');
     text-decoration: none;
-    outline: none;
+    outline: $govuk-focus-width solid transparent;
   }
 
   &[aria-current='page'] {

package/src/nunjucks/components/search-form/search-form.test.js

@@ -42,11 +42,43 @@ describe('searchForm()', () => {
 
     // Assert
     expect(html).toContain(
-      '<p class="govuk-body" id="search-hint">Search by ear tag</p>'
+      '<div class="govuk-hint" id="search-hint">Search by ear tag</div>'
     )
     expect(html).toContain('aria-describedby="search-hint"')
   })
 
+  test('makes the form the search landmark, labelled by the label text', () => {
+    // Act
+    const html = render({ label: 'Search animals', hint: 'Search by ear tag' })
+
+    // Assert
+    expect(html).toContain(
+      '<form method="GET" class="lis-search-form" role="search" aria-label="Search animals">'
+    )
+  })
+
+  test('wraps the label, hint and input in the form', () => {
+    // Act
+    const html = render({ label: 'Search animals', hint: 'Search by ear tag' })
+
+    // Assert
+    expect(html.indexOf('<form')).toBeLessThan(html.indexOf('govuk-form-group'))
+    expect(html.indexOf('govuk-hint')).toBeLessThan(html.indexOf('</form>'))
+    expect(html.indexOf('</form>')).toBeGreaterThan(
+      html.indexOf('type="search"')
+    )
+  })
+
+  test('renders the inset text outside the form', () => {
+    // Act
+    const html = render({ label: 'Search', insetText: 'Up to 24 hours' })
+
+    // Assert
+    expect(html.indexOf('govuk-inset-text')).toBeGreaterThan(
+      html.indexOf('</form>')
+    )
+  })
+
   test('does not describe the input by a hint when none is given', () => {
     // Act
     const html = render({ label: 'Search' })

package/src/nunjucks/components/search-form/template.njk

@@ -1,17 +1,17 @@
 {%- set id = params.id or params.name or "search" -%}
 
-<div class="govuk-form-group">
-  <h2 class="govuk-label-wrapper">
-    <label class="govuk-label govuk-label--m" for="{{ id }}">
-      {{ params.label }}
-    </label>
-  </h2>
+<form method="GET" class="lis-search-form" role="search" aria-label="{{ params.label }}">
+  <div class="govuk-form-group">
+    <h2 class="govuk-label-wrapper">
+      <label class="govuk-label govuk-label--m" for="{{ id }}">
+        {{ params.label }}
+      </label>
+    </h2>
 
-  {%- if params.hint -%}
-    <p class="govuk-body" id="{{ id }}-hint">{{ params.hint }}</p>
-  {%- endif -%}
+    {%- if params.hint -%}
+      <div class="govuk-hint" id="{{ id }}-hint">{{ params.hint }}</div>
+    {%- endif -%}
 
-  <form method="GET" class="lis-search-form">
     {%- for field in params.hiddenFields -%}
       <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
     {%- endfor -%}
@@ -34,8 +34,8 @@
         </button>
       </div>
     </div>
-  </form>
-</div>
+  </div>
+</form>
 
 {%- if params.insetText -%}
   <div class="govuk-inset-text">

package/src/nunjucks/components/sortable-paginated-table/sortable-paginated-table.test.js

@@ -169,7 +169,21 @@ test('wraps the table in a focusable, labelled region so it can be scrolled by k
 
   assert.match(
     html,
-    /<div class="lis-sortable-table__wrapper" tabindex="0" role="region" aria-label="Animals table">\s*<table/
+    /<div class="lis-sortable-table__wrapper" data-module="lis-scrollable-table" tabindex="0" role="region" aria-label="Animals table">\s*<table/
+  )
+})
+
+test('marks the wrapper as a lis-scrollable-table module', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals'
+  })
+
+  assert.match(
+    html,
+    /<div class="lis-sortable-table__wrapper" data-module="lis-scrollable-table"/
   )
 })
 

package/src/nunjucks/components/sortable-paginated-table/template.njk

@@ -46,7 +46,7 @@
   {{ params.caption }}{% if sortableColumns | length %}<span class="govuk-visually-hidden"> (column headers with links are sortable).</span>{% endif %}
 {%- endset -%}
 
-<div class="lis-sortable-table__wrapper" tabindex="0" role="region" aria-label="{{ (params.caption ~ ' table') if params.caption else 'Table' }}">
+<div class="lis-sortable-table__wrapper" data-module="lis-scrollable-table" tabindex="0" role="region" aria-label="{{ (params.caption ~ ' table') if params.caption else 'Table' }}">
   {{ govukTable({
     caption: (captionHtml | safe) if params.caption else undefined,
     captionClasses: params.captionClasses or "govuk-visually-hidden",

package/src/nunjucks/context.js

@@ -52,8 +52,6 @@ function createPermissionCheck(request) {
 /**
  * @typedef {object} ErrorPageLinks
  * @property {string} [contactHref] - every error page's contact link; defaults to the BCMS GOV.UK page
- * @property {string} [homeHref] - the page not found "Home page" link; defaults to '/'
- * @property {string} [getStartedHref] - the page not found "Get started" link; defaults to '/'
  */
 
 /**
@@ -69,9 +67,7 @@ export function createNunjucksContextBuilder({
   errorPages = {}
 }) {
   const errorPageLinks = {
-    contactHref: errorPages.contactHref ?? BCMS_CONTACT_HREF,
-    homeHref: errorPages.homeHref ?? '/',
-    getStartedHref: errorPages.getStartedHref ?? '/'
+    contactHref: errorPages.contactHref ?? BCMS_CONTACT_HREF
   }
   const sectionName = moduleId ? (getModuleById(moduleId)?.label ?? null) : null
   const manifestPath = path.join(

package/src/nunjucks/context.test.js

@@ -292,7 +292,7 @@ describe('createNunjucksContextBuilder() hub flags', () => {
 })
 
 describe('createNunjucksContextBuilder() errorPages', () => {
-  test('defaults the contact link to the BCMS GOV.UK page and the other links to the root', () => {
+  test('defaults the contact link to the BCMS GOV.UK page', () => {
     // Arrange
     const contextBuilder = createNunjucksContextBuilder({
       config: createConfig(),
@@ -308,9 +308,7 @@ describe('createNunjucksContextBuilder() errorPages', () => {
     // Assert
     expect(context.errorPages).toEqual({
       contactHref:
-        'https://www.gov.uk/government/organisations/british-cattle-movement-service',
-      homeHref: '/',
-      getStartedHref: '/'
+        'https://www.gov.uk/government/organisations/british-cattle-movement-service'
     })
   })
 
@@ -322,9 +320,7 @@ describe('createNunjucksContextBuilder() errorPages', () => {
       logger: {},
       readFileSync: () => '{}',
       errorPages: {
-        contactHref: 'https://example.com/contact',
-        homeHref: '/home',
-        getStartedHref: '/start'
+        contactHref: 'https://example.com/contact'
       }
     })
     const request = { headers: {}, path: '/', auth: { credentials: null } }
@@ -334,20 +330,18 @@ describe('createNunjucksContextBuilder() errorPages', () => {
 
     // Assert
     expect(context.errorPages).toEqual({
-      contactHref: 'https://example.com/contact',
-      homeHref: '/home',
-      getStartedHref: '/start'
+      contactHref: 'https://example.com/contact'
     })
   })
 
-  test('keeps the default for any link the errorPages option leaves out', () => {
+  test('keeps the default for a link the errorPages option leaves undefined', () => {
     // Arrange
     const contextBuilder = createNunjucksContextBuilder({
       config: createConfig(),
       getRequestBasePath: () => '',
       logger: {},
       readFileSync: () => '{}',
-      errorPages: { getStartedHref: '/start', homeHref: undefined }
+      errorPages: { contactHref: undefined }
     })
     const request = { headers: {}, path: '/', auth: { credentials: null } }
 
@@ -357,9 +351,7 @@ describe('createNunjucksContextBuilder() errorPages', () => {
     // Assert
     expect(context.errorPages).toEqual({
       contactHref:
-        'https://www.gov.uk/government/organisations/british-cattle-movement-service',
-      homeHref: '/',
-      getStartedHref: '/start'
+        'https://www.gov.uk/government/organisations/british-cattle-movement-service'
     })
   })
 })

package/src/nunjucks/plugin.test.js

@@ -94,9 +94,7 @@ describe('createNunjucksConfig()', () => {
       get: vi.fn((key) => (key === 'root' ? projectRoot : false))
     }
     const errorPages = {
-      contactHref: 'https://example.com/contact',
-      homeHref: '/home',
-      getStartedHref: '/start'
+      contactHref: 'https://example.com/contact'
     }
 
     // Act

package/src/nunjucks/routes/error/error-pages.test.js

@@ -38,7 +38,7 @@ function textOf(html) {
 }
 
 describe('error pages', () => {
-  test('page not found shows the heading, the three links and the support link', () => {
+  test('page not found shows the heading, the guidance and the BCMS link', () => {
     // Arrange
     const context = { pageTitle: 'Page not found' }
 
@@ -51,18 +51,13 @@ describe('error pages', () => {
     )
     expect(html).toContain('<h1 class="govuk-heading-l">Page not found</h1>')
     expect(textOf(html)).toContain(
-      "Sorry, we could not find the page you were looking for. You might find what you're looking for by visiting: Home page Get started GOV.UK If you cannot find the information you need, contact our support team."
+      'If you typed the web address, check it is correct. If you pasted the web address, check you copied the entire address. If the web address is correct or you selected a link or button, contact the British Cattle Movement Service (BCMS) if you need to speak to someone about your account.'
     )
-    expect(html).toContain('<a class="govuk-link" href="/home">Home page</a>')
     expect(html).toContain(
-      '<a class="govuk-link" href="/start">Get started</a>'
-    )
-    expect(html).toContain(
-      '<a class="govuk-link" href="https://www.gov.uk">GOV.UK</a>'
-    )
-    expect(html).toContain(
-      '<a class="govuk-link" href="https://example.com/contact">contact our support team</a>'
+      '<a class="govuk-link" href="https://example.com/contact">British Cattle Movement Service (BCMS)</a>'
     )
+    expect(html).not.toContain('Home page')
+    expect(html).not.toContain('Get started')
   })
 
   test('not authorised offers a sign in button when signInHref is given', () => {
@@ -104,7 +99,7 @@ describe('error pages', () => {
       '<title>Sorry, you are not authorised to view this page - Livestock Information</title>'
     )
     expect(html).toContain(
-      '<h1 class="govuk-heading-l">Sorry, you are not authorised to view this page.</h1>'
+      '<h1 class="govuk-heading-l">Sorry, you are not authorised to view this page</h1>'
     )
     expect(textOf(html)).toContain(
       'Check your details are correct and try again. If you think this is incorrect contact our support team.'

package/src/nunjucks/routes/error/not-authorised.njk

@@ -3,7 +3,7 @@
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Sorry, you are not authorised to view this page.</h1>
+      <h1 class="govuk-heading-l">Sorry, you are not authorised to view this page</h1>
       <p class="govuk-body">Check your details are correct and try again.</p>
       <p class="govuk-body">If you think this is incorrect <a class="govuk-link" href="{{ errorPages.contactHref }}">contact our support team</a>.</p>
       {% if signInHref %}

package/src/nunjucks/routes/error/page-not-found.njk

@@ -4,14 +4,9 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       <h1 class="govuk-heading-l">Page not found</h1>
-      <p class="govuk-body">Sorry, we could not find the page you were looking for.</p>
-      <p class="govuk-body">You might find what you're looking for by visiting:</p>
-      <ul class="govuk-list">
-        <li><a class="govuk-link" href="{{ errorPages.homeHref }}">Home page</a></li>
-        <li><a class="govuk-link" href="{{ errorPages.getStartedHref }}">Get started</a></li>
-        <li><a class="govuk-link" href="https://www.gov.uk">GOV.UK</a></li>
-      </ul>
-      <p class="govuk-body">If you cannot find the information you need, <a class="govuk-link" href="{{ errorPages.contactHref }}">contact our support team</a>.</p>
+      <p class="govuk-body">If you typed the web address, check it is correct.</p>
+      <p class="govuk-body">If you pasted the web address, check you copied the entire address.</p>
+      <p class="govuk-body">If the web address is correct or you selected a link or button, contact the <a class="govuk-link" href="{{ errorPages.contactHref }}">British Cattle Movement Service (BCMS)</a> if you need to speak to someone about your account.</p>
     </div>
   </div>
 {% endblock %}

package/src/nunjucks/templates/layouts/base.njk

@@ -38,13 +38,16 @@
   <link href="{{ getAssetPath('src/client/stylesheets/application.scss') }}" rel="stylesheet">
 {% endblock %}
 
-{% block header %}
+{% block govukHeader %}
   {{ govukHeader({
     homepageUrl: "https://www.gov.uk/",
     classes: "app-header",
     containerClasses: "govuk-width-container",
     useTudorCrown: true
   }) }}
+{% endblock %}
+
+{% block govukServiceNavigation %}
   {% if isSignedIn %}
     {% set signOutNavigationEnd %}
       <li class="govuk-service-navigation__item app-service-navigation__item--right">
@@ -60,7 +63,9 @@
       navigationEnd: signOutNavigationEnd
     }
   }) }}
+{% endblock %}
 
+{% block headerEnd %}
   {{ govukPhaseBanner({
     tag: {
       html: "<b>Steel Thread</b>",
@@ -84,7 +89,7 @@
 
 {% block content %}{% endblock %}
 
-{% block footer %}
+{% block govukFooter %}
   {{ govukFooter({
     meta: {
       items: [

package/src/nunjucks/templates/layouts/base.test.js

@@ -0,0 +1,76 @@
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import { fileURLToPath } from 'node:url'
+
+import nunjucks from 'nunjucks'
+import { describe, expect, test } from 'vitest'
+
+const require = createRequire(import.meta.url)
+const govukRoot = path.join(
+  path.dirname(require.resolve('govuk-frontend/package.json')),
+  'dist'
+)
+const layoutsRoot = path.dirname(fileURLToPath(import.meta.url))
+const templatesRoot = path.dirname(layoutsRoot)
+const componentsRoot = path.join(path.dirname(templatesRoot), 'components')
+const environment = new nunjucks.Environment(
+  new nunjucks.FileSystemLoader([templatesRoot, componentsRoot, govukRoot]),
+  { autoescape: true, trimBlocks: true, lstripBlocks: true }
+)
+environment.addGlobal('getAssetPath', (asset) => `/${asset}`)
+
+function render(context = {}) {
+  return environment.render('layouts/base.njk', {
+    isSignedIn: true,
+    logoutUrl: '/sign-out',
+    navigation: [{ href: '/one', text: 'One' }],
+    ...context
+  })
+}
+
+function countOf(html, fragment) {
+  return html.split(fragment).length - 1
+}
+
+describe('base layout', () => {
+  test('renders one header landmark wrapping the header and service navigation', () => {
+    // Act
+    const html = render()
+    const headerStart = html.indexOf('<header class="govuk-template__header')
+    const headerEnd = html.indexOf('</header>', headerStart)
+    const headerHtml = html.slice(headerStart, headerEnd)
+
+    // Assert
+    expect(countOf(html, '<header class="govuk-template__header')).toBe(1)
+    expect(headerHtml).toContain('govuk-header')
+    expect(headerHtml).toContain('govuk-service-navigation')
+    expect(headerHtml).toContain('govuk-phase-banner')
+  })
+
+  test('renders one footer landmark wrapping the footer', () => {
+    // Act
+    const html = render()
+    const footerStart = html.indexOf('<footer class="govuk-template__footer')
+    const footerEnd = html.indexOf('</footer>', footerStart)
+
+    // Assert
+    expect(countOf(html, '<footer class="govuk-template__footer')).toBe(1)
+    expect(html.slice(footerStart, footerEnd)).toContain('govuk-footer')
+  })
+
+  test('renders the sign out link when signed in', () => {
+    // Act
+    const html = render()
+
+    // Assert
+    expect(html).toContain('href="/sign-out"')
+  })
+
+  test('does not render the sign out link when signed out', () => {
+    // Act
+    const html = render({ isSignedIn: false })
+
+    // Assert
+    expect(html).not.toContain('Sign out')
+  })
+})