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"

<form>
  <fieldset>
    <legend><h1>This is a heading and a legend</h1></legend>    
    
    <label for="demo-input">Label</label>
    <input id="demo-input" type="text">
  </fieldset>
</form>

What was the environment where this issue occurred?

• Device: PC
• Operating System: Windows 10
• Browser: Chrome
• Browser version: 94
• NHS.UK frontend package version: N/A - this is a basic html issue
• JAWS version - 2021.2107.12

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

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.

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?

1. Create an Angular app, install nhsuk-frontend using NPM.
2. Include the NHS nav header in the app.component.html
3. Import the javascript modules in the app.component.ts
4. Run the app, keep reducing the screen size until the Menu button appears. Click on it and nothing happens.

What was the environment where this issue occurred?

• Device: PC / MAC
• Operating System: Windows 10, macOS
• Browser: All
• Browser version: -
• NHS.UK frontend package version: 1.0.0
• Node version: 11.10.0
• npm version: 6.7.0

Is there anything else you think would be useful in recreating the issue?

This is the sample code of app.component.ts file:

import nhsuk_feedbackBanner from 'node_modules/nhsuk-frontend/packages/components/feedback-banner/feedback-banner';
import nhsuk_header from 'node_modules/nhsuk-frontend/packages/components/header/header';
import nhsuk_skipLink from 'node_modules/nhsuk-frontend/packages/components/skip-link/skip-link';
import autocomplete from 'node_modules/nhsuk-frontend/packages/components/header/autocomplete';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'NHSFrontEnd';


  ngOnInit() {
    nhsuk_feedbackBanner(3000);
    nhsuk_header();
    nhsuk_skipLink();
    autocomplete();
  }

}

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

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [x] CHANGELOG entry

Issues observed during browser testing

• ~IE10 - image is not clickable in "card with an image" example. Ignoring, because IE10 is not supported and the experience is ok.~ Fixed. Don't know whether we want IE10 fixes lingering around, but it's relatively inoffensive, so might not hurt to have it for a while? Easily removed if we don't want it...

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

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [x] CHANGELOG entry

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 new nhsuk-fonts.css stylesheet. I've incremented the MAJOR version in package.json to signify this as a breaking change for those who are using nhsuk-frontend already.

Further reading: https://developers.google.com/web/updates/2020/10/http-cache-partitioning

Checklist

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [x] CHANGELOG entry

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

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

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [x] CHANGELOG entry

Assistive tech tested

• JAWS 2021 Firefox ✔️
• JAWS 2021 Edge ✔️
• JAWS 2021 Chrome ✔️
• JAWS 2021 IE11 ✔️
• NVDA 2021.2 Firefox ✔️
• NVDA 2021.2 Edge ✔️
• NVDA 2021.2 Chrome ✔️
• NVDA 2021.2 IE11 ✔️
• Android 10 Talkback ✔️
• Dragon Naturally Speaking 15 Firefox ❌ Does not work - but as per https://github.com/nhsuk/nhsuk-frontend/pull/773#issuecomment-920884804 - Dragon does not support Firefox
• Dragon Naturally Speaking 15 Edge ✔️
• Dragon Naturally Speaking 15 Chrome ✔️
• Dragon Naturally Speaking 15 IE11 ✔️

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

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [ ] CHANGELOG entry

Description

Closes https://github.com/nhsuk/nhsuk-frontend/issues/752

Checklist

• [ ] Tested against our testing policy (Resolution, Browser & Accessibility)
• [ ] Follows our coding standards and style guide
• [ ] CHANGELOG entry

Bumps json5 from 1.0.1 to 1.0.2.

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.

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.3

Updates webpack-stream from 5.2.1 to 7.0.0

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.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

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.

Bumps loader-utils from 1.4.0 to 1.4.2.

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.

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

• [x] Tested against our testing policy (Resolution, Browser & Accessibility)
• [x] Follows our coding standards and style guide
• [x] CHANGELOG entry

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: