Improve error handling
- Dominant language
- JavaScript
- Stars
- 92
- Forks
- 22
- Avg merge
- 29m
- Merged PRs (30d)
- 4
Description
See https://govuk-elements.herokuapp.com/errors/example-form-validation-single-question-text
> When an error occurs:
>
> - prefix the with "Error: "
> - show an error summary at the top of the page
> - move keyboard focus to the start of the summary
> ```to move keyboard focus, put tabindex="-1" on the containing div and use obj.focus()```
> - ensure that the summary is announced to as many screen readers as possible
> ```use role="alert" on the containing div```
> - use a heading at the top of the summary
> - associate the heading with the summary box
> ```use the ARIA attribute aria-labelledby on the containing div, so that screen readers will automatically announce the heading as soon as focus is moved to the div```
> - link from the error list in the summary to the fields with errors
> - add a 5px red left border to the field with the error
> - show a red and bold error message between each question and field with an error
> - associate each error message with the corresponding field by adding it to the label (or legend)
>
> Also consider using the aria-invalid attribute to programmatically indicate that a field has an error. The value of the [aria-invalid attribute](http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid) will vary depending on the type of error.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked GOV.UK Elements form-validation example and compare it with the repository’s existing error-handling entry point. Work through each listed requirement, including focus movement, ARIA associations, summary links, and field styling; done means the form error state meets the full accessibility checklist.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100