From eecaf5876e5e6b10ca2313bb47ce9cceeb25e385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 13 Jan 2022 19:50:27 +0100
Subject: [PATCH] Move result percentages out of the voting buttons

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.
---
 app/assets/stylesheets/in_favor_against.scss  | 33 +++++++++++--------
 .../in_favor_against_component.html.erb       |  8 ++---
 .../debates/votes_component_spec.rb           | 14 ++++++++
 .../proposals/votes_component_spec.rb         | 14 ++++++++
 4 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss
index 1fb29b0a4..dc8d60127 100644
--- a/app/assets/stylesheets/in_favor_against.scss
+++ b/app/assets/stylesheets/in_favor_against.scss
@@ -1,5 +1,11 @@
 .in-favor-against {
-  display: inline-block;
+
+  &,
+  .in-favor,
+  .against,
+  form {
+    display: inline-block;
+  }
 
   .icon-like,
   .icon-unlike {
@@ -41,23 +47,22 @@
 
   .like,
   .unlike {
-    line-height: rem-calc(48);
     vertical-align: super;
     text-decoration: none;
+  }
 
-    .percentage {
-      color: $text;
-      display: inline-block;
-      font-size: $small-font-size;
-      line-height: $line-height * 2;
-      padding-right: $line-height / 2;
-      vertical-align: top;
+  .percentage {
+    color: $text;
+    display: inline-block;
+    font-size: $small-font-size;
+    line-height: $line-height * 2;
+    padding-right: $line-height / 2;
+    vertical-align: top;
 
-      @include breakpoint(medium) {
-        display: block;
-        line-height: $line-height;
-        padding-right: 0;
-      }
+    @include breakpoint(medium) {
+      display: block;
+      line-height: $line-height;
+      padding-right: 0;
     }
   }
 
diff --git a/app/components/shared/in_favor_against_component.html.erb b/app/components/shared/in_favor_against_component.html.erb
index 87c3bc381..9742fe918 100644
--- a/app/components/shared/in_favor_against_component.html.erb
+++ b/app/components/shared/in_favor_against_component.html.erb
@@ -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>
diff --git a/spec/components/debates/votes_component_spec.rb b/spec/components/debates/votes_component_spec.rb
index 1eac4c86d..f21ef797d 100644
--- a/spec/components/debates/votes_component_spec.rb
+++ b/spec/components/debates/votes_component_spec.rb
@@ -25,5 +25,19 @@ describe Debates::VotesComponent do
       expect(page).to have_button "I don't agree with What about the 2030 agenda?"
       expect(page).not_to have_content "You must sign in or sign up to continue."
     end
+
+    it "does not include result percentages" do
+      create(:vote, votable: debate)
+      sign_in(create(:user))
+
+      render_inline component
+
+      expect(page).to have_button count: 2
+      expect(page).to have_button "I agree"
+      expect(page).to have_button "I disagree"
+      expect(page).not_to have_button text: "%"
+      expect(page).not_to have_button text: "100"
+      expect(page).not_to have_button text: "0"
+    end
   end
 end
diff --git a/spec/components/legislation/proposals/votes_component_spec.rb b/spec/components/legislation/proposals/votes_component_spec.rb
index b4131c52e..b832fc51f 100644
--- a/spec/components/legislation/proposals/votes_component_spec.rb
+++ b/spec/components/legislation/proposals/votes_component_spec.rb
@@ -38,5 +38,19 @@ describe Legislation::Proposals::VotesComponent do
       expect(page).to have_button "I don't agree with Require wearing masks at home"
       expect(page).not_to have_content "You must sign in or sign up to continue."
     end
+
+    it "does not include result percentages" do
+      create(:vote, votable: proposal)
+      sign_in(create(:user))
+
+      render_inline component
+
+      expect(page).to have_button count: 2
+      expect(page).to have_button "I agree"
+      expect(page).to have_button "I disagree"
+      expect(page).not_to have_button text: "%"
+      expect(page).not_to have_button text: "100"
+      expect(page).not_to have_button text: "0"
+    end
   end
 end