Merge pull request #963 from DFE-Digital/focus-flash

Success message gets focused and document title prefix
DFE-Digital · Dec 20, 2019 · 8107702 · 8107702
2 parents 8ee3d71 + 2b53a55
commit 8107702
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/app/components/flash_message_component.html.erb b/app/components/flash_message_component.html.erb
@@ -16,7 +16,7 @@
       </div>
     </div>
   <% elsif flash[:success] %>
-    <div class="app-banner app-banner--success" aria-labelledby="success-message">
+    <div class="app-banner app-banner--success" aria-labelledby="success-message" data-module="govuk-error-summary" tabindex="-1">
       <div class="app-banner__message">
         <h2 class="govuk-heading-m" id="success-message">
           <%= flash[:success] %>

diff --git a/app/frontend/styles/_banner.scss b/app/frontend/styles/_banner.scss
@@ -4,6 +4,12 @@
   @include govuk-responsive-margin(8, "bottom");
   border: $govuk-border-width solid govuk-colour("blue");
 
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+    // Ensure outline appears outside of the element
+    outline-offset: 0;
+  }
+
   &--missing-section {
     @include govuk-responsive-margin(4, "bottom");
 

diff --git a/app/helpers/view_helper.rb b/app/helpers/view_helper.rb
@@ -46,6 +46,10 @@ def title_with_error_prefix(title, error)
     "#{t('page_titles.error_prefix') if error}#{title}"
   end
 
+  def title_with_success_prefix(title, success)
+    "#{t('page_titles.success_prefix') if success}#{title}"
+  end
+
   def edit_by_date
     dates = ApplicationDates.new(@application_form)
     dates.edit_by.strftime('%e %B %Y').strip

diff --git a/app/views/support_interface/application_forms/show.html.erb b/app/views/support_interface/application_forms/show.html.erb
@@ -1,4 +1,4 @@
-<% content_for :browser_title, "Application ##{@application_form.id}" %>
+<% content_for :browser_title, title_with_success_prefix("Application ##{@application_form.id}", flash[:success].present?) %>
 <% content_for :title do %>
   <span class="govuk-caption-xl">Application #<%= @application_form.id %></span>
   <%= @application_form.candidate.email_address %>

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -11,6 +11,7 @@ en:
     application_edit: Editing your application
     eligibility: First, check you can use this service
     error_prefix: 'Error: '
+    success_prefix: 'Success: '
     not_eligible_yet: We’re sorry, but we’re not ready for you yet
     submitted_application: Your submitted application
     sign_up: Create an account