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

Reflect form validation error in title #509

Merged
merged 3 commits into from
Jul 31, 2017
Merged

Reflect form validation error in title #509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d4dd5e
Move duplicate validation implementation advice into its own partial
selfthinker Jun 29, 2017
e0455df
Rearrange validation implementation advice
selfthinker Jun 29, 2017
009d405
Reflect form validation error in title
selfthinker Jun 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions app/views/examples/_form_validation_implementation_advice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<h2 class="heading-medium implementation-advice">Implementation advice</h2>

<p class="lead-in">When an error occurs:</p>
<ul class="list list-bullet text">
<li>
prefix the <code>&lt;title&gt;</code> with "Error: "
</li>
<li>
show an error summary at the top of the page
</li>
<li>
move keyboard focus to the start of the summary
<span class="panel panel-border-narrow">
to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
</span>
</li>
<li>
ensure that the summary is announced to as many screen readers as possible
<span class="panel panel-border-narrow">
use <code>role="alert"</code> on the containing <code>div</code>
</span>
</li>
<li>
use a heading at the top of the summary
</li>
<li>
associate the heading with the summary box
<span class="panel panel-border-narrow">
use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
</span>
</li>
<li>
link from the error list in the summary to the fields with errors
</li>
<li>
add a 5px red left border to the field with the error
</li>
<li>
show a red and bold error message between each question and field with an error
</li>
<li>
associate each error message with the corresponding field by adding it to the label (or legend)
</li>
</ul>

<p class="text">
Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
</p>
47 changes: 2 additions & 45 deletions app/views/examples/example_form_validation_multiple_questions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% extends "layout_example.html" %}

{% block page_title %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
{% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}

{% block content %}
<main class="js-error-example" id="content" role="main" tabindex="-1">
Expand All @@ -14,50 +14,7 @@
{% include "snippets/form_error_multiple.html" %}
</form>

<h2 class="heading-medium implementation-advice">Implementation advice</h2>
<p class="lead-in">When an error occurs:</p>
<ul class="list list-bullet text">
<li>
add a 5px red left border to the field with the error
</li>
<li>
show an error summary at the top of the page
</li>
<li>
move keyboard focus to the start of the summary
<span class="panel panel-border-narrow">
to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
</span>
</li>
<li>
ensure that the summary is announced to as many screen readers as possible
<span class="panel panel-border-narrow">
use <code>role="alert"</code> on the containing <code>div</code>
</span>
</li>
<li>
use a heading at the top of the summary
</li>
<li>
associate the heading with the summary box
<span class="panel panel-border-narrow">
use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
</span>
</li>
<li>
link from the error list in the summary to the fields with errors
</li>
<li>
show an error message before each field with an error
</li>
<li>
associate each error message with the corresponding field by adding it to the label (or legend)
</li>
</ul>

<p class="text">
Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
</p>
{% include "examples/_form_validation_implementation_advice.html" %}

</div>
</div>
Expand Down
53 changes: 2 additions & 51 deletions app/views/examples/example_form_validation_single_question_radio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% extends "layout_example.html" %}

{% block page_title %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
{% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}

{% block content %}
<main class="js-error-example" id="content" role="main" tabindex="-1">
Expand All @@ -14,56 +14,7 @@
{% include "snippets/form_error_radio.html" %}
</form>

<h2 class="heading-medium implementation-advice">Implementation advice</h2>
<p class="lead-in">When an error occurs:</p>
<ul class="list list-bullet text">
<li>
add a 5px red left border to the field with the error
</li>
<li>
the error message be red and bold and appear after the question
</li>
<li>
the error message must sit inside the <code>&lt;legend&gt;</code>
</li>
<li>
show an error summary at the top of the page
</li>
<li>
move keyboard focus to the start of the summary
<span class="panel panel-border-narrow">
to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
</span>
</li>
<li>
ensure that the summary is announced to as many screen readers as possible
<span class="panel panel-border-narrow">
use <code>role="alert"</code> on the containing <code>div</code>
</span>
</li>
<li>
use a heading at the top of the summary
</li>
<li>
associate the heading with the summary box
<span class="panel panel-border-narrow">
use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
</span>
</li>
<li>
link from the error list in the summary to the fields with errors
</li>
<li>
show an error message before each field with an error
</li>
<li>
associate each error message with the corresponding field by adding it to the label (or legend)
</li>
</ul>

<p class="text">
Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
</p>
{% include "examples/_form_validation_implementation_advice.html" %}

</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions app/views/guide_errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ <h3 class="heading-medium" id="summarise-errors">
<li>link to each of the problematic questions</li>
</ul>

<p class="text">Additionally, you should reflect that there's been an error in the <code>&lt;title&gt;</code> by prefixing the existing title with "Error: ". That will make sure screen readers are alerted to there being an error as soon as possible.</p>

<h4 class="heading-small">Error message and summary box</h4>
<div class="example example-error">
{% include "snippets/form_error_radio_show_errors.html" %}
Expand Down