Merge review/2 branch into main for 6.3.0 release (#1953)

* initial prep, updating whats new section

* Content to intro the wcag 22 updates

* Updates listing content in accessibility section

* more links added to wcag 2.2 updates page

* Styling for wcag callout box and initial content on 'back link' component page - that uses the new styling

* Iterate WCAG 2.2 changes - content

* wcag notice moved to top of page and margin edited

* breadcrumbs page updated for wcag

* breadcrumb wcag link fixed

* wcag2-2 page, link to gov.uk guidance added, what you need to do section added

* buttons wcag guidance

* error message wcag guidance added

* footer wcag guidance added

* header wcag guidance added

* standardise quote marks

* select component guiance wcag updates

* summary list wcag guidance added

* tag wcag 2.2 gudiance added

* focus styles wcag 2.2 guidance added

* tweaked wcag summary box content and wcag highlight styling, to use inset text

* focus style wcag content tweak

* icon styles wcag content

* updates page - merged in march updates

* Iterate content re WCAG updates

* fixed last updated date on error message page

* add newline to main scss

* Adds new WCAG 2.2 content to accessibility guides  (#1931)

* wording tweak 'patterns needs' to 'patterns need'

* adds link to govuk wcag22 blog

* Added specific explanation for why we need to meet wcg 2.2 by oct 2024

* Adds an overview of wcag 2.2 updates within 'Accessibility guidance for:' sections

* formatting tweak on 'Accessibility guidance for:'

* rewording for "Accessibility guidance for:" content

* Iterate content

* "Accessibility guidance for:" wcag partials renamed

* rename wcag2-2 page

* add owasp suppression

---------

Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>
Co-authored-by: roshaanbajwa <roshaan.bajwa1@nhs.net>

* Merge wcag-2-2 branch into review 2 (#1932)

* wording tweak 'patterns needs' to 'patterns need'

* adds link to govuk wcag22 blog

* Added specific explanation for why we need to meet wcg 2.2 by oct 2024

* Adds an overview of wcag 2.2 updates within 'Accessibility guidance for:' sections

* formatting tweak on 'Accessibility guidance for:'

* rewording for "Accessibility guidance for:" content

* Iterate content

* "Accessibility guidance for:" wcag partials renamed

* rename wcag2-2 page

* add owasp suppression

* wcag2-2 page link text updated

---------

Co-authored-by: Ananda Maryon <anandamaryon@gmail.com>
Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>

* Links for new accessibility content per role added to whats new updates

* WCAG 2.2 design iteration from UR testing (#1949)

* addes detail for each design system pages updated for wcag 2-2

* updates page aligned with whats new

* homepage wcag notice added

* wcag design system updates moved to design system landing page

* rename and update wcag updates page

* wcag updates page content tweaks

* Iterate WCAG content

* table markup tidy and homepage card fix

* rename wcag updates page and update inbound links

* content tweaks on hompage, design system landing and wcag updates page

* fix sitemap link on whats new and upadtes pages

* minor content tweaks

---------

Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>

* remove typo in design system page heading id

* fix link to list of wcag changes on components and styles pages

* Make content crit changes

* reframe wording for wcag deadline

* changelog updated

* update package version

---------

Co-authored-by: Ananda Maryon <anandamaryon@gmail.com>
Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>
Co-authored-by: Ananda Maryon <159916913+anandamaryon1@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,26 @@
 # NHS digital service manual Changelog
 
+## 6.3.0 – 17 April 2024
+:new: **New features**
+- Add page on new accessibility requirements: WCAG 2.2
+- Add sections on making sure your service meets WCAG 2.2 for: Product and delivery and Design, Development and Testing
+- Add list of changes to meet new accessibility requirements to design system index page
+- Update components and styles for WCAG 2.2:
+    - Back link: guidance on positioning and keeping data the user has entered
+    - Breadcrumbs: guidance on positioning
+    - Buttons: guidance on minimum target size
+    - Error message: guidance on not clearing data the user has entered
+    - Footer: guidance on placing help links
+    - Header: guidance on placing help links and not hiding content that has a focus applied
+    - Select: guidance on avoiding click and drag
+    - Summary list: guidance on action link target size and keeping data the user has entered
+    - Tag: guidance on avoiding click and drag
+    - Focus state: guidance on not hiding content that has a focus applied
+    - Icons: guidance on minimum target size
+
+:wrench: **Maintenance**
+- Update site map
+
 ## 6.2.2 - 27 March 2024
 
 :wrench: **Maintenance**

app/styles/main.scss

@@ -205,3 +205,22 @@
     }
   }
 }
+
+// Styling for WCAG 2.2 guidance blocks. 
+// Margin-top to avoid excessive spacing between guidance block and design examples. 
+// Border colour altered to match tag colour. 
+.app-wcag-inset-text {
+  @include nhsuk-responsive-margin(0, 'top');
+  border-left-color: shade($color_nhsuk-blue, 10%);
+}
+
+// Slightly more margin top to maintain visual rhythm of page content
+// margin bottom placed on container and stripped from final p element for :target box styling
+// max-width to reduce empty space caused by limiting line length of body content
+.app-wcag-22 {
+  @include nhsuk-responsive-margin(1, 'top');
+  @include nhsuk-responsive-margin(4, 'bottom');
+}
+.app-wcag-22 p:last-child {
+  margin-bottom: 0;
+}

app/views/accessibility/design.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What graphic and interaction designers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "January 2024" %}
+{% set dateUpdated = "April 2024" %}
 {% set backlog_issue_id = "349" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -20,6 +20,7 @@
     <li>some success criteria and best practice for level AAA</li>
   </ul>
 
+  {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %}
   {% include "./partials/avoid-accessibility-overlays-or-widgets.njk" %}
   {% include "./partials/define-page-structure.njk" %}
   {% include "./partials/define-skip-links.njk" %}

app/views/accessibility/development.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What developers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "January 2024" %}
+{% set dateUpdated = "April 2024" %}
 {% set backlog_issue_id = "348" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -20,6 +20,7 @@
     <li>some success criteria and best practice for level AAA</li>
   </ul>
 
+  {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %}
   {% include "./partials/avoid-accessibility-overlays-or-widgets.njk" %}
   {% include "./partials/check-keyboard-accessibility.njk" %}
   {% include "./partials/set-page-titles.njk" %}

app/views/accessibility/index.njk

@@ -12,12 +12,12 @@
   <p>Your service must be accessible to everyone who needs it. If it is not, you may be breaking the law.</p>
   <p>Everyone who works on NHS digital services has a role to play in making them accessible and inclusive.</p>
 
-  <h2>Make sure your service meets WCAG 2.2 criteria</h2>
-  <p>Teams should comply now to make sure products and services are ready by October 2024. This is when the Government Digital Service, Department of Health and Social Care and NHS England will start monitoring accessibility to <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a>.</p>
-  <p><a href="https://nhsdigital.github.io/accessibility-checklist/">The NHS accessibility checklist</a> is already up to date with WCAG 2.2.</p>
-  <p>This accessibility guidance is up to date with WCAG 2.1. We are currently reviewing it and will be updating it to reflect WCAG 2.2.</p>
+  <h2>Make sure your service meets Web Content Accessibility Guidelines (WCAG) 2.2</h2>
+  <p>The service manual has been updated to meet WCAG 2.2. <a href="/accessibility/new-accessibility-requirements-wcag-2-2">Find out more about the new requirements</a>.</p>
+  <p>Teams should comply now to make sure products and services are ready by October 2024. This is when the Government Digital Service, Department of Health and Social Care and NHS England will start monitoring accessibility according to WCAG 2.2.</p>
 
 
+
   <div class="app-index-navigation app-u-hide-desktop">
     {% include "includes/_side-nav.njk" %}
   </div>

app/views/accessibility/new-accessibility-requirements-wcag-2-2.njk

@@ -0,0 +1,71 @@
+{% set pageTitle = "New accessibility requirements: WCAG 2.2" %}
+{% set pageSection = "Accessibility" %}
+{% set subSection = "Accessibility" %}
+{% set pageDescription = "Your service must meet these requirements." %}
+{% set theme = "Everyone needs to know" %}
+{% set dateUpdated = "April 2024" %}
+{% set backlog_issue_id = "512" %}
+
+{% extends "includes/app-layout.njk" %}
+
+{% block breadcrumb %}
+{% include "accessibility/_breadcrumb.njk" %}
+{% endblock %}
+
+{% block bodyContent %}
+
+<p>The Web Content Accessibility Guidelines, known as WCAG, have been updated to version 2.2. As a public sector organisation, by law we must meet these guidelines to level AA for all patient and staff-facing services.</p>
+
+<h2>What you need to do</h3>
+
+<ol>
+  <li>Read this page to understand the new criteria you must comply with.</li>
+  <li>Review the list of <a href="/design-system">NHS design system</a> changes.</li>
+  <li>Assess your service to see what updates you need to make.</li>
+  <li>Plan and implement your updates.</li>
+</ol>
+
+<p>The Government Digital Service, Department of Health and Social Care and NHS England will start monitoring accessibility to WCAG 2.2 from October&nbsp;2024.</p>
+
+<h2 id="new-criteria-in-wcag-2-2">The new criteria</h2>
+<p>
+  <strong class="nhsuk-tag">
+      WCAG 2.2
+  </strong>
+</p>
+<p>The update adds 9 new success criteria for improving web accessibility. 6 of the new criteria are graded at the A and AA level, which means they're a requirement for websites and mobile apps in the NHS.</p>
+
+<p>These are the 6 new criteria you'll need to meet, as a minimum.</p>
+
+<h3>Focus not obscured (minimum)</h3>
+<p>Some websites have sticky or fixed headers or footers that remain at the top or bottom of the page when users scroll. This can make it difficult for users navigating with a keyboard to identify which components are focused. <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html">Learn more about focus not obscured (W3C website)</a>.</p>
+
+<h3>Dragging movements</h3>
+<p>If there is interactive content that users can move by dragging, they must be able to do it with a "single pointer". For example, to reorder items in a list that can be dragged, an alternative can be to have up and down arrows to reorder them. Clicking and dragging is impossible for some users. <a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html">Learn more about dragging movements (W3C website)</a>.</p>
+
+<h3>Target size (minimum)</h3>
+<p>Interactive content must have a minimum size of 24 by 24 CSS pixels. This does not apply to interactive content that is a part of text such as links. <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">Learn more about target size (W3C website)</a>.</p>
+
+<h3>Redundant entry</h3>
+<p>A user should not have to enter the same information more than once on a single journey, unless it is required for security purposes, for example passwords. <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">Learn more about redundant entry (W3C website)</a>.</p>
+
+<h3>Accessible authentication (minimum)</h3>
+<p>A user should not have to perform a cognitive function test, such as solving a puzzle or "Enter the 3rd, 4th, and 6th character of your password". If you need the user to enter a password, they should be able to copy and paste it. <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html">Learn more about accessible authentication (W3C website)</a>.</p>
+
+<h3>Consistent help</h3>
+<p>If your service provides help options such as contact details or live chat, they should be presented consistently across pages, to make sure users can find and interact with them easily. <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">Learn more about consistent help (W3C website)</a>.</p>
+
+
+<h2>Further reading</h2>
+<ul>
+  <li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/">What's new in WCAG 2.2 (W3C website)</a></li>
+  <li><a href="https://www.w3.org/TR/WCAG22/">The full WCAG 2.2 guidelines (W3C website)</a></li>
+  <li><a href="https://accessibility.blog.gov.uk/2024/03/13/wcag-2-2-detective-skills/">GOV.UK blog post to help you to detect WCAG 2.2 issues</a></li>
+  <li><a href="https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction">GOV.UK guidance on making your service accessible</a>, which explains what to do in alpha, beta and live phases</li>
+</ul>
+
+{% endblock %}
+
+{% block asideContent %}
+{% include "./partials/related-nav.njk" %}
+{% endblock %}

app/views/accessibility/partials/check-that-accessibility-is-done.njk

@@ -6,7 +6,7 @@
 <details class="nhsuk-details">
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
-      4 simple questions to check it's "done"
+      4 questions to check it's "done"
     </span>
   </summary>
   <div class="nhsuk-details__text">

app/views/accessibility/partials/make-sure-your-service-meets-wcag-2-2.njk

@@ -0,0 +1,10 @@
+<h2 id="make-sure-your-service-meets-wcag-2-2">Make sure your service meets WCAG 2.2</h2>
+<p class="nhsuk-body-s">For: <a href="/accessibility/design">Design</a>, <a href="/accessibility/development">Development</a>, <a href="/accessibility/product-and-delivery">Product and delivery</a>, <a href="/accessibility/testing">Testing</a></p>
+
+<p>
+    <strong class="nhsuk-tag">
+        WCAG 2.2
+    </strong>
+</p>
+<p>The Web Content Accessibility Guidelines (WCAG) 2.2 add 9 new "success criteria" for improving web accessibility. 6 of the new criteria are graded at the A and AA level, which means they're a requirement for websites and mobile apps in the NHS. <a href="/accessibility/new-accessibility-requirements-wcag-2-2">Learn more about the WCAG 2.2 new accessibility requirements and criteria.</a></p>
+<p>See the full list of <a href="/design-system">design system changes to meet the requirements</a>.</p>

app/views/accessibility/product-and-delivery.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What product and delivery managers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "March 2021" %}
+{% set dateUpdated = "April 2024" %}
 {% set backlog_issue_id = "345" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -14,6 +14,7 @@
 
 {% block bodyContent %}
 
+  {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %}
   {% include "./partials/make-sure-everyone-knows-their-responsibilities.njk" %}
   {% include "./partials/ask-questions-at-the-start-of-the-project.njk" %}
   {% include "./partials/check-that-accessibility-is-done.njk" %}

app/views/accessibility/testing.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What testers and quality assurers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "January 2024" %}
+{% set dateUpdated = "April 2024" %}
 {% set backlog_issue_id = "350" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -21,6 +21,7 @@
   </ul>
 
 
+  {% include "./partials/make-sure-your-service-meets-wcag-2-2.njk" %}
   {% include "./partials/understand-types-of-testing.njk" %}
   {% include "./partials/check-orientation-is-not-locked.njk" %}
   {% include "./partials/make-sure-navigation-is-consistent.njk" %}