Update page titles to assist screen reader users

Author: sc15zs

runner/src/server/plugins/engine/models/AdapterSummaryViewModel.ts

@@ -1,5 +1,6 @@
 import {AdapterViewModel} from "./AdapterViewModel";
 import {AdapterFormModel} from "./AdapterFormModel";
+import { buildWindowTitle } from "../util/windowTitle";  
 import {FormSubmissionState} from "../../../../../../digital-form-builder/runner/src/server/plugins/engine/types";
 import {HapiRequest} from "../../../../../../digital-form-builder/runner/src/server/types";
 import {AdapterInitialiseSessionOptions} from "../../initialize-session/types";
@@ -10,6 +11,7 @@ export class AdapterSummaryViewModel extends AdapterViewModel {
     markAsCompleteComponent: boolean | undefined;
     markAsCompleteError: any;
     callback?: AdapterInitialiseSessionOptions;
+    windowTitle: string;
 
     constructor(
         pageTitle: string,
@@ -23,6 +25,9 @@ export class AdapterSummaryViewModel extends AdapterViewModel {
         super(pageTitle, model, state, request, page, isSavePerPageMode, validateStateTillGivenPath);
         this.markAsCompleteComponent = state.callback?.markAsCompleteComponent;
         this.markAsComplete = state.markAsComplete;
+
+        const serviceName = model.name || "";
+        this.windowTitle = buildWindowTitle(pageTitle, serviceName);
     }
 
 

runner/src/server/plugins/engine/page-controllers/PageControllerBase.ts

@@ -1,6 +1,7 @@
 import {merge, reach} from "@hapi/hoek";
 import * as querystring from "querystring";
 
+import { buildWindowTitle } from "../util/windowTitle";  
 import {
     feedbackReturnInfoKey
 } from "../../../../../../digital-form-builder/runner/src/server/plugins/engine/helpers";
@@ -148,6 +149,7 @@ export class PageControllerBase {
         name: string;
         pageTitle: string;
         sectionTitle: string;
+        windowTitle: string;
         showTitle: boolean;
         components: ComponentCollectionViewModel;
         errors: FormSubmissionErrors;
@@ -161,6 +163,9 @@ export class PageControllerBase {
     } {
         let showTitle = true;
         let pageTitle = this.title;
+        const serviceName = this.name;
+        let windowTitle = buildWindowTitle(pageTitle, serviceName);
+
         if (config.allowUserTemplates) {
             pageTitle = nunjucks.renderString(pageTitle, {
                 ...formData,
@@ -203,6 +208,7 @@ export class PageControllerBase {
             name: this.name,
             pageTitle,
             sectionTitle,
+            windowTitle,
             showTitle,
             components,
             errors,

runner/src/server/plugins/engine/util/windowTitle.ts

@@ -0,0 +1,7 @@
+export function buildWindowTitle(pageTitle: string, serviceName: string): string {
+    // Build the full page title
+    const parts = [pageTitle, serviceName, "GOV.UK"].filter(
+        part => part !== undefined && part !== null && part.trim() !== ""
+    );
+    return parts.join(" - ");
+}

runner/src/server/views/layout.html

@@ -97,9 +97,7 @@
     <script src="{{ assetPath }}/tinymce.min.js"></script>
 {% endblock %}
 
-{% block pageTitle %}
-    {{ pageTitle }}
-{% endblock %}
+{% block pageTitle %}{{windowTitle}}{% endblock %}
 
 {% block skipLink %}
     {{ govukSkipLink({