From 8a9d57e4c8189d01741c6682e9293da16e2d1b0b Mon Sep 17 00:00:00 2001
From: Bruno Prieto <bruno@37signals.com>
Date: Thu, 13 Mar 2025 21:53:53 +0100
Subject: [PATCH] Show filter inputs for screen readers

---
 app/views/filters/_dialog.html.erb | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb
index 73e764c79..84c18eaff 100644
--- a/app/views/filters/_dialog.html.erb
+++ b/app/views/filters/_dialog.html.erb
@@ -41,7 +41,7 @@
           <li class="filter__label"><strong>Sort by</strong></li>
           <li>
             <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %>
-              <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, hidden: true %>
+              <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, class: "for-screen-reader" %>
               <span>Most active</span>
               <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
             <% end %>
@@ -50,7 +50,7 @@
           <% Filter::INDEXES.each do |index| %>
             <li>
               <%= label_tag "indexed_by_#{index}", class: "btn filter__button" do %>
-                <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, hidden: true %>
+                <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, class: "for-screen-reader" %>
                 <span><%= index.humanize %></span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -69,7 +69,7 @@
           <% Current.user.buckets.order(:name).each do |bucket| %>
             <li>
               <%= label_tag "bucket_ids_#{bucket.id}", class: "btn filter__button" do %>
-                <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", hidden: true %>
+                <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", class: "for-screen-reader" %>
                 <span><%= bucket.name %></span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -82,7 +82,7 @@
           <% Current.account.tags.order(:title).each do |tag| %>
             <li>
               <%= label_tag "tag_ids_#{tag.id}", class: "btn filter__button" do %>
-                <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", hidden: true %>
+                <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", class: "for-screen-reader" %>
                 <span><%= tag.hashtag %></span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -95,7 +95,7 @@
           <li>
             <%= label_tag "assignment_status_unassigned", class: "btn filter__button" do %>
               <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?, id: "assignment_status_unassigned",
-                hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %>
+                class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %>
                 <span>No one</span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -103,7 +103,7 @@
           <li>
             <%= label_tag "assignee_ids_me", class: "btn filter__button" do %>
               <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user), id: "assignee_ids_me",
-                hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
+                class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
                 <span>Me</span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -112,7 +112,7 @@
             <li>
               <%= label_tag "assignee_ids_#{user.id}", user.name, class: "btn filter__button" do %>
                 <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), id: "assignee_ids_#{user.id}",
-                  hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
+                  class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %>
                   <span><%= user.name %></span>
                   <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
                 <% end %>
@@ -125,7 +125,7 @@
           <li>
             <%= label_tag "creator_ids_me", class: "btn filter__button" do %>
               <%= check_box_tag "creator_ids[]", Current.user.id, filter.creators.include?(Current.user), id: "creator_ids_me",
-                hidden: true %>
+                class: "for-screen-reader" %>
                 <span>Me</span>
                 <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
               <% end %>
@@ -134,7 +134,7 @@
             <li>
               <%= label_tag "creator_ids_#{user.id}", class: "btn filter__button" do %>
                 <%= check_box_tag "creator_ids[]", user.id, filter.creators.include?(user), id: "creator_ids_#{user.id}",
-                  hidden: true %>
+                  class: "for-screen-reader" %>
                   <span><%= user.name %></span>
                   <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
                 <% end %>
@@ -150,7 +150,7 @@
             <% workflow.stages.order(:name).each do |stage| %>
               <li>
                 <%= label_tag "stage_ids_#{stage.id}", class: "btn filter__button" do %>
-                  <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", hidden: true %>
+                  <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", class: "for-screen-reader" %>
                   <span><%= stage.name %></span>
                   <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %>
                 <% end %>