alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Make it clear where to link Error summary to #155

Closed joelanman closed 5 years ago

joelanman commented 6 years ago

It's not clear where the Error summary links should take people to

nubz commented 6 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.

colinrotherham commented 6 years ago

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.

colinrotherham commented 5 years ago

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

examples

NickColley commented 5 years ago

Research done by @36degrees : https://36degrees.github.io/linking-to-form-inputs/results/

36degrees commented 5 years ago

This was addressed in https://github.com/alphagov/govuk-design-system/pull/634