From d7637dcca410c80da7e8b9fc657fc3e8f8e9bf1a Mon Sep 17 00:00:00 2001
From: Pea Tyczynska <pea.tyczynska@digital.cabinet-office.gov.uk>
Date: Wed, 9 Sep 2020 18:05:18 +0100
Subject: [PATCH] Turn autofocus on for platform admin branding pages search
 boxes

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.
---
 app/templates/views/email-branding/select-branding.html   | 8 +++++---
 .../views/letter-branding/select-letter-branding.html     | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/templates/views/email-branding/select-branding.html b/app/templates/views/email-branding/select-branding.html
index eb6e8e3cc..bd584176c 100644
--- a/app/templates/views/email-branding/select-branding.html
+++ b/app/templates/views/email-branding/select-branding.html
@@ -3,14 +3,16 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/button/macro.njk" import govukButton %}
 
+{% set page_title = "Email branding" %}
+
 {% block per_page_title %}
-  Email branding
+  {{ page_title }}
 {% endblock %}
 
 {% block platform_admin_content %}
 
-  <h1 class="heading-medium">Email branding</h1>
-  {{ live_search(target_selector='.email-brand', show=True, form=search_form) }}
+  <h1 class="heading-medium">{{ page_title }}</h1>
+  {{ live_search(target_selector='.email-brand', show=True, form=search_form, autofocus=True) }}
   <nav>
     {% for brand in email_brandings %}
       <div class="email-brand">
diff --git a/app/templates/views/letter-branding/select-letter-branding.html b/app/templates/views/letter-branding/select-letter-branding.html
index 7dfa52875..19611e4b9 100644
--- a/app/templates/views/letter-branding/select-letter-branding.html
+++ b/app/templates/views/letter-branding/select-letter-branding.html
@@ -3,14 +3,16 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/button/macro.njk" import govukButton %}
 
+{% set page_title = "Letter branding" %}
+
 {% block per_page_title %}
-  Letter branding
+  {{ page_title }}
 {% endblock %}
 
 {% block platform_admin_content %}
 
-  <h1 class="heading-medium">Letter branding</h1>
-  {{ live_search(target_selector='.letter-brand', show=True, form=search_form) }}
+  <h1 class="heading-medium">{{ page_title }}</h1>
+  {{ live_search(target_selector='.letter-brand', show=True, form=search_form, autofocus=True) }}
   <nav>
     {% for brand in letter_brandings %}
       <div class="letter-brand">