Accessibility test initial integration

Gemfile

@@ -59,6 +59,7 @@ group :development do
 end
 
 group :test do
+  gem 'axe-core-rspec'
   gem 'capybara', '>= 3.26'
   gem 'coveralls', require: false
   gem 'selenium-webdriver'

Gemfile.lock

@@ -75,6 +75,17 @@ GEM
     ast (2.4.2)
     autoprefixer-rails (10.2.5.1)
       execjs (> 0)
+    axe-core-api (4.3.2)
+      dumb_delegator
+      virtus
+    axe-core-rspec (4.3.2)
+      axe-core-api
+      dumb_delegator
+      virtus
+    axiom-types (0.1.1)
+      descendants_tracker (~> 0.0.4)
+      ice_nine (~> 0.11.0)
+      thread_safe (~> 0.3, >= 0.3.1)
     bcrypt (3.1.16)
     bcrypt_pbkdf (1.1.0)
     bindex (0.8.1)
@@ -133,6 +144,8 @@ GEM
     childprocess (3.0.0)
     chronic (0.10.2)
     coderay (1.1.3)
+    coercible (1.0.0)
+      descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.1.9)
     coveralls (0.8.23)
       json (>= 1.8, < 3)
@@ -145,6 +158,8 @@ GEM
     crass (1.0.6)
     deprecation (1.1.0)
       activesupport
+    descendants_tracker (0.0.4)
+      thread_safe (~> 0.3, >= 0.3.1)
     devise (4.8.0)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -158,6 +173,7 @@ GEM
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
     dot-properties (0.1.3)
+    dumb_delegator (1.0.0)
     ed25519 (1.2.4)
     erubi (1.10.0)
     execjs (2.8.1)
@@ -197,6 +213,7 @@ GEM
     httpclient (2.8.3)
     i18n (1.8.10)
       concurrent-ruby (~> 1.0)
+    ice_nine (0.11.2)
     jbuilder (2.11.2)
       activesupport (>= 5.0.0)
     jquery-rails (4.4.0)
@@ -403,6 +420,7 @@ GEM
     term-ansicolor (1.7.1)
       tins (~> 1.0)
     thor (1.1.0)
+    thread_safe (0.3.6)
     tilt (2.0.10)
     tins (1.29.1)
       sync
@@ -432,6 +450,10 @@ GEM
     unicode-display_width (1.7.0)
     view_component (2.34.0)
       activesupport (>= 5.0.0, < 7.0)
+    virtus (2.0.0)
+      axiom-types (~> 0.1)
+      coercible (~> 1.0)
+      descendants_tracker (~> 0.0, >= 0.0.3)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.1.0)
@@ -469,6 +491,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  axe-core-rspec
   bcrypt (~> 3.1.7)
   bcrypt_pbkdf
   bixby

app/assets/stylesheets/components/header.scss

@@ -14,3 +14,8 @@
 .navbar-light .navbar-nav .nav-link:hover {
   text-decoration: underline;
 }
+
+.submit-search-text {
+  background-color: #005bbd;
+  color: #ffffff;
+}

app/assets/stylesheets/components/recently_added.scss

@@ -16,6 +16,7 @@
     }
     .title a {
       font-size: 1.2em;
+      color: #005bbd;
     }
   }
 }

app/assets/stylesheets/components/search.scss

@@ -0,0 +1,5 @@
+.input-group {
+  button.btn {
+    background-color: #005bbd;
+  }
+}

app/assets/stylesheets/modules/deployment_version.scss

@@ -9,7 +9,7 @@
   margin-left: $space-base;
   margin-right: $space-base;
 
-  color: #aaa; /* gray */
+  color: #000000; /* gray */
 
   .lux-text-style[data-v-ba32f400] {
     font-size: $font-size-x-small;

app/views/catalog/show.html.erb

@@ -1,7 +1,7 @@
 <style>
   /*
-   * Source: https://blog.kritikapattalam.com/2-simple-ways-you-can-truncate-text-using-css
-   */
+  * Source: https://blog.kritikapattalam.com/2-simple-ways-you-can-truncate-text-using-css
+  */
   .truncate-line-clamp {
     display: -webkit-box;
     -webkit-line-clamp: 4;
@@ -14,83 +14,89 @@
 
 <div id="document" data-document-id="<%= @document.id %>" itemscope="itemscope" itemtype="http://schema.org/Thing" class="document">
   <div class="document-main-section">
-  <header class="documentHeader row">
-    <h1 class="index_title document-title-heading col">
-      <span itemprop="name"><%= @document.title %></span>
-    </h1>
-    <div class="index-document-functions col-sm-3 col-lg-2">
-      <!-- TODO add bookmarks -->
-    </div>
-  </header>
+    <header class="documentHeader row">
+      <h1 class="index_title document-title-heading col">
+        <span itemprop="name"><%= @document.title %></span>
+      </h1>
+      <div class="index-document-functions col-sm-3 col-lg-2">
+        <!-- TODO add bookmarks -->
+      </div>
+    </header>
 
-  <div class="lux">
-    <dt class="blacklight-issue_date_ssim col-md-3"></dt>
-    <dd class="col-md-12 blacklight-issue_date_ssim">
-      <div class="document-issued-date" value="January 2017"></div>
-    </dd>
+    <div class="lux">
+      <dl>
+        <dt class="blacklight-issue_date_ssim col-md-3"></dt>
+        <dd class="col-md-12 blacklight-issue_date_ssim">
+          <div class="document-issued-date" value="January 2017"></div>
+        </dd>
+      </dl>
 
-    <% @document.abstracts.each do |abstract| %>
-      <dt class="blacklight-abstract_tsim col-md-3"></dt>
-      <dd class="col-md-12">
-        <div class="document-abstract">
-          <header>Abstract:</header>
-          <p id="document-abstract-text" class="truncate-line-clamp"><%= abstract %></p>
+      <dl>
+        <% @document.abstracts.each do |abstract| %>
+        <dt class="blacklight-abstract_tsim col-md-3"></dt>
+        <dd class="col-md-12">
+          <div class="document-abstract">
+            <header>Abstract:</header>
+            <p id="document-abstract-text" class="truncate-line-clamp"><%= abstract %></p>
             <a id="document-abstract-text-toggle" href="#"><i class="bi bi-caret-down"></i><span>Show More</span></a>
-        </div>
-      </dd>
-    <% end %>
+          </div>
+        </dd>
+        <% end %>
+      </dl>
 
-    <% @document.descriptions.each do |description| %>
-      <dt class="blacklight-description_tsim col-md-3"></dt>
-      <dd class="col-md-12 blacklight-description_tsim">
-        <div class="document-description">
-          <header>Description:</header>
-          <p id="document-description-text" class="truncate-line-clamp"><%= description %></p>
+      <dl>
+        <% @document.descriptions.each do |description| %>
+        <dt class="blacklight-description_tsim col-md-3"></dt>
+        <dd class="col-md-12 blacklight-description_tsim">
+          <div class="document-description">
+            <header>Description:</header>
+            <p id="document-description-text" class="truncate-line-clamp"><%= description %></p>
             <a id="document-description-text-toggle" href="#"><i class="bi bi-caret-down"></i><span>Show More</span></a>
-        </div>
-      </dd>
-    <% end %>
-  </div>
+          </div>
+        </dd>
+        <% end %>
+      </dl>
+    </div>
 
-  <%= render "show_documents" %>
-  <%= render "show_metadata" %>
-</div>
+    <%= render "show_documents" %>
+    <%= render "show_metadata" %>
+  </div>
 
 </div>
 
 <%= render "show_sidebar" %>
 
 <script>
-$(function() {
-  var setupMoreLessToggle = function(linkId, textId) {
+  $(function() {
+    var setupMoreLessToggle = function(linkId, textId) {
 
-    // Wire the link to toggle between show more/show less
-    $(linkId).click(function() {
-      if ($(linkId).text() == "Show Less") {
-        $(textId).addClass("truncate-line-clamp");
-        $(linkId + " i").toggleClass("bi-caret-up bi-caret-down");
-        $(linkId + " span").text("Show More");
-      } else {
-        $(textId).removeClass("truncate-line-clamp");
-        $(linkId + " i").toggleClass("bi-caret-up bi-caret-down");
-        $(linkId + " span").text("Show Less");
-      }
-      return false;
-    });
+      // Wire the link to toggle between show more/show less
+      $(linkId).click(function() {
+        if ($(linkId).text() == "Show Less") {
+          $(textId).addClass("truncate-line-clamp");
+          $(linkId + " i").toggleClass("bi-caret-up bi-caret-down");
+          $(linkId + " span").text("Show More");
+        } else {
+          $(textId).removeClass("truncate-line-clamp");
+          $(linkId + " i").toggleClass("bi-caret-up bi-caret-down");
+          $(linkId + " span").text("Show Less");
+        }
+        return false;
+      });
 
-    // Only show the link it text was indeed truncated
-    // https://rubyyagi.com/how-to-truncate-long-text-and-show-read-more-less-button/
-    var el = $(textId)[0];
-    if (el !== undefined) {
-      var textTruncated = (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth)
-      if (!textTruncated) {
-        $(linkId).addClass("invisible");
+      // Only show the link it text was indeed truncated
+      // https://rubyyagi.com/how-to-truncate-long-text-and-show-read-more-less-button/
+      var el = $(textId)[0];
+      if (el !== undefined) {
+        var textTruncated = (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth)
+        if (!textTruncated) {
+          $(linkId).addClass("invisible");
+        }
       }
     }
-  }
 
-  setupMoreLessToggle("#document-abstract-text-toggle", "#document-abstract-text");
-  setupMoreLessToggle("#document-description-text-toggle", "#document-description-text");
-});
+    setupMoreLessToggle("#document-abstract-text-toggle", "#document-abstract-text");
+    setupMoreLessToggle("#document-description-text-toggle", "#document-description-text");
+  });
 
 </script>

spec/rails_helper.rb

@@ -2,11 +2,13 @@
 
 # This file is copied to spec/ when you run 'rails generate rspec:install'
 require 'spec_helper'
+
 ENV['RAILS_ENV'] ||= 'test'
 require File.expand_path('../config/environment', __dir__)
 # Prevent database truncation if the environment is production
 abort('The Rails environment is running in production mode!') if Rails.env.production?
 require 'rspec/rails'
+require 'axe-rspec'
 
 # Add additional requires below this line. Rails is not loaded until this point!
 require 'webmock/rspec'

spec/system/accessibility_spec.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+require "rails_helper"
+
+describe "accessibility", type: :system, js: true do
+  let(:community_fetch_with_expanded_metadata) { file_fixture("single_item.xml").read }
+  let(:indexer) do
+    Indexer.new(community_fetch_with_expanded_metadata)
+  end
+
+  before do
+    Blacklight.default_index.connection.delete_by_query("*:*")
+    Blacklight.default_index.connection.commit
+    indexer.index
+    stub_request(:get, "https://github.com/mozilla/geckodriver/releases/latest").with(
+      headers: {
+        'Accept' => '*/*',
+        'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
+        'Host' => 'github.com',
+        'User-Agent' => 'Ruby'
+      }
+    )
+  end
+  context "homepage" do
+    it "complies with WCAG 2.0 AA and Section 508" do
+      visit "/"
+      expect(page).to be_axe_clean
+        .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
+        .skipping(:'color-contrast') # false positives
+        .excluding(".tt-hint") # Issue is in typeahead.js library
+    end
+  end
+
+  context "about page" do
+    it "complies with WCAG 2.0 AA and Section 508" do
+      visit "/about"
+      expect(page).to be_axe_clean
+        .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
+        .skipping(:'color-contrast') # false positives
+        .excluding(".tt-hint") # Issue is in typeahead.js library
+    end
+  end
+
+  context "search results page" do
+    it "complies with WCAG 2.0 AA and Section 508" do
+      visit '/?search_field=all_fields&q='
+      expect(page).to be_axe_clean
+        .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
+        .skipping(:'color-contrast') # false positives
+        .excluding(".tt-hint") # Issue is in typeahead.js library
+    end
+  end
+
+  context "single record page page" do
+    it "complies with WCAG 2.0 AA and Section 508" do
+      visit '/catalog/78348'
+      expect(page).to be_axe_clean
+        .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
+        .skipping(:'color-contrast') # false positives
+        .excluding(".tt-hint") # Issue is in typeahead.js library
+    end
+  end
+end