From 2d512cb0fd430f4c5cc9af170724678710832372 Mon Sep 17 00:00:00 2001
From: Pea Tyczynska <pea.tyczynska@digital.cabinet-office.gov.uk>
Date: Thu, 10 Sep 2020 16:00:41 +0100
Subject: [PATCH] Turn autofocus on for setting service branding

Accessibility audit uncovered issues screen-reader users would
have with autofocus on Notify pages. Autofocus can lead to
confusion for those types of users and make them miss parts
of the page.

Hence, we decided that autofocus will be turned off by default
for live-search component.

We decided to keep the autofocus on for live-search text box when:
1. the page is a task page - as opposed to browsing pages, where
user wonders freely, task pages have more established flow, so
page focusing on textbox can actually be helpful.
2. page does not have actionable elements above the autofocus.
---
 .../views/service-settings/set-email-branding.html | 14 +++++++++++---
 .../service-settings/set-letter-branding.html      | 14 +++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html
index 4de59364d..e8baba461 100644
--- a/app/templates/views/service-settings/set-email-branding.html
+++ b/app/templates/views/service-settings/set-email-branding.html
@@ -5,14 +5,16 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
 
+{% set page_title = "Set email branding" %}
+
 {% block service_page_title %}
-  Set email branding
+  {{ page_title }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
   {{ page_header(
-    'Set email branding',
+    page_title,
     back_link=url_for('.service_settings', service_id=current_service.id)
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
@@ -22,7 +24,13 @@
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
-        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search branding styles by name') }}
+        {{ live_search(
+          target_selector='.multiple-choice',
+          show=True,
+          form=search_form,
+          label='Search branding styles by name',
+          autofocus=True
+        ) }}
         {{ radios(form.branding_style) }}
       </div>
     </div>
diff --git a/app/templates/views/service-settings/set-letter-branding.html b/app/templates/views/service-settings/set-letter-branding.html
index 455dcad65..4cb919a81 100644
--- a/app/templates/views/service-settings/set-letter-branding.html
+++ b/app/templates/views/service-settings/set-letter-branding.html
@@ -5,14 +5,16 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
+{% set page_title = "Set letter branding" %}
+
 {% block service_page_title %}
-  Set letter branding
+  {{ page_title }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
   {{ page_header(
-    'Set letter branding',
+    page_title,
     back_link=url_for('.service_settings', service_id=current_service.id)
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
@@ -22,7 +24,13 @@
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
-        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
+        {{ live_search(
+          target_selector='.multiple-choice',
+          show=True,
+          form=search_form,
+          label='Search by name',
+          autofocus=True
+        ) }}
         {{ radios(form.branding_style, hide_legend=True) }}
       </div>
     </div>