Add additional accessible text to linked faceted searches

This updates the LinkToFacet rendering step to add an additional
visually hidden element when creating a link to a faceted search
that indicates the facet that will be used in the search.

This helps give additional context to screen reader users when
link_to_facet is used, especially when the page may include
links that go to searches for the same value in different fields.

Fixes #3427

Author: thatbudakguy

app/presenters/blacklight/rendering/link_to_facet.rb

@@ -23,13 +23,21 @@ def link_field
       end
 
       def link(field, v)
-        context.link_to v, search_path(field, v)
+        context.link_to search_path(field, v) do
+          context.tag.span(v) +
+            context.tag.span(search_description, class: 'visually-hidden')
+        end
       end
 
       def search_path(field, v)
         context.search_action_path(facet_params(field, v))
       end
 
+      # Accessible description for the link, indicating it will do a faceted search
+      def search_description
+        context.t 'blacklight.search.facets.faceted_search', field_label: config.display_label
+      end
+
       def facet_params(field, item)
         context.search_state.reset.filter(field).add(item).params
       end

config/locales/blacklight.ar.yml

@@ -98,6 +98,7 @@ ar:
         all: الكل
         clear: إزالة معايير البحث
         count: "%{number}"
+        faceted_search: بحث %{field_label}
         group:
           close: إخفاء الأوجه
           open: عرض الأوجه

config/locales/blacklight.de.yml

@@ -88,6 +88,7 @@ de:
         all: Alle
         clear: Löschen
         count: "%{number}"
+        faceted_search: "%{field_label} Suche"
         group:
           close: Facetten ausblenden
           open: Facetten zeigen

config/locales/blacklight.en.yml

@@ -124,6 +124,7 @@ en:
           label: "Filter %{field_label}"
           placeholder: Filter...
         title: Limit your search
+        faceted_search: "%{field_label} search"
       filters:
         label: "%{label}:"
         remove:

config/locales/blacklight.es.yml

@@ -88,6 +88,7 @@ es:
         all: Todos
         clear: Borrar
         count: "%{number}"
+        faceted_search: Búsqueda %{field_label}
         group:
           close: Ocultar facetas
           open: Mostrar facetas

config/locales/blacklight.fr.yml

@@ -88,6 +88,7 @@ fr:
         all: Tout
         clear: Effacer
         count: "%{number}"
+        faceted_search: Recherche %{field_label}
         group:
           close: Masquer les facettes
           open: Afficher les facettes

config/locales/blacklight.hu.yml

@@ -86,6 +86,7 @@ hu:
         all: Minden
         clear: Szűrőfeltétel eltávolítása
         count: "%{number}"
+        faceted_search: "%{field_label} keresés"
         group:
           close: Fazetek elrejtése
           open: Szempontok megjelenítése

config/locales/blacklight.it.yml

@@ -88,6 +88,7 @@ it:
         all: Ogni
         clear: Cancella
         count: "%{number}"
+        faceted_search: "%{field_label} ricerca"
         group:
           close: Nascondi sfaccettature
           open: Mostra sfaccettature

config/locales/blacklight.nl.yml

@@ -86,6 +86,7 @@ nl:
         all: Al
         clear: Filters legen
         count: "%{number}"
+        faceted_search: "%{field_label} zoeken"
         group:
           close: Verberg facetten
           open: Toon facetten

config/locales/blacklight.pt-BR.yml

@@ -86,6 +86,7 @@ pt-BR:
         all: Todo
         clear: Limpar
         count: "%{number}"
+        faceted_search: Pesquisa %{field_label}
         group:
           close: Ocultar facetas
           open: Mostrar facetas

config/locales/blacklight.sq.yml

@@ -86,6 +86,7 @@ sq:
         all: Gjithë
         clear: Fshij filterin
         count: "%{number}"
+        faceted_search: "%{field_label} kërkim"
         group:
           close: Fshih aspektet
           open: Trego aspektet

config/locales/blacklight.zh.yml

@@ -86,6 +86,7 @@ zh:
         all: 皆
         clear: 清除搜索条件
         count: "%{number}"
+        faceted_search: "%{field_label} 搜索"
         group:
           close: 隐藏方面
           open: 显示方面

spec/presenters/blacklight/field_presenter_spec.rb

@@ -83,7 +83,7 @@ def render
     context 'when field has link_to_facet with true' do
       before do
         allow(request_context).to receive(:search_action_path).with({ 'f' => { 'link_to_facet_true' => ['x'] } }).and_return('/foo')
-        allow(request_context).to receive(:link_to).with("x", '/foo').and_return('bar')
+        allow(request_context).to receive(:link_to).with('/foo').and_return('bar')
       end
 
       let(:field_name) { 'link_to_facet_true' }
@@ -94,7 +94,7 @@ def render
     context 'when field has link_to_facet with a field name' do
       before do
         allow(request_context).to receive(:search_action_path).with({ 'f' => { 'some_field' => ['x'] } }).and_return('/foo')
-        allow(request_context).to receive(:link_to).with("x", '/foo').and_return('bar')
+        allow(request_context).to receive(:link_to).with('/foo').and_return('bar')
       end
 
       let(:field_name) { 'link_to_facet_named' }

spec/presenters/blacklight/rendering/link_to_facet_spec.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+RSpec.describe Blacklight::Rendering::LinkToFacet do
+  include Capybara::RSpecMatchers
+  include Rails.application.routes.url_helpers
+
+  let(:field_config) { Blacklight::Configuration::Field.new(link_to_facet: true, key: 'key', label: 'label') }
+  let(:document) { instance_double(SolrDocument) }
+  let(:query_params) { { controller: 'catalog', action: 'show' } }
+  let(:config) { Blacklight::Configuration.new }
+  let(:search_state) { Blacklight::SearchState.new(query_params, config) }
+  let(:context) { double(search_state: search_state) }
+  let(:pipeline) { Blacklight::Rendering::Pipeline.new(values, field_config, document, context, [described_class], {}) }
+
+  before do
+    allow(context).to receive_messages(
+      search_action_path: double,
+      link_to: double,
+      tag: double(span: nil),
+      t: 'label search'
+    )
+  end
+
+  describe '#render' do
+    let(:values) { %w[a] }
+
+    before { pipeline.render }
+
+    it 'renders the value' do
+      expect(context.tag).to have_received(:span).with('a')
+    end
+
+    it 'renders the accessible description' do
+      expect(context.tag).to have_received(:span).with('label search', class: 'visually-hidden')
+    end
+  end
+end