From 23497c839c1947685a06d362fb5fba80c4d4f427 Mon Sep 17 00:00:00 2001
From: Pea Tyczynska <pea.tyczynska@digital.cabinet-office.gov.uk>
Date: Thu, 10 Sep 2020 15:21:28 +0100
Subject: [PATCH] Turn autofocus on for search in broadcast views

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.
---
 .../add-nhs-local-organisation.html              | 14 +++++++++++---
 .../settings/set-email-branding.html             | 16 ++++++++++++----
 .../settings/set-letter-branding.html            | 16 ++++++++++++----
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/app/templates/views/organisations/add-nhs-local-organisation.html b/app/templates/views/organisations/add-nhs-local-organisation.html
index 7047a4660..7c53e73a4 100644
--- a/app/templates/views/organisations/add-nhs-local-organisation.html
+++ b/app/templates/views/organisations/add-nhs-local-organisation.html
@@ -6,20 +6,28 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
 
+{% set page_title = "Accept our data sharing and financial agreement" %}
+
 {% block per_page_title %}
-  Accept our data sharing and financial agreement
+  {{ page_title }}
 {% endblock %}
 
 {% block maincolumn_content %}
   {{ page_header(
-    'Accept our data sharing and financial agreement',
+    page_title,
     back_link=url_for('main.request_to_go_live', service_id=current_service.id)
   ) }}
   {% call form_wrapper() %}
     <p class="govuk-body">
       {{ form.organisations.label.text }}
     </p>
-    {{ 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.organisations, hide_legend=True) }}
     {{ sticky_page_footer('Continue') }}
   {% endcall %}
diff --git a/app/templates/views/organisations/organisation/settings/set-email-branding.html b/app/templates/views/organisations/organisation/settings/set-email-branding.html
index f61b40fe6..6c9ef0995 100644
--- a/app/templates/views/organisations/organisation/settings/set-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-email-branding.html
@@ -5,14 +5,16 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
 
-{% block org_page_title %}
-  Default email branding
+{% set page_title = "Default email branding" %}
+
+{% block per_page_title %}
+  {{ page_title }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
   {{ page_header(
-    "Default email branding",
+    page_title,
     back_link=url_for('.organisation_settings', org_id=current_org.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/organisations/organisation/settings/set-letter-branding.html b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
index f93673799..a612c9696 100644
--- a/app/templates/views/organisations/organisation/settings/set-letter-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
@@ -5,14 +5,16 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/form.html" import form_wrapper %}
 
-{% block org_page_title %}
-  Default letter branding
+{% set page_title = "Default letter branding" %}
+
+{% block per_page_title %}
+  {{ page_title }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
   {{ page_header(
-    "Default letter branding",
+    page_title,
     back_link=url_for('.organisation_settings', org_id=current_org.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>