using the bootstrap sr-only class instead of a custom one for the scr…

…een reader labels and translating the strings, fixes #500

resource/css/styles.css

@@ -1615,15 +1615,6 @@ p.autocomplete-label {
   font-weight: bold;
 }
 
-.screen-reader-label {
-  position:absolute;
-  left:-10000px;
-  top:auto;
-  width:1px;
-  height:1px;
-  overflow:hidden;
-}
-
 /* Fix for a nasty chromium bug causing the fonts not to render before a redraw.
  * https://code.google.com/p/chromium/issues/detail?id=336476
  ************************************/

view/headerbar.twig

@@ -8,7 +8,7 @@
 
   {% if request.page != '' %}<div class="search-vocab-text"><p>{% trans "Content language" %}</p></div>{% endif %}
   {% if sorted_vocabs is defined %}
-    <label class="screen-reader-label" for="multiselect">Search from vocabulary</label>
+    <label class="sr-only" for="multiselect">{% trans "Search from vocabulary" %}</label>
     <select class="multiselect" id="multiselect" multiple="multiple">
     {% for vocab in sorted_vocabs %}
       <option value="{{ vocab.id }}" data-voc-shortname="{{ vocab.shortname }}" data-label="{{ vocab.title }}" title="{{ vocab.title }}">{{ vocab.shortname }}</option>
@@ -19,7 +19,7 @@
     <input style="display: none" name="clang" value="{% if request.contentLang %}{{ request.contentLang }}{% else %}{{ request.lang }}{% endif %}" id="lang-input">
     <div class="input-group">
       <div class="input-group-btn">
-        <label class="screen-reader-label" for="lang-dropdown-toggle">Content and search language</label>
+        <label class="sr-only" for="lang-dropdown-toggle">{% trans "Content and search language" %}</label>
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="lang-dropdown-toggle">{{ request.lang | lang_name(request.lang) }}</button>
         <ul class="dropdown-menu">
         {% if request.vocab %}
@@ -34,10 +34,10 @@
           <li><a href="{% if not request.vocab %}{{ request.lang }}/{% endif %}{% if request.vocabid %}{{ request.vocabid }}/{{ request.lang }}/{% endif %}{% if request.page and request.page != 'vocab' %}{{ request.page }}/{% endif%}?{% if request.uri %}uri={{ request.uri }}&{% endif %}clang={% if request.contentLang %}{{ request.contentLang }}{% else %}{{ request.lang }}{% endif %}&anylang=on{% if term %}&q={{ term }}{% endif %}{% if vocabs %}&vocabs={{ vocabs }}{% endif %}" class="lang-button lang-button-all">{% trans "Search language: any" %}</a><input name="anylang" type="checkbox"{% if request.queryparam('anylang') %} checked{% endif%}></li>
         </ul>
       </div><!-- /btn-group -->
-      <label class="screen-reader-label" for="search-field">Enter search term</label>
+      <label class="sr-only" for="search-field">{% trans "Enter search term" %}</label>
       <input id="search-field" type="text" class="form-control" name="q" value="{{ term }}" title="queryterm">
       <div class="input-group-btn">
-        <label class="screen-reader-label" for="search-all-button">Submit search</label>
+        <label class="sr-only" for="search-all-button">{% trans "Submit search" %}</label>
         <button id="search-all-button" type="submit" class="btn btn-primary">{% trans "Search" %}</button>
       </div>
     </div>