Accessibility: Add aria-label to the search button (#2014)

* Accessibility: Add aria-label to the search button
* Update button aria text
* Add aria text to menu toggle
* Add span for search toggle
* Update span for menu label & remove aria
* Update ui-text.yml to add search_label
This commit is contained in:
Sean Killeen 2019-01-01 18:33:51 -05:00 committed by Michael Rose
parent 1cd1e7112a
commit a81ed706da
2 changed files with 28 additions and 1 deletions

View file

@ -9,6 +9,7 @@ en: &DEFAULT_EN
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label : "Toggle menu"
search_label : "Toggle search"
toc_label : "On this page"
ext_link_label : "Direct link"
less_than : "less than"
@ -61,6 +62,7 @@ es: &DEFAULT_ES
breadcrumb_home_label : "Inicio"
breadcrumb_separator : "/"
menu_label :
search_label :
toc_label : "Contenidos"
ext_link_label : "Enlace"
less_than : "menos de"
@ -106,6 +108,7 @@ fr: &DEFAULT_FR
breadcrumb_home_label : "Accueil"
breadcrumb_separator : "/"
menu_label : "Menu"
search_label :
toc_label : "Sur cette page"
ext_link_label : "Lien direct"
less_than : "moins de"
@ -156,6 +159,7 @@ tr: &DEFAULT_TR
breadcrumb_home_label : "Ana Sayfa"
breadcrumb_separator : "/"
menu_label :
search_label :
toc_label : "İçindekiler"
ext_link_label : "Doğrudan Bağlantı"
less_than : "Şu süreden az: "
@ -199,6 +203,7 @@ pt: &DEFAULT_PT
breadcrumb_home_label : "Início"
breadcrumb_separator : "/"
menu_label :
search_label :
toc_label : "Nesta Página"
ext_link_label : "Link Direto"
less_than : "menos de"
@ -240,6 +245,7 @@ pt-BR:
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label :
search_label :
toc_label : "Nesta página"
ext_link_label : "Link direto"
less_than : "menos que"
@ -281,6 +287,7 @@ it: &DEFAULT_IT
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label :
search_label :
toc_label : "Indice della pagina"
ext_link_label : "Link"
less_than : "meno di"
@ -327,6 +334,7 @@ zh: &DEFAULT_ZH_HANS
breadcrumb_home_label : "首页"
breadcrumb_separator : "/"
menu_label : "切换菜单"
search_label :
toc_label : "在本页上"
ext_link_label : "直接链接"
less_than : "少于"
@ -370,6 +378,7 @@ zh-TW: &DEFAULT_ZH_HANT
breadcrumb_home_label : "首頁"
breadcrumb_separator : "/"
menu_label : "切換選單"
search_label :
toc_label : "本頁"
ext_link_label : "外部連結"
less_than : "少於"
@ -413,6 +422,7 @@ de: &DEFAULT_DE
breadcrumb_home_label : "Start"
breadcrumb_separator : "/"
menu_label : "Menü ein-/ausschalten"
search_label :
toc_label : "Auf dieser Seite"
ext_link_label : "Direkter Link"
less_than : "weniger als"
@ -468,6 +478,7 @@ ne: &DEFAULT_NE
breadcrumb_home_label : "गृह"
breadcrumb_separator : "/"
menu_label : "टगल मेनु"
search_label :
toc_label : "यो पृष्‍ठमा"
ext_link_label : "सिधा सम्पर्क"
less_than : "कम्तिमा"
@ -511,6 +522,7 @@ ko: &DEFAULT_KO
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label : "토글 메뉴"
search_label :
toc_label : "On This Page"
ext_link_label : "직접 링크"
less_than : "최대"
@ -554,6 +566,7 @@ ru: &DEFAULT_RU
breadcrumb_home_label : "Главная"
breadcrumb_separator : "/"
menu_label : "Выпадающее меню"
search_label :
toc_label : "Содержание"
ext_link_label : "Прямая ссылка"
less_than : "менее"
@ -599,6 +612,7 @@ lt: &DEFAULT_LT
breadcrumb_home_label : "Pagrindinis"
breadcrumb_separator : "/"
menu_label : "Meniu rodymas"
search_label :
toc_label : "Turinys"
ext_link_label : "Tiesioginė nuoroda"
less_than : "mažiau nei"
@ -642,6 +656,7 @@ gr: &DEFAULT_GR
breadcrumb_home_label : "Αρχική"
breadcrumb_separator : "/"
menu_label : "Μενού"
search_label :
toc_label : "Περιεχόμενα"
ext_link_label : "Εξωτερικός Σύνδεσμος"
less_than : "Λιγότερο από"
@ -687,6 +702,7 @@ sv: &DEFAULT_SV
breadcrumb_home_label : "Hem"
breadcrumb_separator : "/"
menu_label : "Meny ridå"
search_label :
toc_label : "På denna sida"
ext_link_label : "Direkt länk"
less_than : "mindre än"
@ -732,6 +748,7 @@ nl: &DEFAULT_NL
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label : "Wissel Menu"
search_label :
toc_label : "Op deze pagina"
ext_link_label : "Directe Link"
less_than : "minder dan"
@ -777,6 +794,7 @@ id: &DEFAULT_ID
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label : "Menu Toggle"
search_label :
toc_label : "Pada Halaman Ini"
ext_link_label : "Link langsung"
less_than : "Kurang dari"
@ -820,6 +838,7 @@ vi: &DEFAULT_VI
breadcrumb_home_label : "Trang chủ"
breadcrumb_separator : "/"
menu_label : "Menu"
search_label :
toc_label : "Tại trang này"
ext_link_label : "Đường dẫn trực tiếp"
less_than : "nhỏ hơn"
@ -863,6 +882,7 @@ da: &DEFAULT_DA
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
menu_label : "Vis/skjul menu"
search_label :
toc_label : "På denne side"
ext_link_label : "Direkte link"
less_than : "mindre end"
@ -909,6 +929,7 @@ pl: &DEFAULT_PL
breadcrumb_home_label : "Strona główna"
breadcrumb_separator : "/"
menu_label : "Przełącz menu"
search_label :
toc_label : "Spis treści"
ext_link_label : "Link bezpośredni"
less_than : "mniej niż"
@ -952,6 +973,7 @@ ja: &DEFAULT_JA
breadcrumb_home_label : "ホーム"
breadcrumb_separator : "/"
menu_label : "メニュー"
search_label :
toc_label : "目次"
ext_link_label : "リンク"
less_than :
@ -997,6 +1019,7 @@ sk: &DEFAULT_SK
breadcrumb_home_label : "Domov"
breadcrumb_separator : "/"
menu_label : "Menu"
search_label :
toc_label : "Obsah"
ext_link_label : "Priamy odkaz"
less_than : "menej ako"
@ -1043,6 +1066,7 @@ hu: &DEFAULT_HU
breadcrumb_home_label : "Kezdőlap"
breadcrumb_separator : "/"
menu_label : "Menü nyit/zár"
search_label :
toc_label : "Ezen az oldalon"
ext_link_label : "Közvetlen Link"
less_than : "kevesebb mint"
@ -1089,6 +1113,7 @@ ro: &DEFAULT_RO
breadcrumb_home_label : "Acasă"
breadcrumb_separator : "/"
menu_label : "Comută meniul"
search_label :
toc_label : "Pe această pagină"
ext_link_label : "Link direct"
less_than : "mai puțin de"
@ -1135,6 +1160,7 @@ pa: &DEFAULT_PA
breadcrumb_home_label : "ਘਰ"
breadcrumb_separator : "/"
menu_label : "ਟੌਗਲ ਮੀਨੂ"
search_label :
toc_label : "ਇਸ ਸਫ਼ੇ 'ਤੇ"
ext_link_label : "ਸਿੱਧਾ ਸੰਪਰਕ"
less_than : "ਤੋਂ ਘੱਟ"

View file

@ -17,13 +17,14 @@
</ul>
{% if site.search == true %}
<button class="search__toggle" type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
<svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
<path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
</svg>
</button>
{% endif %}
<button class="greedy-nav__toggle hidden" type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>