templates: add accessibility to search and audio buttons

diff --git a/panikweb_templates/static/css/_general.scss b/panikweb_templates/static/css/_general.scss
index c22e329fb67ed5c5fb8b9f1d74d751707214074c..2632afaeb0a966078701a84072f3625b8cbca728 100644 (file)
--- a/panikweb_templates/static/css/_general.scss
+++ b/panikweb_templates/static/css/_general.scss
@@ -176,6 +176,17 @@ ul.list > li{
 /*USEFULL CLASSES */
 /******************/
 
+.sr-only {
+       position: absolute !important;
+       width: 1px !important;
+       height: 1px !important;
+       padding: 0 !important;
+       margin: -1px !important;
+       overflow: hidden !important;
+       clip: rect(0, 0, 0, 0) !important;
+       white-space: nowrap !important;
+       border: 0 !important;
+}
 
 ul.distributed{
        display:table;

diff --git a/panikweb_templates/templates/agenda.html b/panikweb_templates/templates/agenda.html
index 3ef2d1f81317ce9d8fc809b0f7d19415d1e88883..a4b1e67ba8a916a9ab66acda05e8ffdf1eb590f1 100644 (file)
--- a/panikweb_templates/templates/agenda.html
+++ b/panikweb_templates/templates/agenda.html
@@ -65,7 +65,7 @@ Sur les ondes comme dans la ville, une quantité d'événements Panik et proches
 
        <form action="{% url 'newsArchives' %}" id="search-form">
                <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-               <button class="icon-search"></button>
+                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
        </form>
 
                                                <ul class="custom list newsList">

diff --git a/panikweb_templates/templates/emissions/emission_detail.html b/panikweb_templates/templates/emissions/emission_detail.html
index 0b57f24312d01ef392fa34b9f84c71b3f7b4ed1b..bf44c548afc326573ff85c4890ff9d351bb7c2cf 100644 (file)
--- a/panikweb_templates/templates/emissions/emission_detail.html
+++ b/panikweb_templates/templates/emissions/emission_detail.html
@@ -65,7 +65,7 @@
                                                <h5 class="sectionLabel">Épisodes&nbsp;<a title="Podcasts" class="button icon-rss inBlock" href="{% url 'emission-podcasts' slug=emission.slug%}"></a></h5>
                     <form method="get" action="{% url 'emissionEpisodes' slug=emission.slug %}" class="" id="search-form">
                                 <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-                                <button class="icon-search"></button>
+                                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
                         </form>
 
                                {% if futurEpisodes %}

diff --git a/panikweb_templates/templates/emissions/newsitem_detail.html b/panikweb_templates/templates/emissions/newsitem_detail.html
index 6548561a95b37b8a592105be4c2c5e150d639ed1..79dde5d7506e24bbeb03dbab606e684917c1ea2b 100644 (file)
--- a/panikweb_templates/templates/emissions/newsitem_detail.html
+++ b/panikweb_templates/templates/emissions/newsitem_detail.html
@@ -80,7 +80,7 @@
 
        <form action="{% url 'newsArchives' %}" id="search-form">
                <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-               <button class="icon-search"></button>
+                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
        </form>
 
                                                <ul class="custom list newsList">

diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index 7c51753d76ca0e9764443eb884c066cc8bf0775e..5cb813adad096ac2ac4155bc24eff65959094fd4 100644 (file)
--- a/panikweb_templates/templates/includes/audio.html
+++ b/panikweb_templates/templates/includes/audio.html
@@ -1,31 +1,31 @@
-{% load soundfiles paniktags %}
+{% load soundfiles paniktags i18n %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
        <div class="audio" data-sound-id="{{ sound.id }}">
                {% if not embed %}
                <button class="resymbol icon-plus-sign big"
-                       title="Add to playlist" 
+                       title="{% trans "Add to playlist" %}"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="registerAudio" 
                        id="addToPlaylist-{{ sound.file.url|slugify }}"
-                       ></button>
+                       ><span class="sr-only">{% trans "Add to playlist" %}</span></button>
                {% endif %}
                <button class="resymbol icon-play-sign big"
-                       title="Play" 
+                       title="{% trans "Play" %}"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="playAudio" 
-                       ></button>
+                       ><span class="sr-only">{% trans "Play" %}</span></button>
                {% if embed %}
                <button class="icons icon-pause big"
-                       title="Pause"
+                       title="{% trans "Pause" %}"
                        style="display: none;"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="pauseSounds" 
-                       ></button>
+                       ><span class="sr-only">{% trans "Pause" %}</span></button>
                {% endif %}
                <button class="resymbol icon-download big"
-                       title="Download file" 
+                       title="{% trans "Download file" %}"
                        onclick="$(this).next().toggleClass('hidden-download-links');return false;"
-                       ></button>
+                       ><span class="sr-only">{% trans "Download file" %}</span></button>
                <div class="download-links hidden-download-links">
                        {% if sound|is_format_available:'ogg' %}
                        <a target="_blank" class="button inBlock" href="{{ sound|format_url:'ogg' }}">
@@ -40,9 +40,9 @@
                </div>
                {% if not embed %}
                <button class="icon-share icons big"
-                       title="Embed"
+                       title="{% trans "Embed" %}"
                        data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
-                       ></button>
+                       ><span class="sr-only">{% trans "Embed" %}</span></button>
                {% endif %}
        </div>
        {% if display_fragment_name %}

diff --git a/panikweb_templates/templates/includes/player.html b/panikweb_templates/templates/includes/player.html
index 10c621da5e2e2dd0574e82e5950c4c8d8ea4ed2d..af794569302a38cdbbdf295d076f527f761273c0 100644 (file)
--- a/panikweb_templates/templates/includes/player.html
+++ b/panikweb_templates/templates/includes/player.html
@@ -35,7 +35,7 @@
                <div id="Playlist" class="cf">
                        <div id="localList" class="padded" style="display: none;">
                                <div id="playlistLabel">
-                                       <button title="Empty playlist" id="emptyList" class="icon-trash button" style="float:right;"></button>
+                                        <button title="{% trans "Empty playlist" %}" id="emptyList" class="icon-trash button" style="float:right;"><span class="sr-only">{% trans "Empty playlist" %}</span></button>
                                </div>
                        </div>
            </div>

diff --git a/panikweb_templates/templates/listen.html b/panikweb_templates/templates/listen.html
index 5f33a5ea14b7bd778a1e60eeed846df501450151..c7153df1c67bf02e6fb236a979792a6ed3e68875 100644 (file)
--- a/panikweb_templates/templates/listen.html
+++ b/panikweb_templates/templates/listen.html
@@ -71,7 +71,7 @@
 
        <form action="{% url 'listenArchives' %}" id="search-form">
                <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-               <button class="icon-search"></button>
+                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
        </form>
 
         <ul class="custom list soundfilesList">

diff --git a/panikweb_templates/templates/listen/archives.html b/panikweb_templates/templates/listen/archives.html
index f92d16e545458e4af297425cb180fe41b390f608..bead8202f5b0b070fec7944755d3613794ab78e4 100644 (file)
--- a/panikweb_templates/templates/listen/archives.html
+++ b/panikweb_templates/templates/listen/archives.html
@@ -52,7 +52,8 @@
             {% for tag in selected_tags %}
             <input type="hidden" name="selected_facets" value="tags_exact:{{tag}}"/>
             {% endfor %}
-            {{ form.as_table }}<button class="icon-search"></button>
+            {{ form.as_table }}
+            <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
       </div>
     </form>
 

diff --git a/panikweb_templates/templates/news.html b/panikweb_templates/templates/news.html
index 94031bcd4aee0ae766164abb9acbcfcd3e72aede..5e3ed5f8910d6bf5d706d610edaa8b93b53825a0 100644 (file)
--- a/panikweb_templates/templates/news.html
+++ b/panikweb_templates/templates/news.html
@@ -48,7 +48,7 @@ vous fait savoir.
 
        <form action="{% url 'newsArchives' %}" id="search-form">
                <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-               <button class="icon-search"></button>
+                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
        </form>
 
                                                <ul class="custom list newsList">

diff --git a/panikweb_templates/templates/news/archives.html b/panikweb_templates/templates/news/archives.html
index fc444fdbff24eadf10e934d2c6a7cb5f55edd276..3c423b2acff28cb2bb7e34df04bd24aac165b378 100644 (file)
--- a/panikweb_templates/templates/news/archives.html
+++ b/panikweb_templates/templates/news/archives.html
@@ -52,7 +52,8 @@
             {% for tag in selected_tags %}
             <input type="hidden" name="selected_facets" value="tags_exact:{{tag}}"/>
             {% endfor %}
-            {{ form.as_table }}<button class="icon-search"></button>
+            {{ form.as_table }}
+            <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
       </div>
     </form>
 

diff --git a/panikweb_templates/templates/search/search.html b/panikweb_templates/templates/search/search.html
index e1113da600e408474b6d7b70bf9c2c4823956615..bcca8e3be00ff2dc13b46788eb99992bcd0797ed 100644 (file)
--- a/panikweb_templates/templates/search/search.html
+++ b/panikweb_templates/templates/search/search.html
@@ -7,7 +7,8 @@
     <div class="wrapper">
         <nav>
         <form method="get" action="." class="big marged" id="search-form">
-                {{ form.as_table }}<button class="icon-search"></button>
+                {{ form.as_table }}
+                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
         </form>
         </nav>
     </div>