From 891333abed793bb4dd29746a38af8a6b407899f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 11 Oct 2024 04:21:02 +0200
Subject: [PATCH] Use a button to hide recommendations

As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.

Since we're adding styles for this button, we're also adding the
`font-size` property instead of using the `small` class. We'll deal with
the `float-right` property in the next commit.
---
 app/assets/stylesheets/layout.scss           |  8 ++++++++
 app/views/shared/_recommended_index.html.erb | 14 +++++++-------
 spec/system/debates_spec.rb                  |  2 +-
 spec/system/proposals_spec.rb                |  2 +-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 54e808c50..f3c966934 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1943,10 +1943,18 @@ table {
 
 .hide-recommendations {
   color: $text-light;
+  cursor: pointer;
+  font-size: $small-font-size;
+  line-height: inherit;
   position: absolute;
   right: 12px;
   top: -18px;
   z-index: 2;
+
+  &:focus,
+  &:hover {
+    @include anchor-color-hover;
+  }
 }
 
 // 20. Documents
diff --git a/app/views/shared/_recommended_index.html.erb b/app/views/shared/_recommended_index.html.erb
index 4447a9ae4..bf7bf13eb 100644
--- a/app/views/shared/_recommended_index.html.erb
+++ b/app/views/shared/_recommended_index.html.erb
@@ -5,13 +5,13 @@
     </div>
 
     <div id="recommendations" data-toggler=".hide">
-      <%= link_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
-                                                class: "float-right-medium small hide-recommendations",
-                                                data: {
-                                                  toggle: "recommendations",
-                                                  confirm: t("#{namespace}.index.recommendations.disable")
-                                                },
-                                                method: :put do %>
+      <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
+                                                  class: "float-right-medium hide-recommendations",
+                                                  data: {
+                                                    toggle: "recommendations",
+                                                    confirm: t("#{namespace}.index.recommendations.disable")
+                                                  },
+                                                  method: :put do %>
         <span class="icon-x"></span>
         <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
       <% end %>
diff --git a/spec/system/debates_spec.rb b/spec/system/debates_spec.rb
index 68d5de88c..ff1b499d5 100644
--- a/spec/system/debates_spec.rb
+++ b/spec/system/debates_spec.rb
@@ -521,7 +521,7 @@ describe "Debates" do
           expect(page).to have_content("Medium")
           expect(page).to have_css(".recommendation", count: 3)
 
-          accept_confirm { click_link "Hide recommendations" }
+          accept_confirm { click_button "Hide recommendations" }
         end
 
         expect(page).not_to have_link("recommendations")
diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb
index 459f7c619..4ea70abe0 100644
--- a/spec/system/proposals_spec.rb
+++ b/spec/system/proposals_spec.rb
@@ -937,7 +937,7 @@ describe "Proposals" do
           expect(page).to have_content("Medium")
           expect(page).to have_css(".recommendation", count: 3)
 
-          accept_confirm { click_link "Hide recommendations" }
+          accept_confirm { click_button "Hide recommendations" }
         end
 
         expect(page).not_to have_link("recommendations")