Add accessibility label for reset button. Closes #591.

swiss · Dec 4, 2017 · 443eeb4 · 443eeb4
1 parent 44f9d95
commit 443eeb4
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/src/assets/js/autocomplete.js b/src/assets/js/autocomplete.js
@@ -36,7 +36,7 @@
   }
 
   // Insert the icons
-  $searchFields.after('<span class="icon icon--close" data-form-search-clear></span>');
+  $searchFields.after('<span class="icon icon--close" data-form-search-clear><span class="sr-only">Clear</span></span>');
   $('.form-search').append('<button class="icon icon--search icon--before"><span class="sr-only">Search</span></button>');
 
   $('body').on('click', '[data-form-search-clear]', function () {

diff --git a/src/locales/de/styleguide.yml b/src/locales/de/styleguide.yml
@@ -17,4 +17,5 @@ disclaimer:
   link: http://www.disclaimer.admin.ch/terms_and_conditions.html
 global-search:
   title: Suche
+  reset: Zurücksetzen
   nothing-found: Nichts gefunden.
diff --git a/src/locales/en/styleguide.yml b/src/locales/en/styleguide.yml
@@ -17,4 +17,5 @@ disclaimer:
   link: http://www.disclaimer.admin.ch/terms_and_conditions.html
 global-search:
   title: Search
+  reset: Reset
   nothing-found: Nothing found.
diff --git a/src/locales/fr/styleguide.yml b/src/locales/fr/styleguide.yml
@@ -17,4 +17,5 @@ disclaimer:
   link: http://www.disclaimer.admin.ch/terms_and_conditions.html
 global-search:
   title: Chercher
+  reset: Rétablir
   nothing-found: Rien n'a été trouvé.
diff --git a/src/views/layouts/includes/f-header.html b/src/views/layouts/includes/f-header.html
@@ -32,7 +32,9 @@ <h1>{{t 'styleguide.title'}}</h1>
         <h2 class="sr-only">{{t 'styleguide.global-search.title'}}</h2>
         <label for="webguiedelines-search-standard" class="sr-only">{{t 'styleguide.global-search.title'}}</label>
         <input id="webguiedelines-search-standard" class="form-control search-input" type="text" placeholder="{{t 'styleguide.global-search.title'}}"/>
-        <span class="icon icon--close search-reset"></span>
+        <span class="icon icon--close search-reset">
+          <span class="sr-only">{{t 'styleguide.global-search.reset'}}</span>
+        </span>
         <div class="search-results">
           <div class="search-results-list"></div>
         </div>