project-blacklight_thumbnail-alt-tag_to-title.md

Add alt-tag to the thumbnails on the search results page

Project Blacklight v6.1

The actual issue:

Fix accessibility issues on search results

Issue #348

As a visually disabled researcher, I depend on a screen reader to relay the content of an image.

In order to meet that need, I require:

text that relays the image content

Currently, this is not provided on a search results page with thumbnails. Example search results page: https://ursus-stage.library.ucla.edu/catalog?f%5Bsubject_sim%5D%5B%5D=People

[ ]Thumbnails on this page do not give the title of the image in the alt tag EXAMPLE <img src="http://californica-stage.library.ucla.edu//downloads/m326m172d?file=thumbnail" alt="M326m172d?file=thumbnail">

An example of accessible thumbnail images in a search results page, can be found in the database ARTSTOR. EXAMPLE <img _ngcontent-c14="" aria-role="image" id="LICHTENSTEIN_10313550878" src="//mdxdv.artstor.org/thumb/imgstor/size1/licht/d0001/licht_m-0087_as_8b_srgb.jpg" alt="Thumbnail of Cherry Pie by Lichtenstein, Roy (American painter, sculptor, and printmaker, 1923-1997)" aria-label="Thumbnail of Cherry Pie by Lichtenstein, Roy (American painter, sculptor, and printmaker, 1923-1997)" title="Thumbnail of Cherry Pie by Lichtenstein, Roy (American painter, sculptor, and printmaker, 1923-1997)">

How to add the alt tag to the thumbnail

https://github.com/UCLALibrary/ursus/pull/227/files

Create a new file `app/helpers/catalog_helper.rb`

# frozen_string_literal: true
module CatalogHelper
  include Blacklight::CatalogHelperBehavior

  ##
  # Render the thumbnail, if available, for a document and
  # link it to the document record.
  # Make the alt tag return the title
  # @param [SolrDocument] document
  # @param [Hash] image_options to pass to the image tag
  # @param [Hash] url_options to pass to #link_to_document
  # @return [String]
  def render_thumbnail_tag(document, image_options = {}, url_options = {})
    alt_title = document["title_tesim"][0]
    image_options[:alt] = alt_title

    #image_options["aria-hidden"] = true

    value = if blacklight_config.view_config(document_index_view_type).thumbnail_method
              send(blacklight_config.view_config(document_index_view_type).thumbnail_method, document, image_options)
            elsif blacklight_config.view_config(document_index_view_type).thumbnail_field
              url = thumbnail_url(document)
              image_tag url, image_options if url.present?
            end

    if value
      if url_options == false || url_options[:suppress_link]
        value
      else
        link_to_document document, value, url_options
      end
    end
  end

end

Add the argument to the thumbnail partial (or wherever you have your thumbnail view)

app/views/catalog/_thumbnail_default.html.erb

<%- if has_thumbnail?(document) && tn = render_thumbnail_tag(document, :alt => document["title_tesim"][0], :counter => document_counter_with_offset(document_counter)) %>
  <div class="document-thumbnail">
    <% require 'thumbnail_url_service' %>
    <% thumbnail_service = ::ThumbnailUrlService.new(html: tn, url: Rails.application.config.thumbnail_url) %>
    <%= raw(thumbnail_service.markup_with_full_url)  %>
  </div>
<%- end %>

Add a test

expect(page).to have_xpath(".//*[@id='documents']/div[1]/div[2]/a/img[@alt='Title One']")

spec/features/search_results_spec.rb

# frozen_string_literal: true
require 'rails_helper'

RSpec.feature "Search results page" do
  before do
    solr = Blacklight.default_index.connection
    solr.add(work_1_attributes)
    solr.add(work_2_attributes)
    solr.commit
    allow(Rails.application.config).to receive(:iiif_url).and_return('https://example.com')
  end

  # Probably smarter to use an array of objects, but I'm not familiar enough w/ rail / blacklight [AW]
  let(:work_1_attributes) do
    {
      id: 'id123',
      has_model_ssim: ['Work'],
      title_tesim: ['Title One'],
      identifier_tesim: ['ark 123'],
      description_tesim: ['Description 1', 'Description 2'],
      date_created_tesim: ["Date 1"],
      resource_type_tesim: ['still image'],
      photographer_tesim: ['Person 1', 'Person 2'],
      location_tesim: ['search_results_spec'], # to control what displays,
      thumbnail_path_ss: ["/assets/work-ff055336041c3f7d310ad69109eda4a887b16ec501f35afc0a547c4adb97ee72.png"]
    }
  end

  let(:work_2_attributes) do
    {
      id: 'id456',
      has_model_ssim: ['Work'],
      title_tesim: ['Title Two'],
      identifier_tesim: ['ark 456'],
      description_tesim: ['Description 3', 'Description 4'],
      date_created_tesim: ["Date 1"],
      resource_type_tesim: ['still image'],
      photographer_tesim: ['Person 1'],
      location_tesim: ['search_results_spec'] # to control what displays
    }
  end

  scenario 'displays: title, description, date_created, resource_type, and photographer' do
    visit '/catalog?f%5Blocation_tesim%5D%5B%5D=search_results_spec'
    expect(page).to have_content 'Title One'
    expect(page).to have_content 'Description: Description 1'
    expect(page).to have_content 'Description 2'
    expect(page).to have_content 'Resource Type: still image'
    expect(page).to have_content 'Date Created: Date 1'
    expect(page).to have_content 'Photographer: Person 1'
    expect(page).to have_xpath(".//*[@id='documents']/div[1]/div[2]/a/img[@alt='Title One']")
  end
  
  scenario 'displays facetable fields as links' do
    visit '/catalog?f%5Blocation_tesim%5D%5B%5D=search_results_spec'
    expect(page).to have_link 'Title One'
    expect(page).to have_link 'still image'
    expect(page).not_to have_link 'Date 1'
    expect(page).to have_link 'Person 1'
  end

  scenario 'displays line breaks between the values of certain fields' do
    visit '/catalog?f%5Blocation_tesim%5D%5B%5D=search_results_spec'
    expect(page.all('dd.blacklight-description_tesim')[1].all(:css, 'br').length).to eq 1
  end
end

jendiamond/project-blacklight_thumbnail-alt-tag_to-title.md