cnumr / cnumr/EcoIndex

Improve error handling

Open
#129 0 comments 0 reactions 0 assignees View on GitHub
a11y Front keep open
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.