Allow toggling the column selector with a keyboard

Using a button tag, it's possible for every user to "click" the element.
Besides, we don't need to call the `preventDefault` function, because
buttons with type "button" don't do anything by default.

app/assets/javascripts/columns_selector.js

@@ -33,8 +33,7 @@
         $("#js-columns-selector-wrapper").append(item);
       });
     },
-    toggleOptions: function(event) {
-      event.preventDefault();
+    toggleOptions: function() {
       $("#js-columns-selector").toggleClass("hollow");
       $("#js-columns-selector-wrapper").toggleClass("hidden");
     },
@@ -73,8 +72,8 @@
       App.ColumnsSelector.initChecks();
       App.ColumnsSelector.initColumns();
       $("#js-columns-selector").on({
-        click: function(event) {
-          App.ColumnsSelector.toggleOptions(event);
+        click: function() {
+          App.ColumnsSelector.toggleOptions();
         }
       });
       $(".column-selector-item input").on({

app/views/admin/shared/_columns_selector.html.erb

@@ -1,7 +1,7 @@
-<span class="button columns-selector hollow" id="js-columns-selector" data-cookie="<%= cookie %>" data-default="<%= default.join(",") %>">
+<button type="button" class="button columns-selector hollow" id="js-columns-selector" data-cookie="<%= cookie %>" data-default="<%= default.join(",") %>">
   <span class="icon-banner"> </span>
   <strong><%= t("admin.budget_investments.index.columns") %></strong>
-</span>
+</button>
 
 <div class="hidden columns-selector-wrapper" id="js-columns-selector-wrapper">
   <div class="hidden column-selector-item" id="column_selector_item_template">

spec/system/admin/budget_investments_spec.rb

@@ -1825,9 +1825,7 @@ describe "Admin budget investments", :admin do
     scenario "Use column selector to display visible columns", :js do
       visit admin_budget_budget_investments_path(budget)
 
-      within("#js-columns-selector") do
-        find("strong", text: "Columns").click
-      end
+      click_button "Columns"
 
       within("#js-columns-selector-wrapper") do
         selectable_columns.each do |column|
@@ -1857,9 +1855,7 @@ describe "Admin budget investments", :admin do
     scenario "Cookie will be updated after change columns selection", :js do
       visit admin_budget_budget_investments_path(budget)
 
-      within("#js-columns-selector") do
-        find("strong", text: "Columns").click
-      end
+      click_button "Columns"
 
       within("#js-columns-selector-wrapper") do
         uncheck "Title"
@@ -1889,7 +1885,7 @@ describe "Admin budget investments", :admin do
       investment.update!(title: "Don't display me, please!")
 
       visit admin_budget_budget_investments_path(budget)
-      within("#js-columns-selector") { find("strong", text: "Columns").click }
+      click_button "Columns"
       within("#js-columns-selector-wrapper") { uncheck "Title" }
 
       within("#budget_investment_#{investment.id}") do
@@ -1909,9 +1905,7 @@ describe "Admin budget investments", :admin do
 
       go_back
 
-      within("#js-columns-selector") do
-        find("strong", text: "Columns").click
-      end
+      click_button "Columns"
 
       within("#js-columns-selector-wrapper") do
         selectable_columns.each do |column|