Fix WAVE-flagged accessibility issues in Advanced Search page. Fixes …

…TD-1395, TD-1396, TD-1397, TD-1400, TD-1401. - Updates the advanced_search_component template w/latest BL8 changes, plus TRLN mods - Removes noscript wrap added in #384 - hack no longer needed for Edit Search duplication. Fixes TD-1400. - Removes the skip link to the mast search, that we remove on Advanced. Fixes TD-1396. - Fix erroneous form label for Publication Year range. Fixes TD-1401. - Fix aria label for the sort results select. Fixes TD-1397. - Fix aria labels for all/any selector. Fixes TD-1395.
trln · Dec 12, 2024 · cc878df · cc878df
1 parent 736bbd1
commit cc878df
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 37 deletions.
diff --git a/app/assets/javascripts/trln_argon/advanced_search_scope.js b/app/assets/javascripts/trln_argon/advanced_search_scope.js
@@ -1,13 +1,16 @@
 Blacklight.onLoad(function() {
   $(window).on('load', function(){
 
-    //remove default mast search to fix duplicate IDs
+    // remove default mast search to fix duplicate IDs
     $(".blacklight-catalog-advanced_search #search-navbar").remove();
     $(".blacklight-trln-advanced_search #search-navbar").remove();
-
+
+    // remove the skip link that leads to that mast search field
+    $("#skip-link a[href='#search_field']").remove();
+
     // change adv search scope
   	$(".blacklight-trln-advanced_search").length > 0 ? $('#option_trln').attr('checked',true) : $('#option_catalog').attr('checked',true);
-  	
+
   	$("input[type='radio'][name='option']").change(function() {
         var action = $(this).val();
         $(".advanced").attr("action", "/" + action);

diff --git a/app/assets/stylesheets/trln_argon/blacklight_advanced_search.scss b/app/assets/stylesheets/trln_argon/blacklight_advanced_search.scss
@@ -53,8 +53,6 @@ h2.query-criteria-heading label {
 }
 
 .sorting {
-  display: inline-flex;
-
   label {
     margin-right: 8px;
     font-weight: 700;

diff --git a/app/components/trln_argon/advanced_search_form_component.html.erb b/app/components/trln_argon/advanced_search_form_component.html.erb
@@ -1,61 +1,73 @@
+<%# Replicates upstream BL template, with TRLN modifications; see: -%>
+<%# https://github.com/projectblacklight/blacklight/blob/release-8.x/app/components/blacklight/advanced_search_form_component.html.erb -%>
+
+<% if constraints? %>
+  <%# TRLN CUSTOMIZATION: fix up heading order for a11y %>
+  <div class="constraints search_history">
+    <h2 class="h4"><%= t 'blacklight.advanced_search.form.search_context' %></h2>
+    <% constraints.each do |constraint| %>
+      <%= constraint %>
+    <% end %>
+  </div>
+<% end %>
+
 <%= form_tag @url, method: @method, class: @classes.join(' '), role: 'search', 'aria-label' => t('blacklight.search.form.submit') do %>
-  <!-- follows the default implementation, but this leads to duplication
-       of parameters after 'edit search' is used,  as chosen is doing 
-       its own thing -->
-  <noscript>
-  <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
-  </noscript>
-    <div class="input-criteria">
-
-      <div class="query-criteria" role="radiogroup" aria-labelledby="show-results-from-header"> 
+  <%= render Blacklight::HiddenSearchStateComponent.new(params: hidden_search_state_params) %>
+
+  <div class="input-criteria">
+    <%# TRLN CUSTOMIZATION: toggle TRLN vs. local scope -%>
+    <div class="query-criteria mb-4" role="radiogroup" aria-labelledby="show-results-from-header">
         <h2 class="query-criteria-heading" id="show-results-from-header"><%= "#{t("blacklight_advanced_search.form.show_results_from")}" %></h2>
         <span class="option-wrapper">
           <%= radio_button_tag :option, "catalog" %> <%= label_tag 'option_catalog', "#{t("trln_argon.local_filter.searching_local", local_institution_name: t("trln_argon.institution.#{TrlnArgon::Engine.configuration.local_institution_code}.long_name"))}" %> &emsp;
         </span>
         <span class="option-wrapper">
           <%= radio_button_tag  :option, "trln" %> <%= label_tag 'option_trln', "#{t("trln_argon.local_filter.searching_trln")}" %>
         </span>
-      </div>
+    </div>
 
-      <div class="query-criteria">
-        <h2 class="query-criteria-heading">
-          <%= t('blacklight_advanced_search.form.query_criteria_heading_html', :select_menu =>  default_operator_menu ) %> 
-        </h2>
+    <div class="query-criteria mb-4">
+      <h2 class="query-criteria-heading mb-4">
+        <%= t('blacklight.advanced_search.form.query_criteria_heading_html', select_menu: default_operator_menu) %>
+      </h2>
 
-        <div id="advanced_search">
-          <% search_field_controls.each do |control| %>
-            <%= control %>
-          <% end %>
-        </div>
+      <div id="advanced_search">
+        <% search_field_controls.each do |control| %>
+          <%= control %>
+        <% end %>
       </div>
+    </div>
 
-      <div class="limit-criteria">
-        <h2 class="limit-criteria-heading"><%= t('blacklight_advanced_search.form.limit_criteria_heading_html')%></h2>
+    <% if search_filter_controls? %>
+      <div class="limit-criteria mb-4">
+        <h2 class="limit-criteria-heading h3"><%= t('blacklight.advanced_search.form.limit_criteria_heading_html')%></h2>
 
-        <div id="advanced_search_facets" class="limit_input">
-          <div class="limit-criteria mb-4">
+        <div id="advanced_search_facets" class="limit_input row">
+          <%# TRLN: removed column offset %>
+          <div class="advanced-facet-limits">
             <% search_filter_controls.each do |control| %>
               <%= control %>
             <% end %>
           </div>
         </div>
       </div>
+    <% end %>
   </div>
 
-  <hr>
+  <hr/>
 
+  <%# TRLN: fixed up the layout here %>
   <% if sort_fields_select %>
     <div class="row mb-4">
-      <div class="col-md-6 col-sm-6 col-xs-6 sorting" style="display: inline-flex">
-        <%= content_tag :label, t('blacklight.advanced_search.form.sort_label'), for: 'sort', class: 'col-form-label' %>
+      <div class="col-sm-6 d-inline-flex sorting">
+        <%= content_tag :label, t('blacklight.advanced_search.form.sort_label'), for: 'sort', id: 'advanced-search-sort-label', class: 'col-form-label' %>
         <%= sort_fields_select %>
       </div>
-      <div class="submit-buttons col-md-5 col-sm-6 col-xs-6 offset-md-1">
+      <div class="submit-buttons col-sm-6">
         <%= link_to t('blacklight.advanced_search.form.start_over_html'), advanced_search_catalog_path,
                     class: 'btn btn-outline-secondary advanced-search-start-over' %>
         <%= submit_tag t('blacklight.advanced_search.form.search_btn_html'), class: 'btn btn-primary advanced-search-submit', id: "advanced-search-submit" %>
       </div>
     </div>
   <% end %>
-
 <% end %>
diff --git a/app/components/trln_argon/advanced_search_range_limit_component.html.erb b/app/components/trln_argon/advanced_search_range_limit_component.html.erb
@@ -1,12 +1,11 @@
 <!-- Fetch and display publication year range input if configured. -->
 <div class="mb-3 row advanced-search-facet">
-  <%= label_tag @facet_field.label.parameterize,
-    class: "col-12 col-sm-6 col-md-3 col-form-label fw-bold" do %>
+  <div class="col-sm-6 col-md-3 col-form-label fw-bold">
     <%= @facet_field.label %>
-  <% end %>
+  </div>
   <div class="col-12 col-sm-6 col-md-9 range_limit">
     <label for="range_publication_year_isort_begin" class="visually-hidden">Publication date range (starting year)</label>
-    <%= render_range_input(@facet_field.key, :begin) %> – 
+    <%= render_range_input(@facet_field.key, :begin) %> –
     <label for="range_publication_year_isort_end" class="visually-hidden">Publication date range (ending year)</label>
     <%= render_range_input(@facet_field.key, :end) %>
   </div>