darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-10 11:24:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Turn autofocus on for platform admin branding pages search boxes

Browse Source 
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 18:05:18 +01:00
committed by Tom Byers
parent ad6dc670f1
commit d7637dcca4
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/views/email-branding/select-branding.html
View File

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

8
app/templates/views/letter-branding/select-letter-branding.html
View File

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