Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve error summary links #9

Closed
6 tasks done
peteryates opened this issue Jul 16, 2019 · 0 comments · Fixed by #10
Closed
6 tasks done

Improve error summary links #9

peteryates opened this issue Jul 16, 2019 · 0 comments · Fixed by #10
Labels
accessibility Making it easier for people with disabilities enhancement New feature or request

Comments

@peteryates
Copy link
Member

peteryates commented Jul 16, 2019 •
edited

The error summary links currently target the error message in the relevant form group. This will take the user to the right part of the page but doesn't totally comply with the GOV.UK Design System guidance and should be improved.

The suggested approach is to simply move the error_id from the error message itself:

And place it on the relevant element. This will vary per helper:

  • All text inputs should link to the input element
  • Text area should link to the textarea
  • Select box errors should link to the select element
  • Check boxes should link to the first input[type='checkbox'] in that group
  • Radios should link to the first input[type='radio'] in that group
  • File errors should link to the input[type='file']

I'm not sure if it's possible to set the ID for individual items using Rails' built-in helpers, radios and checkboxes might make this fiddly 😞
@peteryates peteryates added the enhancement New feature or request label Jul 16, 2019
@alexdesi alexdesi mentioned this issue Jul 16, 2019
Merged
@peteryates peteryates added the accessibility Making it easier for people with disabilities label Jul 20, 2019
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Add field_id, generate ids for elements internally
e4b09b6 
Having no control of the ids is problematic when making the error
summary list link _directly_ to the element because, in the case of
multi-input fields (like radios and checkboxes) we don't know what's
available or what's first

This is the first step towards making all error summary links behave as
specified in the GOV.UK Design System

https://design-system.service.gov.uk/components/error-summary/#linking-from-the-error-summary-to-each-answer

Refs #9
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Make govuk_collection_select use new field_id
b728263 
Refs #9
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Extend linking error summary to first radio button
77c31ab 
Refs #9
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Add specs covering linking to elements directly
aa85004 
Refs #9
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Add error linking to radio buttons and checkboxes
1ccdfd7 
Refs #9
This was referenced Jul 20, 2019
Merged
Closed
peteryates added a commit that referenced this issue Jul 20, 2019
@peteryates
Merge pull request #10 from DFE-Digital/error-summary-links
59dc130 
The GOV.UK Design System suggests that the anchor links in error summaries should link
to actual form inputs[0], they previously linked to the error message that is associated with
the field. This work adds the linking functionality to this form builder.

* Errors on fields that have a single element are directly linked. These include: text inputs,
  telephone inputs, email inputs, url inputs, number inputs, file inputs and select boxes

* Errors on date fields always link to the day. Ruby has no concept of part of a date being
  invalid, so we link to the first input in the group.

* Errors on fields with multiple elements, namely radio buttons and check boxes, link to the
  first radio or checkbox. For the collection methods this happens automatically. For
  #govuk_radio_buttons_fieldset an extra parameter is required on the first radio button,
  link_errors should be set to true.

Fixes #9

[0] https://design-system.service.gov.uk/components/error-summary#linking-from-the-error-summary-to-each-answer
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Add field_id, generate ids for elements internally
910fe55 
Having no control of the ids is problematic when making the error
summary list link _directly_ to the element because, in the case of
multi-input fields (like radios and checkboxes) we don't know what's
available or what's first

This is the first step towards making all error summary links behave as
specified in the GOV.UK Design System

https://design-system.service.gov.uk/components/error-summary/#linking-from-the-error-summary-to-each-answer

Refs #9
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Make govuk_collection_select use new field_id
bf3024e 
Refs #9
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Extend linking error summary to first radio button
af3cbf0 
Refs #9
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Add specs covering linking to elements directly
298f2c4 
Refs #9
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Add error linking to radio buttons and checkboxes
afb7232 
Refs #9
peteryates added a commit that referenced this issue Jan 9, 2020
@peteryates
Merge pull request #10 from DFE-Digital/error-summary-links
b795f5d 
The GOV.UK Design System suggests that the anchor links in error summaries should link
to actual form inputs[0], they previously linked to the error message that is associated with
the field. This work adds the linking functionality to this form builder.

* Errors on fields that have a single element are directly linked. These include: text inputs,
  telephone inputs, email inputs, url inputs, number inputs, file inputs and select boxes

* Errors on date fields always link to the day. Ruby has no concept of part of a date being
  invalid, so we link to the first input in the group.

* Errors on fields with multiple elements, namely radio buttons and check boxes, link to the
  first radio or checkbox. For the collection methods this happens automatically. For
  #govuk_radio_buttons_fieldset an extra parameter is required on the first radio button,
  link_errors should be set to true.

Fixes #9

[0] https://design-system.service.gov.uk/components/error-summary#linking-from-the-error-summary-to-each-answer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility Making it easier for people with disabilities enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add anchor links between error summary items and inputs x-govuk/govuk-form-builder
1 participant
@peteryates