Merge pull request #4348 from consul/columns_button

Allow toggling the column selector with a keyboard

app/assets/javascripts/columns_selector.js

@@ -33,10 +33,8 @@
         $("#js-columns-selector-wrapper").append(item);
       });
     },
-    toggleOptions: function(event) {
+    toggleOptions: function(button) {
-      event.preventDefault();
+      button.attr("aria-expanded", !JSON.parse(button.attr("aria-expanded")));
-      $("#js-columns-selector").toggleClass("hollow");
-      $("#js-columns-selector-wrapper").toggleClass("hidden");
     },
     hideAll: function() {
       $("[data-field]").addClass("hidden");
@@ -73,8 +71,8 @@
       App.ColumnsSelector.initChecks();
       App.ColumnsSelector.initColumns();
       $("#js-columns-selector").on({
-        click: function(event) {
+        click: function() {
-          App.ColumnsSelector.toggleOptions(event);
+          App.ColumnsSelector.toggleOptions($(this));
         }
       });
       $(".column-selector-item input").on({

app/assets/stylesheets/admin.scss

@@ -1165,6 +1165,18 @@ table {
   span[class^="icon-"] {
     vertical-align: middle;
   }
+
+  &[aria-expanded='false'] {
+    @include hollow-button;
+
+    + .columns-selector-wrapper {
+      display: none;
+    }
+  }
+
+  &[aria-expanded='true'] {
+    @include regular-button;
+  }
 }
 
 .columns-selector-wrapper {
@@ -1173,10 +1185,6 @@ table {
   border-radius: 10px;
   margin-bottom: 1rem;
 
-  &.hidden {
-    display: none;
-  }
-
   .column-selector-item {
     display: inline-block;
 

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

@@ -1,9 +1,9 @@
-<span class="button columns-selector hollow" id="js-columns-selector" data-cookie="<%= cookie %>" data-default="<%= default.join(",") %>">
+<button type="button" class="columns-selector" id="js-columns-selector" aria-expanded="false" 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="columns-selector-wrapper" id="js-columns-selector-wrapper">
   <div class="hidden column-selector-item" id="column_selector_item_template">
     <input type="checkbox" name="column-selector[template]" id="column_selector_template" data-column="template">
     <label for="column_selector_template"></label>

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
+      click_button "Columns"
-        find("strong", text: "Columns").click
-      end
 
       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
+      click_button "Columns"
-        find("strong", text: "Columns").click
-      end
 
       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
+      click_button "Columns"
-        find("strong", text: "Columns").click
-      end
 
       within("#js-columns-selector-wrapper") do
         selectable_columns.each do |column|