From ad6dc670f1b653d800b737c480c6135615757598 Mon Sep 17 00:00:00 2001 From: Pea Tyczynska Date: Wed, 9 Sep 2020 17:57:27 +0100 Subject: [PATCH] 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 }}