Updates to design system examples august25 WIP

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 :wrench: **Maintenance**
 
+- Update wording about reverse examples
 - Tweak page title example to improve readability
 - Update page titles to use en-dash rather than hyphen
 - Replace BSL icons download file

app.js

@@ -133,9 +133,14 @@ env.addFilter('highlight', filters.highlight)
 env.addFilter('markdown', filters.markdown)
 
 // Render standalone design examples
-app.get('/design-example/:group/:item/:type', (req, res) => {
+app.get('/design-example/:group/:item/:type', (req, res, next) => {
   const { group, item, type } = req.params
 
+  // Continue to 404 page
+  if (!fileHelper.hasNunjucksPath({ group, item, type })) {
+    return next()
+  }
+
   // Get the given example as HTML.
   const exampleHtml = fileHelper.getHTMLCode({
     group,
@@ -161,7 +166,7 @@ app.get('/design-example/:group/:item/:type', (req, res) => {
 })
 
 app.get('/search', (req, res) => {
-  const query = req.query['search-field'] || ''
+  const query = req.query['searchField'] || ''
   const resultsPerPage = 10
   let currentPage = parseInt(req.query.page, 10)
   const results = pageIndex.search(query)
@@ -262,6 +267,12 @@ app.get(
   }
 )
 
+// Redirects for design system examples
+
+app.get('/design-example/components/checkboxes/hint', (req, res) => {
+  res.redirect('/design-example/components/checkboxes/hint-text')
+})
+
 // Redirects for design system patterns
 
 app.get(

app/javascripts/main.mjs

@@ -22,7 +22,7 @@ initAll({
 initAccessibleAutocomplete({
   containerId: 'autocomplete-container',
   formId: 'search',
-  inputId: 'search-field',
+  inputId: 'searchField',
   onConfirm,
   source,
   templates: {

app/views/accessibility-statement.njk

@@ -1,9 +1,9 @@
+{% extends "layouts/app-layout-two-thirds.njk" %}
+
 {% set pageTitle = "Accessibility statement" %}
 {% set pageDescription = "We aim to make the NHS digital service manual as accessible and easy to use as possible." %}
 {% set dateUpdated = "June 2019" %}
 
-{% extends "layouts/app-layout-two-thirds.njk" %}
-
 {% block bodyContent %}
 
   <p>We've designed our pages to meet the Web Content Accessibility Guidelines to level AA - and in some cases AAA - and we've tested them with users with access needs.</p>

app/views/accessibility/content.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Content" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "February 2025" %}
 {% set backlog_issue_id = "347" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/accessibility/design.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Design" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "February 2025" %}
 {% set backlog_issue_id = "349" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/accessibility/development.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Development" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "January 2025" %}
 {% set backlog_issue_id = "348" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/accessibility/download-accessibility-posters.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Download accessibility posters" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "December 2021" %}
 {% set backlog_issue_id = "405" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}
@@ -62,8 +62,6 @@
 <p>(On a green background, with an icon showing a clipboard with a tick on it.)</p>
 <p><a href="/assets/nhs-digital-testing-accessibility-poster.pdf">Download poster for testing (PDF, 44KB)</a></p>
 
-
-
 {% endblock %}
 
 {% block asideContent %}

app/views/accessibility/getting-started.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Getting started with accessibility" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "January 2025" %}
 {% set backlog_issue_id = "352" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}
@@ -50,7 +50,6 @@
   <h2 id="talk-to-other-people-with-an-interest-in-accessibility">Talk to other people with an interest in accessibility</h2>
   <p>Join the <a href="https://www.gov.uk/service-manual/communities/accessibility-community">GOV.UK accessibility community</a> or talk to NHS colleagues on our <a href="/slack">public Slack workspace</a> to get advice and support, stay up to date and share examples.</p>
 
-
 {% endblock %}
 
 {% block asideContent %}

app/views/accessibility/how-to-make-digital-services-accessible.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "How to make digital services accessible" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "January 2024" %}
 {% set backlog_issue_id = "351" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}
@@ -51,7 +51,6 @@
   <p>Follow our <a href="testing">guidance on testing</a> and our guidance on <a href="/accessibility/product-and-delivery#monitor-and-record-your-work">monitoring and recording accessibility testing</a> (for product and delivery managers).</p>
   <p>Find out about <a href="https://www.gov.uk/service-manual/helping-people-to-use-your-service/getting-an-accessibility-audit">getting an accessibility audit (GOV.UK service manual)</a>.</li>
 
-
 {% endblock %}
 
 {% block asideContent %}

app/views/accessibility/index.njk

@@ -1,14 +1,13 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Accessibility" %}
 {% set pageDescription = "How to make digital services in the NHS work for everyone." %}
 {% set pageSection = "Accessibility" %}
 {% set landingPage = true %}
 {% set hideContact = "true" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block bodyContent %}
 
-
   <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>
 
@@ -17,8 +16,6 @@
   <p><a href="/accessibility/new-criteria-in-wcag-2-2">Find out more about the new criteria that WCAG 2.2 introduced</a>.</p>
   <p>The Government Digital Service, Department of Health and Social Care and NHS England are now monitoring accessibility to WCAG 2.2.</p>
 
-
-
   <div class="app-index-navigation app-u-hide-desktop">
     {% include "includes/_side-nav.njk" %}
   </div>

app/views/accessibility/new-criteria-in-wcag-2-2.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "New criteria in WCAG 2.2" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "October 2024" %}
 {% set backlog_issue_id = "512" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
 {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}
@@ -66,7 +66,6 @@
 <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>

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

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Product and delivery" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "October 2024" %}
 {% set backlog_issue_id = "345" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/accessibility/testing.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Testing" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "February 2025" %}
 {% set backlog_issue_id = "350" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}
@@ -20,7 +20,6 @@
     <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/understand-types-of-testing.njk" %}
   {% include "./partials/check-orientation-is-not-locked.njk" %}

app/views/accessibility/user-research.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "User research" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "July 2019" %}
 {% set backlog_issue_id = "346" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/accessibility/what-all-nhs-services-need-to-do.njk

@@ -1,3 +1,5 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "What all NHS services need to do about accessibility" %}
 {% set pageSection = "Accessibility" %}
 {% set subSection = "Accessibility" %}
@@ -6,8 +8,6 @@
 {% set dateUpdated = "January 2024" %}
 {% set hideContact = "true" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "accessibility/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/backlog-of-components-and-patterns.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Backlog of components and patterns" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "The service manual is built on the research and experience of many digital teams in the NHS. We have a shared backlog and encourage people to contribute." %}
 {% set dateUpdated = "March 2024" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/community-resources.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Community resources" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "Resources created and maintained by the design system community." %}
 {% set dateUpdated = "August 2025" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/contribution-criteria.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Contribution criteria" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "Follow these criteria when proposing a new component or pattern." %}
 {% set dateUpdated = "October 2019" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/develop-component-pattern.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Develop a component or pattern" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "Anyone can work on something in the NHS digital service manual community backlog." %}
 {% set dateUpdated = "March 2019" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/feed-back-or-share-insights.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Feed back or share insights" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "Take part in the discussion and help us improve things for everyone." %}
 {% set dateUpdated = "March 2024" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}

app/views/community-and-contribution/index.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Community and contribution" %}
 {% set pageDescription = "The NHS digital service manual is a community effort. Anyone can help improve and grow it." %}
 {% set pageSection = "Community and contribution" %}
 {% set landingPage = true %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block bodyContent %}
 
   <p>Find out:</p>

app/views/community-and-contribution/propose-component-pattern.njk

@@ -1,10 +1,10 @@
+{% extends "layouts/app-layout.njk" %}
+
 {% set pageTitle = "Propose a component or pattern" %}
 {% set pageSection = "Community and contribution" %}
 {% set pageDescription = "Anyone can propose a new thing for the NHS digital service manual." %}
 {% set dateUpdated = "March 2019" %}
 
-{% extends "layouts/app-layout.njk" %}
-
 {% block beforeContent %}
   {% include "community-and-contribution/_breadcrumb.njk" %}
 {% endblock %}