Header, footer, and feedback form

app/assets/sass/_overrides.scss

@@ -1,3 +1,30 @@
+// Banner New features notification 
+.app-pre-footer-banner {
+  border-top: 1px solid #b1b4b6;
+}
+
+.app-pre-footer-banner .govuk-phase-banner__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  @include nhsuk-font(16);
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.app-pre-footer-banner .govuk-phase-banner__content__tag {
+  @include nhsuk-font(16);
+  margin-right: 18px;
+  margin-bottom: 0;
+}
+
+.app-pre-footer-banner .govuk-phase-banner__text {
+  @include nhsuk-font(16);
+  display: inline;
+  margin-bottom: 0;
+}
+//
+
 .app-u-hide-on-mobile {
   @include nhsuk-media-query($until: tablet) {
     display: none;

app/views/accessibility-statement.html

@@ -0,0 +1,112 @@
+{% extends "layouts/ravs-plus-layout-1-maternity.html" %}
+
+{% set pageName = "Accessibility statement" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>{{ pageName }}</h1>
+
+        <p>This accessibility statement applies to the Record a vaccination service
+            (<a href="https://www.ravs.england.nhs.uk">www.ravs.england.nhs.uk</a>)</p>
+
+        <p>This service is run by NHS England. <br> <br>
+            <a href="https://mcmw.abilitynet.org.uk/">AbilityNet</a> has advice on making your device easier to use if you have a disability.</p>
+
+    <h2>How accessible this service is </h2>
+    <p>We know parts of this service are not fully accessible. For example: </p>
+
+    <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>some content is not displayed correctly when you zoom in</li>
+        <li>some interactive elements are not announced to screen readers</li>
+        <li>some interactive elements are not accessible to keyboard users</li>
+        <li>some error messages are not optimised for screen readers and keyboard users</li>
+        <li>some tables have missing headers</li>
+        <li>some focus states are missing</li>
+      </ul>
+
+
+
+    <h2>Give feedback and report accessibility problems</h2>
+    <p>We want to improve the accessibility of the Record a vaccination service.</p>
+    <p>If you find any problems not listed on this page or think we’re not meeting accessibility requirements, <a href="/help-and-support">contact us</a>.</p>
+
+
+    <h2>Enforcement procedure</h2>
+    <p>The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the 'accessibility regulations').</p>
+    <p>If you’re not happy with how we respond to your complaint, <a href="https://www.equalityadvisoryservice.com/">contact the Equality Advisory and Support Service (EASS)</a>.</p>
+
+    <h2>Technical information about this website’s accessibility</h2>
+    <p>NHS England is committed to making this service accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.</p>
+
+    <h2>Compliance status</h2>
+    <p>This service is partially compliant with the <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines version 2.2</a> AA standard, due to the non-compliances listed below.</p>
+
+
+    <h2>Non-accessible content</h2>
+    <p>The content listed below is non-accessible for the reasons provided.</p>
+
+    <h4>Various pages</h4>
+    <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>Links from error summaries do not always go to the relevant input fields and the summary is not always properly focused to. (3.3.1 Error Identification  and 3.3.3 Error Suggestion) </li>
+        <li>Some error messages appear when leaving required input fields. This is not announced by screen readers. (3.3.1 Error Identification and 3.3.3 Error Suggestion) </li>
+        <li>System JavaScript pop-ups are used in some places to signify an error. They can interrupt user flow, do not always work with assistive technologies and can affect focus management. (3.3.1 Error Identification) </li>
+        <li>Some tables have missing column headings. (1.3.1 Info and Relationships) </li>
+        <li>Some items are not highlighted by the keyboard focus indicator when accessed via keyboard navigation. (2.4.7 Focus Visible) </li>
+        <li>Some content is not displayed correctly when using your browser to zoom in. (1.4.10 Reflow) </li>
+      </ul>
+
+
+      <h4>Record a vaccination section</h4>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>On the Find a patient page, Aria labels are used when not needed. (4.1.2 Name, Role, Value) </li>
+        <li>On the Find a patient page, when clicking on search, results appear at the bottom of the page. This is not announced to screen readers and focus moves to the top of the page. (1.3.2 Meaningful Sequence) </li>
+        <li>On the Patient details page, there are empty fieldsets in the tables which may cause confusion. (1.3.1 Info and Relationships)  </li>
+        <li>On the Patient details page, the 'Continue' button appears before the vaccination history. Screen reader users may never get to this content. (1.3.2 Meaningful sequence) </li>
+        <li>On the Assess and Vaccinate pages, the date picker does not work well with keyboard navigation and screen readers. (1.3.1 Info and Relationships)  </li>
+        <li>On the Vaccinate page, disabled fields are used for dose and expiry date which may cause confusion for some users. (1.3.3 Sensory Characteristics) </li>
+        <li>On the Check and confirm page, all the content is contained within a fieldset. This can create extra confusion for screen reader users. (1.3.1 Info and Relationships) </li>
+        <li>On the Check and confirm page, there are no focus states on the 'Change' links. (2.4.7 Focus Visible) </li>
+        <li>In the 'Record saved' banner, the link to 'View record' is not marked up correctly as a link so it is just read out as text to screen readers. (1.3.1 Info and Relationships and 1.3.5  Identity Input Purpose) </li>
+      </ul>
+
+      <h4>Vaccines section</h4>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>There are multiple links named 'View product' and 'Add batch' in a table, with no visually hidden text. (1.3.1 Info and Relationships)</li>
+        <li>On the Choose site page, the autocomplete dropdown is not announced to screen readers. (3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value and 4.1.3 Status Messages)</li>
+        <li>On the Choose vaccine page, the secondary options are not conditionally revealed. (1.3.1 Info and Relationships)</li>
+        <li>On the Vaccine batches page, the modal dialogue to reactivate a batch cannot be closed with the escape key. (2.2.2 Pause, Stop, Hide)</li>
+        <li>On the Vaccine batches page, the definition list to describe a vaccine is incorrectly using labels for the key value. (1.3.1 Info and Relationships)</li>
+        <li>When you add a vaccine, there is no confirmation message. This might cause confusion. (4.1.2 Name, Role, Value)</li>
+      </ul>
+
+      <h4>Manage users section</h4>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>In Manage users, when you add a user, there is no confirmation message. This might cause confusion. (4.1.2 Name, Role, Value) </li>
+      </ul>
+
+
+      <h4>Header and banner</h4>
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>When clicking on the user's email address in the site header, it's not clear where the link goes and focus remains on the link. (2.4.4 Link Purpose and 2.4.3 Focus Order) </li>
+        <li>When selecting either option from the cookies banner, focus does not go back to the top of the page. (1.3.2 Meaningful Sequence) </li>
+    </ul>
+
+
+
+    <h2>What we’re doing to improve accessibility</h2>
+    <p>We are working to fix all content that fails to meet the WCAG 2.2 AA standard.</p>
+    <p>We are planning significant changes to the service in the next 6 to 12 months.</p>
+    <p>Following these changes, we will carry out another assessment of the service and update this statement.</p>
+
+    <h4>Preparation of this accessibility statement</h4>
+    <p>This statement was prepared on 1 April 2025.</p>
+    <p>The Record a vaccination service (<a href="https://www.ravs.england.nhs.uk">www.ravs.england.nhs.uk</a>) was tested on 4 October 2024 against the WCAG 2.2 AA standard by the NHS Accessibility Lab team.  We also used findings from the Record a vaccination team's own testing when preparing this statement.</p>
+
+
+    </div>
+
+  </div>
+{% endblock %}

app/views/feedback-form-1-0-0/index.html

@@ -0,0 +1,185 @@
+{% extends 'layouts/ravs-plus-layout-1-maternity.html' %}
+
+{% set pageName = "Give feedback on the pilot Record a vaccination maternity service" %}
+
+{% block head %}
+  {{ super() }}
+  <style>
+    html, body, .nhsuk-template, .nhsuk-main-wrapper {
+      background-color: #ffffff !important;
+    }
+
+    footer, .nhsuk-footer {
+      display: none !important;
+    }
+
+    .app-feedback-header {
+      background-color: #005eb8;
+    }
+
+    .app-feedback-header__container {
+      padding: 32px;
+    }
+
+    .app-feedback-header__logo {
+      display: block;
+      width: 248px;
+      height: 100px;
+      max-width: 100%;
+      object-fit: contain;
+    }
+
+    .app-feedback-form__actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    #feedback-page .nhsuk-input, #feedback-page .nhsuk-textarea {
+      background-color: #e5e5e5;
+    }
+
+    .app-feedback-button {
+      background-color: #005eb8;
+      border-radius: 6px;
+      box-shadow: none;
+      font-size: 19px;
+      line-height: 1;
+      padding: 12px 20px;
+    }
+
+    .app-feedback-button .govuk-button__start-icon {
+      width: 12px;
+      height: 14px;
+      margin-left: 6px;
+    }
+
+    .app-feedback-button:hover {
+      background-color: #003d78;
+      box-shadow: none;
+    }
+
+    .app-feedback-button:active {
+      background-color: #002f5c;
+      box-shadow: none;
+    }
+
+    @media (max-width: 40.0525em) {
+      .app-feedback-header__container {
+        padding: 24px 16px;
+      }
+
+      .app-feedback-header__logo {
+        width: 220px;
+        height: auto;
+      }
+    }
+  </style>
+{% endblock %}
+
+{% block header %}
+  <header class="app-feedback-header" role="banner">
+    <div class="app-feedback-header__container">
+      <img
+        class="app-feedback-header__logo"
+        src="/images/feedback-form-nhs-logo.jpg"
+        alt="NHS"
+        width="293"
+        height="118"
+      />
+    </div>
+  </header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+{% block content %}
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+    <section id="feedback-page" aria-labelledby="page-heading">
+      <h1 class="nhsuk-heading-m" id="page-heading" tabindex="-1">
+        {{ pageName }}
+      </h1>
+
+      <p class="nhsuk-body">This will help us improve our service.</p>
+
+      <p class="nhsuk-body">
+        If the issue is urgent, do not leave feedback here. Instead contact <a class="nhsuk-link" href="mailto:england.ravs@nhs.net">england.ravs@nhs.net</a>.
+      </p>
+
+      <form id="feedback-form" novalidate>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label nhsuk-label--m" for="feedback">
+            Your feedback
+          </label>
+          <textarea
+            class="nhsuk-textarea"
+            id="feedback"
+            name="feedback"
+            rows="6"
+          ></textarea>
+        </div>
+
+        <div class="nhsuk-form-group">
+          <h2 class="nhsuk-heading-m">Your email address</h2>
+          <div class="nhsuk-hint" id="email-hint">
+            <p>
+              Provide an email address if you are happy for us to contact you about your feedback. We will not share it or use it for anything else.
+            </p>
+            <p>
+              All data captured will be handled, stored and processed by NHS England in compliance with GDPR requirements.
+            </p>
+          </div>
+          <label class="nhsuk-label" for="email">Email address</label>
+          <input class="nhsuk-input nhsuk-input--width-20" id="email" name="email" type="email" autocomplete="email" aria-describedby="email-hint"/>
+        </div>
+
+        <div class="app-feedback-form__actions">
+          <button class="govuk-button app-feedback-button" data-module="govuk-button" type="submit">
+            Next page
+            <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 33 50" aria-hidden="true" focusable="false">
+              <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+            </svg>
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <section id="confirmation-page" aria-labelledby="confirmation-heading" hidden tabindex="-1">
+      <h1 class="nhsuk-heading-m" id="confirmation-heading">
+        Thanks for your feedback.
+      </h1>
+      <p class="nhsuk-body">
+        We will use it to improve the Record a Vaccination Service (RAVS) maternity pilot.
+      </p>
+
+      <p class="nhsuk-body">
+        All data captured will be handled, stored and processed by NHS England in compliance with GDPR requirements.
+      </p>
+    </section>
+  </div>
+</div>
+{% endblock %}
+
+{% block pageScripts %}
+  <script>
+    (function () {
+      var form = document.getElementById("feedback-form");
+      var feedbackPage = document.getElementById("feedback-page");
+      var confirmationPage = document.getElementById("confirmation-page");
+
+      function showConfirmation() {
+        feedbackPage.hidden = true;
+        confirmationPage.hidden = false;
+        confirmationPage.focus();
+        window.history.replaceState(null, "", "#feedback-sent");
+      }
+
+      form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        if (!form.reportValidity()) return;
+        showConfirmation();
+      });
+    })();
+  </script>
+{% endblock %}

app/views/help-and-support.html

@@ -0,0 +1,38 @@
+{% extends 'layouts/ravs-plus-layout-1-maternity.html' %}
+
+{% set pageName = "Help and support" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
+
+      <p>Find answers to common questions in our user guide:</p>
+
+      <ul>
+        <li><a href="https://guide.ravs.england.nhs.uk/logging-in/">Logging in</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/record-vaccinations/">Recording a vaccination</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/managing-vaccines/">Managing vaccine batches</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/managing-users/">Managing users</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/records/">Editing and deleting records</a></li>
+        <li><a href="https://guide.ravs.england.nhs.uk/reporting/">Reports</a></li>
+      </ul>
+
+      <h2 class="nhsuk-heading-m">Contact us</h2>
+
+      <p>The Record a vaccination support team is available Monday to Friday, 8am to 6pm.</p>
+
+      <p>To contact the support team, you'll need to log in to the NHS National IT Customer Support Portal.</p>
+
+      {% from "action-link/macro.njk" import actionLink %}
+
+      {{ actionLink({
+        text: "Contact our support team",
+        href: "https://www.support.digitalservices.nhs.uk/csm?id=sc_cat_item&sys_id=7406446b9779f290dd80f2df9153af58"
+      }) }}
+
+    </div>
+  </div>
+
+{% endblock %}

app/views/index.html

@@ -18,6 +18,7 @@ <h2 class="nhsuk-heading-m">MVP: Maternity Private beta</h2>
 			<ul>
 				<li><a href="/mvp-patient-upload/index">Upload patient list</a></li>
 				<li><a href="/mvp-patient-list-and-export/index">Patient list and export</a></li>
+				<li><a href="/feedback-form-1-0-0/index">Qualtrics private beta feedback form</a></li>
 			</ul>
 
 			<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">