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.
This commit is contained in:
Pea Tyczynska
2020-09-09 17:57:27 +01:00
committed by Tom Byers
parent bd19b1171c
commit ad6dc670f1
2 changed files with 14 additions and 2 deletions

View File

@@ -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">

View File

@@ -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 }}