From bd19b1171c3e1596ed720bca9d8ff579719d4577 Mon Sep 17 00:00:00 2001 From: Pea Tyczynska Date: Tue, 8 Sep 2020 15:51:29 +0100 Subject: [PATCH 1/9] 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 %} -
- {{ form.search(param_extensions={ - "label": {"text": search_label}, - "autocomplete": "off" - }) }} + {{ form.search(param_extensions=param_extensions) }}
-
{% endif %} {% endmacro %} From ad6dc670f1b653d800b737c480c6135615757598 Mon Sep 17 00:00:00 2001 From: Pea Tyczynska Date: Wed, 9 Sep 2020 17:57:27 +0100 Subject: [PATCH 2/9] Turn autofocus on for broadcast areas search box 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/broadcast/areas-with-sub-areas.html | 8 +++++++- app/templates/views/broadcast/areas.html | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/app/templates/views/broadcast/areas-with-sub-areas.html b/app/templates/views/broadcast/areas-with-sub-areas.html index 2f1f02a7f..640f69772 100644 --- 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 %}
diff --git a/app/templates/views/broadcast/areas.html b/app/templates/views/broadcast/areas.html index 9ed0a38e8..f55c364cf 100644 --- 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 }} From d7637dcca410c80da7e8b9fc657fc3e8f8e9bf1a Mon Sep 17 00:00:00 2001 From: Pea Tyczynska Date: Wed, 9 Sep 2020 18:05:18 +0100 Subject: [PATCH 3/9] 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 %} -

Email branding

- {{ live_search(target_selector='.email-brand', show=True, form=search_form) }} +

{{ page_title }}

+ {{ live_search(target_selector='.email-brand', show=True, form=search_form, autofocus=True) }}
- {{ 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) }}
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 @@
- {{ 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) }}
From a73573c165e15ef09e2d344f5f8bd1ffdafe23e6 Mon Sep 17 00:00:00 2001 From: Pea Tyczynska Date: Thu, 10 Sep 2020 16:31:35 +0100 Subject: [PATCH 7/9] Turn autofocus on for copy template 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/templates/copy.html | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/templates/views/templates/copy.html b/app/templates/views/templates/copy.html index 7aac461ec..6bd5f74ba 100644 --- 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 %}
-

Copy an existing template

+

{{ page_title }}

{{ copy_folder_path(template_folder_path, current_service.id, from_service, current_user) }}
{% if not services_templates_and_folders.templates_to_show %} @@ -18,7 +19,12 @@ This folder is empty

{% 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 + ) }}