ErrorSummary - keyboard focus issue

[ghost]

Bug Report

​

What is the issue?

​​
Moving the keyboard focus to the input element that has the error while on Error Summary does not work on FireFox.
​

What steps are required to reproduce the issue?

​
Open up FireFox
Go to: https://service-manual.nhs.uk/design-system/components/error-summary
Scroll to the first example
Press 'Enter your full name'
See that focus does not move the cursor to the text input
​

What was the environment where this issue occurred?

​​

• Device: MacBook Pro
• Operating System: MacOS Catalina
• Browser: FireFox
• Browser version: 90.0.2
• NHS.UK frontend package version: ^5.1.0
• Node version: v14.16.1
• npm version: v6.14.12
  ​

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

​​
This functionality seems to work fine in any other browser.
​
Just for clarity here's a screenshot of the component where expected the functionality fails.
​

The keyboard focus on the error summary component linking to text input field works well in the gov uk frontend library in FireFox.
See: https://design-system.service.gov.uk/components/error-summary/

[andymantell]

This works fine when running the nhsuk-frontend dev server. The reason it's not working in the service manual is because the ErrorSummary component is not initialised. @chrimesdev - when we merged this, we forgot to do this!

Interestingly, in Firefox, without the JavaScript, this HTML does not result in the input field being focused. But it does in Chrome. Not sure what, if anything, we should be doing about this no-JS journey. Example here: https://codepen.io/andymantell/pen/ZEyEEgx

[chrimesdev]

After initialising the ErrorSummary on the NHS digital service manual... the issue now is that when you visit the Error Summary component page, on page load the Error Summary JavaScript kicks in and jumps you half way down the page to the first Error Summary example code snippet.

We are trying to think of the best way around this, potentially something like: #770

[sarawilcox]

Moving this back into In Progress column. Needs a bit more work.

@andymantell, does it still need the breaking change label?

[andymantell]

@sarawilcox No the breaking change got released already. The ErrorSummary is working as expected and not exhibiting this bug in the released version of nhsuk-frontend. The outstanding piece of work is that it hasn't been intialised in the service manual so it's not working on any of the examples.

When this gets done - Refer to #770 and make sure that the error summary doesn't get focused on the page with all the demos on. Possibly could detect whether the demo was being rendered in an iframe, and if so don't enable the focusing behaviour. That would enable the full page demos to work as expected without causing problems on the index page.

[sarawilcox]

Hi @andymantell and @will-dyson-nhsd, do you know it this has been initialised in the service manual now? If not, what do we need to do about it? Thanks.

[andymantell]

@sarawilcox No it has not. We just need to initialise the JS and make sure to turn off the focusing as per #770. I'll try and get round to it at some point but can't guarantee when.

[the-nathan-smith]

This issue will be resolved when the next Service Manual release goes out, solution can be found here nhsuk/nhsuk-service-manual#1886.