consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move result percentages out of the voting buttons

Browse Source 
Having buttons (previously links) with the text "I agree 75%" is
confusing; people might believe they're saying they only partially agree
with the content. Besides, the results percentages is a different piece
of information which shouldn't be related to whether one person
agrees/disagrees with the content.

This problem might be solved for people using screen readers since we
added the aria-label attribute. However, for sighted keyboard users, the
percentage was being outlined on focus as part of the button, which
might be confusing.
This commit is contained in:
Javi Martín
2022-01-13 19:50:27 +01:00
parent 8c1b4d9ea7
commit eecaf5876e
4 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/shared/in_favor_against_component.html.erb
View File

@@ -1,5 +1,5 @@
<div class="in-favor-against">
<div class="in-favor inline-block">
<div class="in-favor">
<%= button_to polymorphic_path(votable, action: :vote, value: "yes"),
class: "like #{voted_classes[:in_favor]}",
title: t("votes.agree"),
@@ -10,13 +10,13 @@
<span class="icon-like">
<span class="show-for-sr"><%= t("votes.agree") %></span>
</span>
<span class="percentage"><%= votes_percentage("likes", votable) %></span>
<% end %>
<span class="percentage"><%= votes_percentage("likes", votable) %></span>
</div>
<span class="divider"></span>
<div class="against inline-block">
<div class="against">
<%= button_to polymorphic_path(votable, action: :vote, value: "no"),
class: "unlike #{voted_classes[:against]}",
title: t("votes.disagree"),
@@ -27,7 +27,7 @@
<span class="icon-unlike">
<span class="show-for-sr"><%= t("votes.disagree") %></span>
</span>
<span class="percentage"><%= votes_percentage("dislikes", votable) %></span>
<% end %>
<span class="percentage"><%= votes_percentage("dislikes", votable) %></span>
</div>
</div>