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

@@ -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

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 %>

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")

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")