NHS.UK frontend
NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
Guidance
Visit the NHS digital service manual for examples of components and guidance for when to use them. If we haven’t yet published guidance on the component you want, please email us or get in touch on the NHS digital service manual Slack workspace.
How to install NHS.UK frontend
1. Install with package managers
We recommend that you install NHS.UK frontend using node package manager (npm).
2. Install by using compiled files
You can also install NHS.UK frontend using our compiled files, if you are not currently using a package manager.
Browsers and assistive technology
Visit our support for browsers and assistive technology, for details on operating systems and software.
Contribute
Read our contributing guidelines to contribute to NHS.UK frontend.
Development environment
Get in touch
NHS.UK frontend is maintained by NHS Digital. Email us, open a GitHub issue or get in touch on the NHS digital service manual Slack workspace.
Licence
The codebase is released under the MIT Licence, unless stated otherwise. This covers both the codebase and any sample code in the documentation. The documentation is © Crown copyright and available under the terms of the Open Government 3.0 licence.
Headings inside legends not recognised by JAWS
Bug Report
What is the issue?
When headings (e.g. <h1>) are nested inside a <legend> JAWS does not announce them when pressing the
H
key.I note that a very similar issue has been closed in the past at https://github.com/nhsuk/nhsuk-frontend/issues/534. However this issue is current and is unrelated to any
overflow: hidden
css. It occurs in a plain html page outside of the nhsuk-frontend styles.We have observed this in user research as well as my own testing. In user research it resulted in a fair amount of confusion for one particular user who regularly used the
H
key - often as the first thing they pressed after the page loaded.The issue is currently being tracked in the following issues, but I wanted to open this one here so that it doesn't fly under the radar for us.
https://github.com/FreedomScientific/VFO-standards-support/issues/549 https://github.com/FreedomScientific/VFO-standards-support/issues/100 https://github.com/alphagov/govuk-frontend/issues/1605 https://github.com/w3c/html-aria/issues/350 https://github.com/hmrc/accessibility/issues/34
What steps are required to reproduce the issue?
Create a page with the following markup, and listen to it with JAWS. Press the
H
key - observe that it says "No headings available"What was the environment where this issue occurred?
Tables
Tables
Use this issue to discuss the Tables component.
Preview the tables component
Find out more about the tables component and when to use it in the NHS Digital service manual.
See our contributing guidelines
Header: Add the ability to replace the logo with an NHS organisation logo
Originally posted in #169
Some of the NHS services I work on use a different organisational logo.
It would be useful if we could extend the logo part of the header for those services.
I haven't done any testing to see what the impact of doing this would be in the current iteration of the header component. But it's something I'd like to see in the wagtail nhsuk frontend.
Toggle Menu not working in Angular
Bug Report
What is the issue?
I'm trying to use this library in an Angular project. I installed nhsuk-frontend via npm fine. I managed to import the styles and can see all the component rendering but I'm having problems with the javascript files. I imported all the modules like suggested but not able to make the Menu Toggle work. Can someone please help?
What steps are required to reproduce the issue?
What was the environment where this issue occurred?
Is there anything else you think would be useful in recreating the issue?
This is the sample code of app.component.ts file:
Rework clickable cards using CSS invisible overlay rather than JS event handler
Description
Rework clickable cards using CSS invisible overlay rather than JS event handler
This avoids problems with using Ctrl-click, middle click, right click to open new tabs since the link just behaves as it would natively
Fixes #758 Fixes #749
Checklist
Issues observed during browser testing
Make transactional headers wrap by default
Resolves: #720
The transactional header did not wrap correctly on smaller devices. The long name modifier was removed, and instead merged into the base class. This seemed to take precedent of the tablet spacing.
I assumed that since the modifier was to be removed, and made the default behaviour, it didn't make sense to have an example for the longer name. So the transactional header long name example has been removed.
Description
Checklist
Conditionally load fonts to avoid performance issues
Description
Related: https://github.com/nhsuk/nhsuk-frontend/issues/728
This PR fixes the above issue by separating font loading into a separate stylesheet; disabling the font by default. If a dependent wishes to load fonts from
assets.nhs.uk
they will need to include the newnhsuk-fonts.css
stylesheet. I've incremented the MAJOR version inpackage.json
to signify this as a breaking change for those who are usingnhsuk-frontend
already.Further reading: https://developers.google.com/web/updates/2020/10/http-cache-partitioning
Checklist
Images
Images
Use this issue to discuss the Images component.
Preview the images component
Find out more about the images component and when to use it in the NHS Digital service manual.
See our contributing guidelines
Fix details element in firefox nvda
Description
In order to fix #754, I have stopped polyfilling the details component in browsers that have native support since this is no longer necessary and as evidenced by #754 is actually making the situation worse for screen readers. Removing the polyfil causes Firefox to behave correctly now
Checklist
Assistive tech tested
Feature/breadcrumbs update
Description
Add the updated breadcrumb that has been beta-tested on the live site, we've seen it working live on the new hub pages, so now it's time to get the update rolled out throughout the rest of the site.
Context for the update #6
Checklist
remove deprecated uses of SASS division operator via sass-migrator
Description
Closes https://github.com/nhsuk/nhsuk-frontend/issues/752
Checklist
Bump json5 from 1.0.1 to 1.0.2
Bumps json5 from 1.0.1 to 1.0.2.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
... (truncated)
Commits
a62db1e
1.0.2e0c23fe
docs: update CHANGELOG for v1.0.262a6540
fix: add proto to objects and arraysDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump json5 and webpack-stream
Bumps json5 to 2.2.3 and updates ancestor dependency webpack-stream. These dependencies need to be updated together.
Updates
json5
from 2.2.1 to 2.2.3Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeUpdates
webpack-stream
from 5.2.1 to 7.0.0Commits
30a6da0
v7.0.0c2d19fd
semistandard fixes7805d59
Remove config.watch setting re-introduced from my bad merging6395f19
Merge branch 'master' of github.com:shama/webpack-stream7c24e86
Merge pull request #212 from azt3k/master3fc84f0
Merge branch 'master' into master027135e
Update comments to indicate it works with webpack 4 and 5bb7cd85
Merge branch 'master' of github.com:shama/webpack-stream3287835
Merge pull request #214 from the-ress/watch-message141e063
Update watch for gulp >= 4Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump loader-utils from 1.4.0 to 1.4.2
Bumps loader-utils from 1.4.0 to 1.4.2.
Release notes
Sourced from loader-utils's releases.
Changelog
Sourced from loader-utils's changelog.
Commits
331ad50
chore(release): 1.4.217cbf8f
fix: ReDoS problem (#226)8f082b3
chore(release): 1.4.14504e34
fix: security problem (#220)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Add role=button spacebar activation and button debouncing JS
Description
Links which are styled to appear visually like buttons can cause problems for users who might expect the button-like element to be clickable with a spacebar since this is how actual buttons behave. This PR adds some JS brought over from govuk-frontend to shim this behaviour in on top - so that links that look like buttons now also behave like buttons.
I have also brought over the button debouncing functionality from govuk while I was here. Which fixes #796
Checklist
Feature request: per-PR test environments
When creating pull requests with bug fixes or new features, it's necessary to do cross browser testing. For me (and I suspect many others) this means using Browserstack. However, if you are running locally on
localhost:3000
it can be troublesome to get Browserstack iOS devices to connect to your local servers.Therefore, it would be nice to be able to preview the pull request running on an environment on the public internet.
This would make it easier to send pull requests to other people for review as well.
I've done this in the past with Netlify and once it's set up it's incredibly seamless. As soon as you open a pull request, Netlify spins up the environment and posts the URL to the github PR comments section.
I'd be happy to do the work, but it would need someone to "own" the Netlify account and that probably can't be me.
Worth noting - we could keep using github.io for the main branch demo if for continuity if we wanted.
We might have to apply for an open source licence: https://www.netlify.com/open-source/
This is what it looks like in action: