Send focus to error summary before single error

> 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

@@ -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'));

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;

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 -%}