Fix a11y issues for facet icons and OpenIndexMaps previews (#344)

* Fix a11y issues for facet icons and OpenIndexMaps previews

* Add a11y labeling for OpenIndexMaps popup links

* Narrow OpenIndexMaps a11y fix to popup runtime patch

* Use aria-label for selected facet remove links

* Demote advanced search constraint label from heading

* Fix standardrb issues Codex missed again

Author: srappel

app/assets/javascripts/geoblacklight.js

@@ -18,6 +18,7 @@
 //= require ./uwm/modules/results
 //= require geoblacklight/modules/svg_tooltips
 //= require geoblacklight/modules/util
+//= require ./geoblacklight/modules/util_a11y_patch
 
 //= require geoblacklight/downloaders
 //= require leaflet-iiif

app/assets/javascripts/geoblacklight/modules/util_a11y_patch.js

@@ -0,0 +1,39 @@
+/*global GeoBlacklight */
+
+(function() {
+  if (!GeoBlacklight || !GeoBlacklight.Util || !GeoBlacklight.Util.indexMapTemplate) {
+    return;
+  }
+
+  function websiteLinkLabel(data) {
+    if (data && data.title) return "Open website for " + data.title;
+    if (data && data.label) return "Open website for " + data.label;
+    return "Open website";
+  }
+
+  function addIndexMapImageAccessibility(html, data) {
+    var container = document.createElement("div");
+    container.innerHTML = html;
+
+    Array.prototype.forEach.call(container.querySelectorAll(".index-map-info img"), function(image) {
+      image.setAttribute("alt", "");
+
+      var link = image.closest("a");
+      if (!link) return;
+
+      if (!link.getAttribute("aria-label")) {
+        link.setAttribute("aria-label", websiteLinkLabel(data));
+      }
+    });
+
+    return container.innerHTML;
+  }
+
+  var originalIndexMapTemplate = GeoBlacklight.Util.indexMapTemplate;
+
+  GeoBlacklight.Util.indexMapTemplate = function(data, cb) {
+    return originalIndexMapTemplate.call(this, data, function(html) {
+      cb(addIndexMapImageAccessibility(html, data));
+    });
+  };
+}());

app/assets/stylesheets/modules/_accordions.scss

@@ -2,6 +2,7 @@
   text-rendering: auto;
   font: var(--fa-font-solid);
   -webkit-font-smoothing: antialiased;
+  color: currentColor;
   font-size: 1rem;
   line-height: 1;
   position: absolute;
@@ -17,4 +18,4 @@
   transform: none;
   transition: none;
   content: "\F0FE";
-}
+}

app/assets/stylesheets/uwm.scss

@@ -87,6 +87,10 @@
   color: $black !important;
 }
 
+.facet-values .remove-icon {
+  color: $black !important;
+}
+
 // Results pagniation contrast fix for active page
 
 .pagination .page-item.active .page-link {

app/components/blacklight/facet_field_inclusive_constraint_component.html.erb

@@ -0,0 +1,6 @@
+<div class="inclusive_or card card-body bg-light mb-3">
+  <p class="mb-2 fw-bold"><%= t('blacklight.advanced_search.any_of') %></p>
+  <ul class="list-unstyled facet-values">
+    <%= helpers.render(Blacklight::FacetItemComponent.with_collection(presenters.to_a)) %>
+  </ul>
+</div>

config/initializers/blacklight_facet_item_component_patch.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+Rails.application.config.to_prepare do
+  Blacklight::FacetItemComponent.class_eval do
+    def render_selected_facet_value
+      tag.span(class: "facet-label") do
+        tag.span(label, class: "selected") +
+          link_to(
+            href,
+            class: "remove",
+            rel: "nofollow",
+            aria: {label: helpers.t(:"blacklight.search.facets.selected.remove")}
+          ) do
+            tag.span("✖", class: "remove-icon", aria: {hidden: true})
+          end
+      end + render_facet_count(classes: ["selected"])
+    end
+  end
+end