Merge pull request #1284 from consul/accesibility

Accesibility

app/assets/javascripts/comments.js.coffee

@@ -52,5 +52,6 @@ App.Comments =
         children_container_id = "#{$(this).data().id}_children"
         $("##{children_container_id}").toggle('slow')
         App.Comments.toggle_arrow(children_container_id)
+        $(this).children('.js-child-toggle').toggle()
         false
       )

app/assets/stylesheets/layout.scss

@@ -366,6 +366,10 @@ header {
       text-decoration: underline;
     }
   }
+
+  ul {
+    margin-bottom: 0;
+  }
 }
 
 .subnavigation {
@@ -509,7 +513,7 @@ footer {
   p {
     font-size: $small-font-size;
 
-    .info a {
+    &.info a {
       text-decoration: underline;
     }
   }
@@ -546,6 +550,7 @@ footer {
 
 .subfooter {
   border-top: 1px solid $text-light;
+  font-size: $small-font-size;
   padding-top: $line-height/2;
 }
 
@@ -577,7 +582,7 @@ footer {
   }
 }
 
-h3.sidebar-title {
+h2.sidebar-title {
   border-top: 2px solid $brand;
   display: inline-block;
   font-size: rem-calc(16);

app/assets/stylesheets/participation.scss

@@ -360,6 +360,13 @@
       font-size: rem-calc(15);
       margin-bottom: rem-calc(15);
     }
+
+    &.tags, &.geozone {
+
+      li {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .author-photo {
@@ -383,7 +390,7 @@
 
   aside {
 
-    h3 {
+    h2 {
       border-top: 2px solid $brand;
       display: inline-block;
       font-size: rem-calc(16);
@@ -844,11 +851,15 @@
   }
 
   p {
-    margin-bottom: 0;
 
     &.title {
       color: #FFD200;
     }
+
+    &.title-date {
+      font-size: rem-calc(24);
+      font-weight: bold;
+    }
   }
 
   .info {

app/views/comments/_comment.html.erb

@@ -74,7 +74,8 @@
 
             <% if comment.children.size > 0 %>
               <%= link_to "", class: "js-toggle-children relative", data:  {'id': "#{dom_id(comment)}"} do %>
-                <span class="sr-only"><%= t("shared.show") %></span>
+                <span class="sr-only js-child-toggle" style="display: none;"><%= t("shared.show") %></span>
+                <span class="sr-only js-child-toggle"><%= t("shared.hide") %></span>
                 <span id="<%= dom_id(comment) %>_children_arrow" class="icon-arrow-down"></span> <%= t("comments.comment.responses", count: comment.children.size) %>
               <% end %>
             <% else %>

app/views/debates/show.html.erb

@@ -44,12 +44,12 @@
 
       <aside class="small-12 medium-3 column">
         <div class="sidebar-divider"></div>
-        <h3><%= t("votes.supports") %></h3>
+        <h2><%= t("votes.supports") %></h2>
         <div id="<%= dom_id(@debate) %>_votes">
           <%= render 'debates/votes', debate: @debate %>
         </div>
         <div class="sidebar-divider"></div>
-        <h3><%= t("debates.show.share") %></h3>
+        <h2><%= t("debates.show.share") %></h2>
         <div class="social-share-full">
           <%= social_share_button_tag("#{@debate.title} #{setting['twitter_hashtag']}") %>
           <% if browser.device.mobile? %>

app/views/kaminari/_paginator.html.erb

@@ -1,7 +1,7 @@
 <%= paginator.render do -%>
   <div class="pagination-centered">
     <nav>
-      <h1 class="sr-only"><%= t("shared.outline.pagination") %></h1>
+      <h2 class="sr-only"><%= t("shared.outline.pagination") %></h2>
       <ul class="pagination text-center margin-top" aria-label="Pagination">
         <%= first_page_tag unless current_page.first? %>
         <%= prev_page_tag unless current_page.first? %>

app/views/layouts/_footer.html.erb

@@ -41,13 +41,13 @@
 
   <div class="subfooter row">
     <div class="small-12 medium-8 column">
-      <p>
-        <%= t("layouts.footer.copyright", year: Time.current.year) %>&nbsp;|&nbsp;
-        <%= link_to t("layouts.footer.more_info"), page_path('more_information') %>&nbsp;|&nbsp;
-        <%= link_to t("layouts.footer.privacy"), page_path('privacy') %>&nbsp;|&nbsp;
-        <%= link_to t("layouts.footer.conditions"), page_path('conditions') %>&nbsp;|&nbsp;
-        <%= link_to t("layouts.footer.accessibility"), page_path('accessibility') %>
-      </p>
+      <%= t("layouts.footer.copyright", year: Time.current.year) %>&nbsp;|
+      <ul class="no-bullet inline-block">
+        <li class="inline-block"><%= link_to t("layouts.footer.more_info"), page_path('more_information') %>&nbsp;|</li>
+        <li class="inline-block"><%= link_to t("layouts.footer.privacy"), page_path('privacy') %>&nbsp;|</li>
+        <li class="inline-block"><%= link_to t("layouts.footer.conditions"), page_path('conditions') %>&nbsp;|</li>
+        <li class="inline-block"><%= link_to t("layouts.footer.accessibility"), page_path('accessibility') %></li>
+      </ul>
     </div>
 
     <div class="small-12 medium-4 column social">

app/views/proposal_ballots/index.html.erb

@@ -11,7 +11,7 @@
 
     <div class="small-12 medium-4 column info" data-equalizer-watch>
       <p class="title"><strong><%= t("proposal_ballots.date_title") %></strong></p>
-      <h3><%= t("proposal_ballots.date") %></h3>
+      <p class="title-date"><%= t("proposal_ballots.date") %></p>
     </div>
   </div>
 </div>

app/views/proposals/_categories.html.erb

@@ -1,9 +1,9 @@
 <div class="sidebar-divider"></div>
-<h3 class="sidebar-title"><%= t("shared.tags_cloud.categories") %></h3>
+<h2 class="sidebar-title"><%= t("shared.tags_cloud.categories") %></h2>
 <br>
 
-<div id="categories" class="categories">
+<ul id="categories" class="no-bullet categories">
   <% @categories.each do |category| %>
-    <%= link_to category.name, proposals_path(search: category.name) %>
+    <li class="inline-block"><%= link_to category.name, proposals_path(search: category.name) %></li>
   <% end %>
-</div>
+</ul>

app/views/proposals/_geozones.html.erb

@@ -1,5 +1,5 @@
 <div class="sidebar-divider"></div>
-<h3 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h3>
+<h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
 <br>
 <%= link_to map_proposals_path, id: 'map', title: t("shared.tags_cloud.districts_list") do %>
   <%= image_tag("map.jpg", alt: t("shared.tags_cloud.districts_list")) %>

app/views/proposals/_popular.html.erb

@@ -1,5 +1,5 @@
 <div class="sidebar-divider"></div>
-<h3 class="sidebar-title"><%= t("proposals.index.top") %></h3>
+<h2 class="sidebar-title"><%= t("proposals.index.top") %></h2>
 
 <p>
   <%= link_to t("proposals.index.top_link_proposals"), summary_proposals_path, class: "small" %><br>

app/views/proposals/_retired.html.erb

@@ -1,5 +1,5 @@
 <div class="sidebar-divider"></div>
-<h3 class="sidebar-title"><%= t("proposals.index.retired_proposals") %></h3>
+<h2 class="sidebar-title"><%= t("proposals.index.retired_proposals") %></h2>
 
 <% if params[:retired].blank? %>
   <p><%= link_to t("proposals.index.retired_proposals_link"), proposals_path(retired: 'all'), class: "small" %></p>

app/views/proposals/show.html.erb

@@ -101,7 +101,7 @@
 
       <aside class="small-12 medium-3 column">
         <div class="sidebar-divider"></div>
-        <h3><%= t("votes.supports") %></h3>
+        <h2><%= t("votes.supports") %></h2>
         <div id="<%= dom_id(@proposal) %>_votes" class="supports text-center">
           <% if @proposal.successfull? %>
             <p>
@@ -119,7 +119,7 @@
           <% end %>
         </div>
         <div id="social-share" class="sidebar-divider"></div>
-        <h3><%= t("proposals.show.share") %></h3>
+        <h2><%= t("proposals.show.share") %></h2>
         <div class="social-share-full">
           <%= social_share_button_tag("#{@proposal.title} #{setting['twitter_hashtag']}") %>
           <% if browser.device.mobile? %>

app/views/shared/_advanced_search.html.erb

@@ -2,12 +2,14 @@
   <%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title', class: "advanced-search small" %>
 </div>
 
-<div class="advanced-search-form clear">
+<div class="row advanced-search-form">
   <%= form_tag search_path, method: :get do %>
     <div id='js-advanced-search' data-advanced-search-terms=<%= @advanced_search_terms.present? %> style="display: none">
 
       <div class="small-12 column">
-        <label><%= t("shared.advanced_search.general") %></label>
+        <label for="search">
+          <%= t("shared.advanced_search.general") %>
+        </label>
         <%= text_field_tag "search", params[:search],
                            placeholder: t("shared.advanced_search.general_placeholder") %>
       </div>

app/views/shared/_geozone.html.erb

@@ -1,3 +1,5 @@
-<span id="geozone" class="geozone">
-  <%= link_to geozone_name(geozonable), proposals_path(search: geozone_name(geozonable)) %>
-</span>
+<ul id="geozone" class="no-bullet geozone">
+  <li class="inline-block">
+    <%= link_to geozone_name(geozonable), proposals_path(search: geozone_name(geozonable)) %>
+  </li>
+</ul>

app/views/shared/_locale_switcher.html.erb

@@ -5,12 +5,14 @@
         <%= t("layouts.header.locale") %>
       </label>
       <select class="js-location-changer locale-switcher inline-block" name="locale-switcher" id="locale-switcher">
-        <% I18n.available_locales.map do |loc| %>
-          <option <%= "selected" if loc == I18n.locale %>
-                  value="<%= current_path_with_query_params(locale: loc) %>">
-            <%= name_for_locale(loc) %>
-          </option>
-        <% end %>
+        <optgroup label="<%= t('layouts.header.available_locales') %>">
+          <% I18n.available_locales.map do |loc| %>
+            <option <%= "selected" if loc == I18n.locale %>
+                    value="<%= current_path_with_query_params(locale: loc) %>">
+              <%= name_for_locale(loc) %>
+            </option>
+          <% end %>
+        </optgroup>
       </select>
     </form>
   </div>

app/views/shared/_search_form.html.erb

@@ -2,8 +2,8 @@
   <h1 class="sr-only"><%= t("shared.outline.searcher") %></h1>
   <%= form_tag search_path, method: :get do %>
     <div class="input-group">
-      <label class="sr-only"><%= t("#{i18n_namespace}.title") %></label>
-      <input type="text" name="search" placeholder="<%= t("#{i18n_namespace}.placeholder") %>" class="input-group-field" value="<%= params[:search] %>">
+      <label for="search_text" class="sr-only"><%= t("#{i18n_namespace}.title") %></label>
+      <input type="text" name="search" placeholder="<%= t("#{i18n_namespace}.placeholder") %>" class="input-group-field" value="<%= params[:search] %>" id="search_text">
       <div class="input-group-button">
         <button type="submit" class="button" title="<%= t("#{i18n_namespace}.button") %>">
           <span class="sr-only"><%= t("#{i18n_namespace}.button") %></span>

app/views/shared/_tag_cloud.html.erb

@@ -1,12 +1,14 @@
-<div id="tag-cloud" class="tag-cloud">
+<div id="tag-cloud">
   <div class="sidebar-divider"></div>
-  <h3 class="sidebar-title"><%= t("shared.tags_cloud.tags") %></h3>
+  <h2 class="sidebar-title"><%= t("shared.tags_cloud.tags") %></h2>
   <br>
-
-  <% @tag_cloud.tags.each do |tag| %>
-    <%= link_to taggable_path(taggable, tag.name) do %>
-      <span class="tag"><%= tag.name %></span>
+  <ul class="no-bullet tag-cloud">
+    <% @tag_cloud.tags.each do |tag| %>
+      <li class="inline-block">
+        <%= link_to taggable_path(taggable, tag.name) do %>
+          <span class="tag"><%= tag.name %></span>
+        <% end %>
+      </li>
     <% end %>
-  <% end %>
+  </ul>
 </div>
-

app/views/shared/_tags.html.erb

@@ -1,14 +1,16 @@
 <%- limit ||= nil %>
 
 <% if taggable.tags.any? %>
-  <span id="tags" class='tags'>
+  <ul id="tags" class="no-bullet tags">
     <% taggable.tag_list_with_limit(limit).each do |tag| %>
-      <%= link_to sanitize(tag.name), send("#{taggable.class.name.underscore.pluralize}_path", search: tag.name) %>
+      <li class="inline-block"><%= link_to sanitize(tag.name), send("#{taggable.class.name.underscore.pluralize}_path", search: tag.name) %></li>
     <% end %>
 
     <% if taggable.tags_count_out_of_limit(limit) > 0 %>
-      <%= link_to "#{taggable.tags_count_out_of_limit(limit)}+",
-                  send("#{taggable.class.name.underscore}_path", taggable) %>
+      <li class="inline-block">
+        <%= link_to "#{taggable.tags_count_out_of_limit(limit)}+",
+                    send("#{taggable.class.name.underscore}_path", taggable) %>
+      </li>
     <% end %>
-  </span>
+  </ul>
 <% end %>

app/views/shared/_top_links.html.erb

@@ -1,15 +1,16 @@
 <div class="top-links hide-for-small-only">
   <div class="row">
     <%= render "shared/locale_switcher" %>
-    <div class="external-links">
-      <%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|
-      <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
+    <ul class="no-bullet external-links">
+      <li class="inline-block"><%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|</li>
+      <li class="inline-block"><%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %></li>
       <% if setting['blog_url'] %>
-        &nbsp;|
-        <%= link_to setting['blog_url'], title: t('shared.target_blank_html'), target: "_blank" do %>
-          <%= t("layouts.header.external_link_blog") %>
-        <% end %>
+        <li class="inline-block">|&nbsp;
+          <%= link_to setting['blog_url'], title: t('shared.target_blank_html'), target: "_blank" do %>
+            <%= t("layouts.header.external_link_blog") %>
+          <% end %>
+        </li>
       <% end %>
-    </div>
+    </ul>
   </div>
 </div>

app/views/spending_proposals/_sidebar.html.erb

@@ -1,5 +1,5 @@
 <div class="sidebar-divider"></div>
-<h3 class="sidebar-title"><%= t("spending_proposals.index.sidebar.geozones") %></h3>
+<h2 class="sidebar-title"><%= t("spending_proposals.index.sidebar.geozones") %></h2>
 <br>
 <div class="geozone">
   <%= link_to t('geozones.all'), spending_proposals_path(geozone: nil) %>

config/locales/en.yml

@@ -185,6 +185,7 @@ en:
       transparency_url: https://transparency.consul
     header:
       administration: Administration
+      available_locales: Available languages
       debates: Debates
       external_link_blog: Blog
       external_link_opendata: Open data
@@ -426,6 +427,7 @@ en:
     check_none: None
     collective: Collective
     flag: Flag as inappropriate
+    hide: Hide
     print:
       print_button: Print this info
     show: Show

config/locales/es.yml

@@ -185,6 +185,7 @@ es:
       transparency_url: https://transparency.consul
     header:
       administration: Administrar
+      available_locales: Idiomas disponibles
       debates: Debates
       external_link_blog: Blog
       external_link_opendata: Datos abiertos
@@ -426,6 +427,7 @@ es:
     check_none: Ninguno
     collective: Colectivo
     flag: Denunciar como inapropiado
+    hide: Ocultar
     print:
       print_button: Imprimir esta información
     show: Mostrar