Disable auto focus on Error Summary and Notification Banner components using JS config

[36degrees]

What

Once we have updated to GOV.UK Frontend v4.4.0 we should be able to disable the auto focus functionality of the Error Summary and Notification Banners by passing config where we run initAll, like this:

GOVUKFrontend.initAll({
  errorSummary: { disableAutoFocus: true },
  notificationBanner: { disableAutoFocus: true },
})

We can then simplify the examples for those components by removing disableAutoFocus from the Nunjucks options and deleting the code.njk files (or deleting index.njk and renaming code.njk to index.njk, which should have the same effect).

This can be done any time after the Design System has been updated to v4.4.0 – it doesn't need to be done at the same time as we update.

Why

We don't want the examples for these components in the Design System to take focus as it's not useful for users of assistive tech in this context, and it causes the viewport to scroll to the first example on page load.

This means we need to disable the auto focus feature, but we don't want it to be disabled in the code blocks that we provide under the examples – otherwise when teams copy and paste this code they'll end up disabling auto focus where it's used in services.

At the minute we achieve this by having two versions of the code:

• index.njk which is used to generate the HTML used for the interactive example of the component
• code.njk which is used to generate the Nunjucks and the HTML displayed in the code blocks under the example

When there is no code.njk file for an example, the index.njk version is used for both.

Now that we have a simpler way to achieve the same thing – by changing the config in the JS – we can remove this and simplify the code, thereby reduce the risk of the two versions of the code will get out of sync.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• [ ] Auto focus functionality of the two components is disabled in JavaScript config
• [ ] Code used for the examples of the two components is simplified
• [ ] We've verifiied that none of the examples include the disableAutoFocus Nunjucks option or the data-disable-auto-focus HTML attribute