fix: accessibility errors reported by IBM Equal Access Accessibility Checker (#64)

* Fix accessibility errors reported by IBM Equal Access Accessibility Checker

* Update ruby version, rebundle

---------

Co-authored-by: Michael Roudnitski <mroudnitski@ibm.com>

Author: babadanial

.github/workflows/rspec-tests.yml

@@ -22,7 +22,6 @@ jobs:
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: 3.2
         bundler-cache: true
     - name: Setup Database
       env:

.tool-versions

@@ -1 +1 @@
-ruby 3.3.6
+ruby 3.4.2

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sn_filterable (3.0.0)
+    sn_filterable (3.1.0)
       heroicon (~> 1)
       kaminari (~> 1)
       tailwindcss-rails (~> 3)

app/components/sn_filterable/category_component.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag :fieldset,
                 class: "w-full text-xs lg:text-sm app-word-break dark:bg-gray-800",
                 "x-data": { open: @open }.to_json do %>
+  <legend><%= @title %></legend>
   <button class="flex border-b dark:border-gray-700 justify-between w-full px-4 py-3 font-medium text-left text-gray-900 dark:text-white transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 focus-visible:ring-opacity-75"
           type="button"
           @click="open = !open">

app/components/sn_filterable/chips_component.html.erb

@@ -20,6 +20,7 @@
                               "@click": "$event.preventDefault(); onClick()" do %>
                 <span class="sr-only">Remove filter for Objects</span>
                 <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                  <title>Remove filter for Objects</title>
                   <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                 </svg>
               <% end %>

app/components/sn_filterable/filter_category_component.html.erb

@@ -1,11 +1,5 @@
 <% @filter[:filters].each_with_index do |sub_filter, index| %>
   <div class="relative flex items-start px-4 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-    <div class="min-w-0 flex-1 flex-grow">
-      <%= content_tag :label,
-                      sub_filter[:name],
-                      class: "block py-2 pr-4 text-gray-600 dark:text-gray-400 select-none w-full cursor-pointer",
-                      for: "filter-#{@filter[:filter_name]}-#{index}" %>
-    </div>
     <div class="my-2 flex items-center">
       <% if @filter[:multi] %>
         <%= content_tag :input, "",
@@ -31,5 +25,11 @@
         %>
       <% end %>
     </div>
+    <div class="min-w-0 flex-1 flex-grow">
+      <%= content_tag :label,
+                      sub_filter[:name],
+                      class: "block py-2 pr-4 text-gray-600 dark:text-gray-400 select-none w-full cursor-pointer",
+                      for: "filter-#{@filter[:filter_name]}-#{index}" %>
+    </div>
   </div>
 <% end %>

app/components/sn_filterable/main_component.html.erb

@@ -34,7 +34,7 @@
                 <%= heroicon "x-mark", variant: :outline, options: { class: "h-6 w-6 text-grey-500 dark:text-gray-400" } %>
               </button>
             </div>
-            <div name="Filter Options" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" class="overflow-y-auto max-h-full">
+            <div name="Filter Options" role="menu" aria-orientation="vertical" aria-label="options-menu" class="overflow-y-auto max-h-full">
               <% @filters.each do |filter| %>
                 <%= render SnFilterable::CategoryComponent.new(title: filter[:title], open: @filtered.queries.dig("filter", filter.try(:[], :filter_name)).present?) do |c| %>
                   <% c.with_filter(filtered: @filtered, filter: filter) %>