From cd7cb8884cac9e56cb66efeaa85dd9ced92a5ddb Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 13 Feb 2017 12:11:32 +0000
Subject: [PATCH] Send focus to error summary before single error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> If both sections of the page have errors and the page is submitted,
> focus moves to the mobile numbers section so screen reader users may
> not be aware of preceding errors - focus should move to a dedicated
> error summary at the top of the page.

Right now we use Javascript to focus the first error on a page (if any
errors are found). This commit adds more JS to then focus the error
summary, if there is one on the page. So this is where the focus will
rest.

It also makes some modifications to the ‘dangerous’ banner to make it
focusable, and to visually indicate that it is focused.
---
 app/assets/javascripts/main.js                | 2 ++
 app/assets/stylesheets/components/banner.scss | 4 ++++
 app/templates/components/banner.html          | 8 +++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 24fe38039..a6153dcbc 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -5,3 +5,5 @@ $(() => GOVUK.modules.start());
 $(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
 
 $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));
+
+$(() => $('.banner-dangerous').eq(0).trigger('focus'));
diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 5c40f11ec..9aded8655 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -54,6 +54,10 @@
   margin: 15px 0;
   text-align: left;
 
+  &:focus {
+    outline: 3px solid $yellow;
+  }
+
   .button {
     @include button($error-colour);
     margin-top: 10px;
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index d008b5b57..a21984b25 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -1,5 +1,11 @@
 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
-  <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
+  <div
+    class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
+    {% if type == 'dangerous' %}
+    role='group'
+    tabindex='-1'
+    {% endif %}
+  >
     {% if subhead -%}
         {{ subhead }}&ensp;
     {%- endif -%}