replaces sr-only class to show-for-sr

This commit is contained in:
decabeza
2017-06-13 17:51:57 +02:00
parent 300634443c
commit 3bcfaeb61a
25 changed files with 52 additions and 63 deletions

View File

@@ -4,4 +4,4 @@ App.SocialShare =
$(".social-share-button a").each ->
element = $(this)
site = element.data('site')
element.append("<span class='sr-only'>#{site}</span>")
element.append("<span class='show-for-sr'>#{site}</span>")

View File

@@ -183,17 +183,6 @@ a {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.menu.simple {
border-bottom: 1px solid $border;
margin: $line-height 0;

View File

@@ -2,7 +2,7 @@ module LayoutsHelper
def layout_menu_link_to(text, path, is_active, options)
if is_active
content_tag(:span, t('shared.you_are_in'), class: 'sr-only') + ' ' +
content_tag(:span, t('shared.you_are_in'), class: 'show-for-sr') + ' ' +
link_to(text, path, options.merge(class: "active"))
else
link_to(text, path, options)

View File

@@ -9,7 +9,7 @@
class: "remove-investment-project",
method: :delete,
remote: true do %>
<span class="sr-only"><%= t('budgets.ballots.show.remove') %></span>
<span class="show-for-sr"><%= t('budgets.ballots.show.remove') %></span>
<span class="icon-x"></span>
<% end %>
<% end %>

View File

@@ -40,13 +40,13 @@
<td>
<% if investment.winner? %>
<span class="icon-check">
<span class="sr-only">
<span class="show-for-sr">
<%= t("budgets.results.accepted") %>
</span>
</span>
<% else %>
<span class="icon-x delete">
<span class="sr-only">
<span class="show-for-sr">
<%= t("budgets.results.discarded") %>
</span>
</span>

View File

@@ -73,8 +73,8 @@
<% if comment.children.size > 0 %>
<%= link_to "#{dom_id(comment)}", class: "js-toggle-children relative", data: {'id': "#{dom_id(comment)}"} do %>
<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 class="show-for-sr js-child-toggle" style="display: none;"><%= t("shared.show") %></span>
<span class="show-for-sr 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 %>

View File

@@ -8,13 +8,13 @@
<%= link_to vote_comment_path(comment, value: 'yes'),
method: "post", remote: true, title: t('votes.agree') do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<% end %>
<% else %>
<%= link_to new_user_session_path do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<% end %>
<% end %>
@@ -26,12 +26,12 @@
<%= link_to vote_comment_path(comment, value: 'no'),
method: "post", remote: true, title: t('votes.disagree') do %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<% end %>
<% else %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<% end %>
<%= comment.total_dislikes %>
@@ -48,13 +48,13 @@
<%= link_to vote_comment_path(comment, value: 'yes'),
method: "post", remote: true, title: t('votes.agree') do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<% end %>
<% else %>
<%= link_to new_user_session_path do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<% end %>
<% end %>
@@ -66,13 +66,13 @@
<%= link_to vote_comment_path(comment, value: 'no'),
method: "post", remote: true, title: t('votes.disagree') do %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<% end %>
<% else %>
<%= link_to new_user_session_path do %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<% end %>
<% end %>

View File

@@ -5,14 +5,14 @@
<%= link_to vote_debate_path(debate, value: 'yes'),
class: "like #{voted_classes[:in_favor]}", title: t('votes.agree'), method: "post", remote: true do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<span class="percentage"><%= votes_percentage('likes', debate) %></span>
<% end %>
<% else %>
<div class="like">
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
<span class="show-for-sr"><%= t('votes.agree') %></span>
</span>
<span class="percentage"><%= votes_percentage('likes', debate) %></span>
</div>
@@ -25,14 +25,14 @@
<% if user_signed_in? %>
<%= link_to vote_debate_path(debate, value: 'no'), class: "unlike #{voted_classes[:against]}", title: t('votes.disagree'), method: "post", remote: true do %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<span class="percentage"><%= votes_percentage('dislikes', debate) %></span>
<% end %>
<% else %>
<div class="unlike">
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
<span class="show-for-sr"><%= t('votes.disagree') %></span>
</span>
<span class="percentage"><%= votes_percentage('dislikes', debate) %></span>
</div>

View File

@@ -9,7 +9,7 @@
<% end %>
<main>
<h1 class="sr-only"><%= t("shared.outline.debates") %></h1>
<h1 class="show-for-sr"><%= t("shared.outline.debates") %></h1>
<% if @search_terms || @advanced_search_terms || @tag_filter %>
<div class="highlight no-margin-top padding margin-bottom">

View File

@@ -1,7 +1,7 @@
<% if user_signed_in? %>
<li>
<%= link_to notifications_path, rel: "nofollow", class: "notifications" do %>
<span class="sr-only"><%= t("layouts.header.notifications") %></span>
<span class="show-for-sr"><%= t("layouts.header.notifications") %></span>
<% if current_user.notifications_count > 0 %>
<span class="icon-circle" aria-hidden="true"></span>
<span class="icon-notification" aria-hidden="true" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">

View File

@@ -50,7 +50,7 @@
<li class="inline-block">
<%= link_to "https://twitter.com/#{setting['twitter_handle']}", target: "_blank",
title: t("shared.go_to_page") + t("social.twitter", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.twitter", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.twitter", org: setting['org_name']) %></span>
<span class="icon-twitter" aria-hidden="true"></span>
<% end %>
</li>
@@ -59,7 +59,7 @@
<li class="inline-block">
<%= link_to "https://www.facebook.com/#{setting['facebook_handle']}/", target: "_blank",
title: t("shared.go_to_page") + t("social.facebook", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.facebook", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.facebook", org: setting['org_name']) %></span>
<span class="icon-facebook" aria-hidden="true"></span>
<% end %>
</li>
@@ -68,7 +68,7 @@
<li class="inline-block">
<%= link_to setting['blog_url'], target: "_blank",
title: t("shared.go_to_page") + t("social.blog", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.blog", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.blog", org: setting['org_name']) %></span>
<span class="icon-blog" aria-hidden="true"></span>
<% end %>
</li>
@@ -77,7 +77,7 @@
<li class="inline-block">
<%= link_to "https://www.youtube.com/#{setting['youtube_handle']}", target: "_blank",
title: t("shared.go_to_page") + t("social.youtube", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.youtube", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.youtube", org: setting['org_name']) %></span>
<span class="icon-youtube" aria-hidden="true"></span>
<% end %>
</li>
@@ -86,7 +86,7 @@
<li class="inline-block">
<%= link_to "https://www.telegram.me/#{setting['telegram_handle']}", target: "_blank",
title: t("shared.go_to_page") + t("social.telegram", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.telegram", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.telegram", org: setting['org_name']) %></span>
<span class="icon-telegram" aria-hidden="true"></span>
<% end %>
</li>
@@ -95,7 +95,7 @@
<li class="inline-block">
<%= link_to "https://www.instagram.com/#{setting['instagram_handle']}", target: "_blank",
title: t("shared.go_to_page") + t("social.instagram", org: setting['org_name']) + t('shared.target_blank_html') do %>
<span class="sr-only"><%= t("social.instagram", org: setting['org_name']) %></span>
<span class="show-for-sr"><%= t("social.instagram", org: setting['org_name']) %></span>
<span class="icon-instagram" aria-hidden="true"></span>
<% end %>
</li>

View File

@@ -26,7 +26,7 @@
<body>
<%= setting['per_page_code_body'].try(:html_safe) %>
<h1 class="sr-only"><%= setting['org_name'] %></h1>
<h1 class="show-for-sr"><%= setting['org_name'] %></h1>
<div class="wrapper <%= yield (:wrapper_class) %>">
<%= render 'layouts/header' %>

View File

@@ -3,7 +3,7 @@
<% if browser.device.mobile? %>
<a href="whatsapp://send?text=<%= title %> <%= url %>" data-action="share/whatsapp/share">
<span class="icon-whatsapp whatsapp"></span>
<span class="sr-only"><%= t("social.whatsapp") %></span>
<span class="show-for-sr"><%= t("social.whatsapp") %></span>
</a>
<% end %>
</div>

View File

@@ -23,7 +23,7 @@
<div class="small-12 medium-6">
<table>
<caption class="sr-only">Atajos de teclado para el menú de navegación</caption>
<caption class="show-for-sr">Atajos de teclado para el menú de navegación</caption>
<thead>
<tr>
<th scope="col" class="text-center">Tecla</th>
@@ -63,7 +63,7 @@
<div class="small-12 medium-6">
<table>
<caption class="sr-only">Combinación de teclas dependiendo del sistema operativo y navegador</caption>
<caption class="show-for-sr">Combinación de teclas dependiendo del sistema operativo y navegador</caption>
<thead>
<tr>
<th scope="col">Navegador</th>

View File

@@ -4,7 +4,7 @@
<%= link_to poll,
class: "icon-poll-answer can-answer",
title: t("polls.index.can_answer") do %>
<span class="sr-only">
<span class="show-for-sr">
<%= t("polls.index.can_answer") %>
</span>
<% end %>
@@ -12,7 +12,7 @@
<%= link_to new_user_session_path,
class: "icon-poll-answer not-logged-in",
title: t("polls.index.cant_answer_not_logged_in") do %>
<span class="sr-only">
<span class="show-for-sr">
<%= t("polls.index.cant_answer_not_logged_in") %>
</span>
<% end %>
@@ -20,17 +20,17 @@
<%= link_to verification_path,
class: "icon-poll-answer unverified",
title: t("polls.index.cant_answer_verify") do %>
<span class="sr-only">
<span class="show-for-sr">
<%= t("polls.index.cant_answer_verify") %>
</span>
<% end %>
<% elsif !poll.votable_by?(current_user) %>
<div class="icon-poll-answer already-answer" title="<%= t("polls.index.already_answer") %>">
<span class="sr-only"><%= t("polls.index.already_answer") %></span>
<span class="show-for-sr"><%= t("polls.index.already_answer") %></span>
</div>
<% else %>
<div class="icon-poll-answer cant-answer" title="<%= t("polls.index.cant_answer") %>">
<span class="sr-only"><%= t("polls.index.cant_answer") %></span>
<span class="show-for-sr"><%= t("polls.index.cant_answer") %></span>
</div>
<% end %>
<div class="row">

View File

@@ -9,7 +9,7 @@
<% end %>
<main>
<h1 class="sr-only"><%= t("shared.outline.proposals") %></h1>
<h1 class="show-for-sr"><%= t("shared.outline.proposals") %></h1>
<% if @search_terms || @advanced_search_terms || @tag_filter || params[:retired].present? %>
<div class="highlight no-margin-top padding margin-bottom">

View File

@@ -9,7 +9,7 @@
</div>
<ul class="menu simple clear">
<li class="sr-only"><span class="translation_missing" title="translation missing: es.admin.legislation.processes.index.filter">Filter</span>: </li>
<li class="show-for-sr"><span class="translation_missing" title="translation missing: es.admin.legislation.processes.index.filter">Filter</span>: </li>
<li class="active">Abiertos</li>
<li><a href="/admin/legislation/processes?filter=next&amp;page=1">Próximamente</a></li>
<li><a href="/admin/legislation/processes?filter=past&amp;page=1">Pasados</a></li>

View File

@@ -39,9 +39,9 @@
<h3>Compartir</h3>
<div class="social-share-full">
<div class="social-share-button" data-title="Soluta sed sapiente dolores. #consul_dev" data-img="" data-url="" data-desc="" data-via="">
<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Compartir en Twitter" href="#"><span class="sr-only">twitter</span></a>
<a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="Compartir en Facebook" href="#"><span class="sr-only">facebook</span></a>
<a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="Compartir en Google+" href="#"><span class="sr-only">google_plus</span></a>
<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Compartir en Twitter" href="#"><span class="show-for-sr">twitter</span></a>
<a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="Compartir en Facebook" href="#"><span class="show-for-sr">facebook</span></a>
<a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="Compartir en Google+" href="#"><span class="show-for-sr">google_plus</span></a>
</div>
</div>
</div>

View File

@@ -1,5 +1,5 @@
<ul class="menu simple clear" id="filter-subnav">
<li class="sr-only"><%= t("#{i18n_namespace}.filter") %>: </li>
<li class="show-for-sr"><%= t("#{i18n_namespace}.filter") %>: </li>
<% @valid_filters.each do |filter| %>
<% if @current_filter == filter %>

View File

@@ -1,5 +1,5 @@
<ul class="menu vertical clear">
<li class="sr-only"><%= t("#{i18n_namespace}.filter") %>: </li>
<li class="show-for-sr"><%= t("#{i18n_namespace}.filter") %>: </li>
<% @valid_filters.each do |filter| %>
<% if @current_filter == filter %>

View File

@@ -1,5 +1,5 @@
<form class="inline-block">
<label for="order-selector-participation" class="sr-only"><%= t("#{i18n_namespace}.select_order") %></label>
<label for="order-selector-participation" class="show-for-sr"><%= t("#{i18n_namespace}.select_order") %></label>
<select class="js-location-changer js-order-selector select-order"
data-order="<%= @current_order %>"
name="order-selector"

View File

@@ -1,12 +1,12 @@
<div id="search_form" class="search-form-header">
<h1 class="sr-only"><%= t("shared.outline.searcher") %></h1>
<h1 class="show-for-sr"><%= t("shared.outline.searcher") %></h1>
<%= form_tag search_path, method: :get do %>
<div class="input-group">
<label for="search_text" class="sr-only"><%= t("#{i18n_namespace}.title") %></label>
<label for="search_text" class="show-for-sr"><%= 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>
<span class="show-for-sr"><%= t("#{i18n_namespace}.button") %></span>
<span class="icon-search"></span>
</button>
</div>

View File

@@ -7,6 +7,6 @@
<a href="whatsapp://send?text=<%= title.gsub(/\s/, '%20') %>&nbsp;<%= url %>"
class="show-for-small-only" data-action="share/whatsapp/share">
<span class="icon-whatsapp whatsapp"></span>
<span class="sr-only"><%= t("social.whatsapp") %></span>
<span class="show-for-sr"><%= t("social.whatsapp") %></span>
</a>
</div>

View File

@@ -6,7 +6,7 @@
<% end %>
<main>
<h1 class="sr-only"><%= t("shared.outline.budget") %></h1>
<h1 class="show-for-sr"><%= t("shared.outline.budget") %></h1>
<div class="row">
<div id="investment-projects" class="investment-projects-list small-12 medium-9 column">

View File

@@ -53,7 +53,7 @@
<div class="inline-block" data-toggle="info-document-number">
<span class="icon-help"></span>
<span class="sr-only"><%= t("verification.residence.new.document_number_help_title") %></span>
<span class="show-for-sr"><%= t("verification.residence.new.document_number_help_title") %></span>
</div>
<div class="dropdown-pane" id="info-document-number" data-dropdown