From e4f8f702c72fd2dbc09267a9d722f549bfae6465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 28 Jun 2021 04:26:51 +0200
Subject: [PATCH] Use a submit button in admin poll question filters

As mentioned in commit 5214d89c8, using a `<select>` tag which
automatically submits a form on change has a few accessibility issues,
particularly for keyboard users who might accidentally submit the form
while browsing the options.

So we're adding a submit button and removing the "submit on change"
behavior.

Note that, while `<select>` tags have their own usability issues,
alternatives in this case are not obvious because the number of existing
polls could be very low (zero, for instance) or very high (dozens, if
the application has been used for years).

I thought of using a `<datalist>` tag with a regular text input. The
problem here is we don't want to send the name of the poll to the server
(as we would with a `<datalist>` tag); we want to send the ID of the
poll.

Maybe we could add an automplete field instead, providing a similar
funcionality. However, for now we're keeping it simple. This poll
questions page isn't even accessible through the admin menu since commit
83e8d603, so right now anything we change here will be pretty much
useless.
---
 .../stylesheets/admin/poll/questions/filter.scss | 16 ++++++++++++++++
 .../poll/questions/filter_component.html.erb     | 12 ++++++------
 .../admin/poll/questions/filter_component.rb     |  5 +----
 .../admin/poll/questions/_questions.html.erb     |  4 +---
 .../poll/questions/filter_component_spec.rb      |  9 +++++++++
 5 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/poll/questions/filter.scss
 create mode 100644 spec/components/admin/poll/questions/filter_component_spec.rb

diff --git a/app/assets/stylesheets/admin/poll/questions/filter.scss b/app/assets/stylesheets/admin/poll/questions/filter.scss
new file mode 100644
index 000000000..78cb4fb4f
--- /dev/null
+++ b/app/assets/stylesheets/admin/poll/questions/filter.scss
@@ -0,0 +1,16 @@
+.admin .poll-questions-filter {
+  $gap: 0.5em;
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$gap;
+
+  > * {
+    margin-left: $gap;
+  }
+
+  [type="submit"] {
+    @include regular-button;
+    margin-left: $gap;
+  }
+}
diff --git a/app/components/admin/poll/questions/filter_component.html.erb b/app/components/admin/poll/questions/filter_component.html.erb
index b1e988d8d..ee1f443ff 100644
--- a/app/components/admin/poll/questions/filter_component.html.erb
+++ b/app/components/admin/poll/questions/filter_component.html.erb
@@ -1,7 +1,7 @@
-<%= form_tag "", method: :get do %>
-  <%= label_tag :poll_id, t("admin.questions.index.filter_poll") %>
-  <%= select_tag "poll_id",
-                 poll_select_options,
-                 prompt: t("polls.all"),
-                 class: "js-location-changer" %>
+<%= form_tag "", method: :get, class: "poll-questions-filter" do %>
+  <div class="filter">
+    <%= label_tag :poll_id, t("admin.questions.index.filter_poll") %>
+    <%= select_tag "poll_id", poll_select_options, prompt: t("polls.all") %>
+  </div>
+  <%= submit_tag t("shared.filter") %>
 <% end %>
diff --git a/app/components/admin/poll/questions/filter_component.rb b/app/components/admin/poll/questions/filter_component.rb
index 881a8383b..b8b7d7412 100644
--- a/app/components/admin/poll/questions/filter_component.rb
+++ b/app/components/admin/poll/questions/filter_component.rb
@@ -9,9 +9,6 @@ class Admin::Poll::Questions::FilterComponent < ApplicationComponent
   private
 
     def poll_select_options
-      options = polls.map do |poll|
-        [poll.name, current_path_with_query_params(poll_id: poll.id)]
-      end
-      options_for_select(options, request.fullpath)
+      options_from_collection_for_select(polls, :id, :name, params[:poll_id])
     end
 end
diff --git a/app/views/admin/poll/questions/_questions.html.erb b/app/views/admin/poll/questions/_questions.html.erb
index 4550796d5..e8ce0402e 100644
--- a/app/views/admin/poll/questions/_questions.html.erb
+++ b/app/views/admin/poll/questions/_questions.html.erb
@@ -1,6 +1,4 @@
-<div class="small-12 medium-4 large-3">
-  <%= render Admin::Poll::Questions::FilterComponent.new(@polls) %>
-</div>
+<%= render Admin::Poll::Questions::FilterComponent.new(@polls) %>
 
 <% if @questions.count == 0 %>
   <div class="callout primary margin-top">
diff --git a/spec/components/admin/poll/questions/filter_component_spec.rb b/spec/components/admin/poll/questions/filter_component_spec.rb
new file mode 100644
index 000000000..8861ad354
--- /dev/null
+++ b/spec/components/admin/poll/questions/filter_component_spec.rb
@@ -0,0 +1,9 @@
+require "rails_helper"
+
+describe Admin::Poll::Questions::FilterComponent, type: :component do
+  it "renders a button to submit the form" do
+    render_inline Admin::Poll::Questions::FilterComponent.new([])
+
+    expect(page).to have_button "Filter"
+  end
+end