From bd19b1171c3e1596ed720bca9d8ff579719d4577 Mon Sep 17 00:00:00 2001
From: Pea Tyczynska <pea.tyczynska@digital.cabinet-office.gov.uk>
Date: Tue, 8 Sep 2020 15:51:29 +0100
Subject: [PATCH] Autofocus now optional for live_search

This change has been made because autofocus has been confusing
to users of screenreaders because they orient themselves by
what is in focus. Moving it when the page loads without warning
can cause confusion and mean they miss parts of the page
before the point focus has moved to.

So now we will only turn on autofocus if there are no other
elements in the page that need attention than the search box.
---
 app/templates/components/live-search.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/templates/components/live-search.html b/app/templates/components/live-search.html
index 4108ded7f..8c6641b60 100644
--- a/app/templates/components/live-search.html
+++ b/app/templates/components/live-search.html
@@ -1,21 +1,25 @@
-{% from "components/textbox.html" import textbox %}
-
 {% macro live_search(
     target_selector=None,
     show=False,
     form=None,
-    label=None
+    label=None,
+    autofocus=False
 ) %}
     {%- set search_label = label or form.search.label.text %}
+
+    {%- set param_extensions = {
+      "label": {"text": search_label},
+      "autocomplete": "off",
+    } %}
+
+    {% if autofocus %}
+      {% set x=param_extensions.__setitem__("attributes", {"data-module": "autofocus"}) %}
+    {% endif %}
+
     {% if show %}
-      <div data-module="autofocus">
         <div class="live-search js-header" data-module="live-search" data-targets="{{ target_selector }}">
-          {{ form.search(param_extensions={
-            "label": {"text": search_label},
-            "autocomplete": "off"
-          }) }}
+          {{ form.search(param_extensions=param_extensions) }}
           <div role="region" aria-live="polite" class="live-search__status govuk-visually-hidden"></div>
         </div>
-      </div>
     {% endif %}
 {% endmacro %}