Make it easy to generate the error summary with correct href values

When you submit a form containing groups of fields such as radio buttons, populating the error summary so that focus is moved when the error link is clicked is problematic.

Say you have this:

<a href="#name-of-field">Enter blah</a>

And you have this:

<input type="radio" name="name-of-field" id="name-of-field-1" value="1">
<input type="radio" name="name-of-field" id="name-of-field-2" value="2">

When you click the link focus won’t move to the first <input> in the group. For that to work, we’d have to suffix the href with -1 to match the input’s id attribute value.

This means the server has to be told that a request that contains name-of-field is in fact a group of radios and therefore when the error summary is rendered for this particular error message, be sure to suffix it with -1.

This is a pain, and an unnecessary burden on the developer. What I’ve always done, is make sure the first input’s id in the group matches the name of the group. Like this:

<input type="radio" name="name-of-field" id="name-of-field" value="1">
<input type="radio" name="name-of-field" id="name-of-field-2" value="2">

This works nicely on the server side and on the client side (should a service implement client-side form validation).

[NickColley]

@adamsilver thanks for raising, this’ll be resolved in v3.0.0 👍 😄

[36degrees]

Hey @adamsilver,

We did a lot of research into where the error summary should link to and found that for assistive technologies the best option was to link to the form input.

As you state, this means that the browser would scroll to the form control, leaving the legend or label outside of the viewport. To resolve this, we added JavaScript to the error summary component in #1056 which manually manages the focus and scroll behaviour to get the ‘best of both worlds’.

In https://github.com/alphagov/govuk-design-system/pull/634 we also added examples to the Design System to make it clearer where to link to – you can see this behaviour working on the examples on that page.

Hope that helps!