Use aria-expanded on column selector toggle button

This way screen reader users will be informed about what happens when
the button is clicked. We also simplify the HTML/JavaScript a little
bit.

app/assets/javascripts/columns_selector.js

@@ -33,9 +33,8 @@
         $("#js-columns-selector-wrapper").append(item);
       });
     },
-    toggleOptions: function() {
+    toggleOptions: function(button) {
-      $("#js-columns-selector").toggleClass("hollow");
+      button.attr("aria-expanded", !JSON.parse(button.attr("aria-expanded")));
-      $("#js-columns-selector-wrapper").toggleClass("hidden");
     },
     hideAll: function() {
       $("[data-field]").addClass("hidden");
@@ -73,7 +72,7 @@
       App.ColumnsSelector.initColumns();
       $("#js-columns-selector").on({
         click: function() {
-          App.ColumnsSelector.toggleOptions();
+          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 @@
-<button type="button" 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>
 </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>