Closed joelanman closed 5 years ago
This is a good point - the example used shows links to the error messages (e.g. href="#dob-error") - I have seen links to the form controls themselves and also the use of a data-focuses
attribute to set the focus on the form control - is this all encapsulated in the new design system with use of the href values? On one pre-design system service I worked on the DAC review picked up our lack of setting focus on errored radio elements as a fail - also noticed the data-focuses
attribute in summary links failed to automatically set focus on textareas.
A collection of variations as seen on GOV.UK Elements:
Error summary links to <legend>
id which focusses input
http://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-radio
http://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-more-text
Error summary links to <label>
id which focusses input
http://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-text
Error summary links to <input>
id which receives focus
http://govuk-elements.herokuapp.com/errors/example-form-validation-multiple-questions
I can't see any patterns on the design system that have both the error summary and error message components used together. Would be great to see this.
For anyone else that finds this ticket, there's a more thorough demo on GOV.UK Frontend (used by the design system) here: http://govuk-frontend-review.herokuapp.com/examples/error-summary
Research done by @36degrees : https://36degrees.github.io/linking-to-form-inputs/results/
This was addressed in https://github.com/alphagov/govuk-design-system/pull/634
It's not clear where the Error summary links should take people to