Merge pull request #3622 from alphagov/searchbox-make-autofocus-optional

Autofocus off by default on live-search
2026-08-19 05:59:44 -04:00 · 2020-09-29 10:58:00 +01:00
parent 65e32f8e5a 2639406ae2
commit f4f2e5d13a
14 changed files with 156 additions and 43 deletions
--- 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 %}
--- a/app/templates/views/broadcast/areas-with-sub-areas.html
+++ b/app/templates/views/broadcast/areas-with-sub-areas.html
@@ -14,7 +14,13 @@
    back_link=url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
  )}}

-  {{ live_search(target_selector='.file-list-item', show=show_search_form, form=search_form, label='Search by name') }}
+  {{ live_search(
+    target_selector='.file-list-item',
+    show=show_search_form,
+    form=search_form,
+    label='Search by name',
+    autofocus=True)
+  }}

  {% for area in library|sort %}
    <div class="file-list-item">
--- a/app/templates/views/broadcast/areas.html
+++ b/app/templates/views/broadcast/areas.html
@@ -16,7 +16,13 @@
    back_link=url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
  )}}

-  {{ live_search(target_selector='.govuk-checkboxes__item', show=show_search_form, form=search_form, label='Search by name') }}
+  {{ live_search(
+      target_selector='.govuk-checkboxes__item',
+      show=show_search_form,
+      form=search_form,
+      label='Search by name',
+      autofocus=True)
+  }}

  {% call form_wrapper() %}
    {{ form.areas }}
--- 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">
--- 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">
--- 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 %}
--- 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>
--- 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>
--- a/app/templates/views/service-settings/link-service-to-organisation.html
+++ b/app/templates/views/service-settings/link-service-to-organisation.html
@@ -5,17 +5,24 @@
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}

+{% set page_title = "Link service to organisation" %}
+
 {% block service_page_title %}
-  Link service to organisation
+  {{ page_title }}
 {% endblock %}

 {% block maincolumn_content %}

  {{ page_header(
-    'Link service to organisation',
+    page_title,
    back_link=url_for('.service_settings', service_id=current_service.id)
  ) }}
-  {{ 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
+  ) }}
  {% call form_wrapper() %}
    {% if has_organisations %}
      {{ radios(form.organisations) }}
--- 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>
--- 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>
--- a/app/templates/views/templates/copy.html
+++ b/app/templates/views/templates/copy.html
@@ -2,15 +2,16 @@
 {% from "components/live-search.html" import live_search %}

 {% extends "withnav_template.html" %}
+{% set page_title = "Copy an existing template" %}

 {% block service_page_title %}
-  Copy an existing template
+  {{ page_title }}
 {% endblock %}

 {% block maincolumn_content %}

    <div class="bottom-gutter-1-2">
-      <h1 class="heading-large">Copy an existing template</h1>
+      <h1 class="heading-large">{{ page_title }}</h1>
      {{ copy_folder_path(template_folder_path, current_service.id, from_service, current_user) }}
    </div>
    {% if not services_templates_and_folders.templates_to_show %}
@@ -18,7 +19,12 @@
        This folder is empty
      </p>
    {% else %}
-      {{ live_search(target_selector='#template-list .template-list-item', show=True, form=search_form) }}
+      {{ live_search(
+        target_selector='#template-list .template-list-item',
+        show=True,
+        form=search_form,
+        autofocus=True
+      ) }}
      <nav id="template-list">
        {% for item in services_templates_and_folders %}
          <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">