From 896fee6e998670e83a97b909398c57fa077923e9 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@decabeza.es>
Date: Sat, 16 May 2020 06:07:41 +0200
Subject: [PATCH] Improve icon to remove investment from ballot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note we're absolutely positioning the link instead of the icon; that way
keyboard users will be able to focus on the icon. Until now, users would
focus on an empty link.

For the same reason, we couldn't use `click_link` with Capybara, since
it would fail to click an empty link. Now we can.

Co-authored-by: Javi Martín <javim@elretirao.net>
---
 .../budgets/ballot/investment.scss            | 27 ++++++-------------
 .../ballot/investment_component.html.erb      |  3 +--
 spec/system/budgets/ballots_spec.rb           |  8 +++---
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
index bc33064c8..3b88f5484 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -14,22 +14,15 @@
     font-style: italic;
   }
 
-  .remove-investment-project {
-    display: block;
-    height: 0;
+  .remove-budget-investment {
+    @include has-fa-icon(times, solid);
+    font-size: rem-calc(20);
+    position: absolute;
+    right: rem-calc(6);
+    top: rem-calc(6);
 
-    .icon-x {
-      color: #9f9f9f;
-      font-size: rem-calc(24);
-      line-height: $line-height / 2;
-      position: absolute;
-      right: 6px;
-      text-decoration: none;
-      top: 6px;
-
-      @include breakpoint(medium) {
-        font-size: $base-font-size;
-      }
+    &::before {
+      margin-right: 0;
     }
   }
 
@@ -43,9 +36,5 @@
       outline: 0;
       text-decoration: none;
     }
-
-    .remove-investment-project .icon-x {
-      color: #fff;
-    }
   }
 }
diff --git a/app/components/budgets/ballot/investment_component.html.erb b/app/components/budgets/ballot/investment_component.html.erb
index 95fbb7179..a35cf9f0c 100644
--- a/app/components/budgets/ballot/investment_component.html.erb
+++ b/app/components/budgets/ballot/investment_component.html.erb
@@ -5,11 +5,10 @@
   <% if budget.balloting? %>
     <%= link_to delete_path,
                 title: t("budgets.ballots.show.remove"),
-                class: "remove-investment-project",
+                class: "remove-budget-investment",
                 method: :delete,
                 remote: true do %>
       <span class="show-for-sr"><%= t("budgets.ballots.show.remove") %></span>
-      <span class="icon-x"></span>
     <% end %>
   <% end %>
 </li>
diff --git a/spec/system/budgets/ballots_spec.rb b/spec/system/budgets/ballots_spec.rb
index b762ce830..692b773ab 100644
--- a/spec/system/budgets/ballots_spec.rb
+++ b/spec/system/budgets/ballots_spec.rb
@@ -380,7 +380,7 @@ describe "Ballots" do
     expect(page).to have_content("You have voted one investment")
 
     within("#budget_investment_#{investment.id}") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
     expect(page).to have_current_path(budget_ballot_path(budget))
@@ -407,7 +407,7 @@ describe "Ballots" do
     end
 
     within("#sidebar #budget_investment_#{investment1.id}_sidebar") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
     expect(page).to have_css("#amount-spent", text: "€20,000")
@@ -437,7 +437,7 @@ describe "Ballots" do
       expect(page).to have_content("You have voted one investment")
 
       within(".ballot-list li", text: "Sully monument") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).to have_content("You have voted 0 investments")
@@ -627,7 +627,7 @@ describe "Ballots" do
       end
 
       within("#budget_investment_#{bi1.id}_sidebar") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).not_to have_css "#budget_investment_#{bi1.id}_sidebar"