Merge pull request #1218 from sul-dlss/issue#462_Accessibility_of_Bro…

…wse_Nearby

Adds accessibility features to browse-nearby

app/assets/javascripts/embedded-call-number-browse.js

@@ -22,10 +22,9 @@
       this.startDoc = item.data('start');
       this.embedContainer = this.embedViewport.find('.gallery');
       this.url = item.data('url');
-      this.browseUrl = item.attr('href');
+      this.browseUrl = item.data('index-path');
       this.docs = [];
       this.currentDoc = this.startDoc;
-      this.updateHref();
     };
 
     GalleryDocs.prototype.updateDocs = function() {
@@ -52,11 +51,6 @@
       return $.inArray(this.currentDoc, this.docs);
     };
 
-    // Updates the href to activate plugin for javascript enabled browsers
-    GalleryDocs.prototype.updateHref = function() {
-      this.item.attr("href", this.item.data('embed-viewport'));
-    };
-
     // Calculates how many docs can be viewed in the viewport
     GalleryDocs.prototype.calculateDocsPerView = function() {
       var width = $(this.embedViewport).outerWidth();
@@ -108,14 +102,18 @@
       function openThisBrowser() {
         if ($galleryDoc.item.hasClass('collapsed')){
           $galleryDoc.item.removeClass('collapsed').addClass('active');
+          $galleryDoc.item.attr('aria-expanded', 'true');
+          $galleryDoc.embedViewport.attr('aria-expanded', 'true');
           $galleryDoc.embedViewport.slideDown(function(){
             $galleryDoc.calculateDocsPerView();
             showPreview();
           });
         }else{
           $galleryDoc.item.addClass('collapsed');
+          $galleryDoc.item.attr('aria-expanded', 'false');
           $galleryDoc.embedViewport.slideUp(function(){
           });
+          $galleryDoc.embedViewport.attr('aria-expanded', 'false');
         }
       }
 

app/assets/stylesheets/modules/browse-embed.scss

@@ -1,9 +1,9 @@
-.callnumber a.collapsed {
+.callnumber button.collapsed {
   @extend .btn;
   @extend .btn-default;
 }
 
-.callnumber a {
+.callnumber button {
   @extend .btn;
   @extend .btn-default;
 }

app/helpers/browse_helper.rb

@@ -1,23 +1,25 @@
 module BrowseHelper
   def link_to_callnumber_browse(document, callnumber, index = 0)
-    link_to(
+    button_tag(
       callnumber.callnumber,
-      browse_index_path(
-        start: document[:id],
-        barcode: (callnumber.barcode unless callnumber.barcode == document[:preferred_barcode]),
-        view: :gallery
-      ), class: "collapsed",
-         id: "callnumber-browse-#{index}",
-         "aria-labelledby" => "callnumber-browse-#{index}",
-         data: { behavior: "embed-browse",
-                 start: document[:id],
-                 embed_viewport: "#callnumber-#{index}",
-                 url: browse_nearby_path(
-                   start: document[:id],
-                   barcode: (callnumber.barcode unless callnumber.barcode == document[:preferred_barcode]),
-                   view: :gallery
-                 )
-               }
+      class: "collapsed",
+      id: "callnumber-browse-#{index}",
+      "aria-labelledby" => "callnumber-browse-#{index}",
+      "aria-expanded" => "true",
+      data: { behavior: "embed-browse",
+              start: document[:id],
+              embed_viewport: "#callnumber-#{index}",
+              index_path: browse_index_path(
+                start: document[:id],
+                barcode: (callnumber.barcode unless callnumber.barcode == document[:preferred_barcode]),
+                view: :gallery
+              ),
+              url: browse_nearby_path(
+                start: document[:id],
+                barcode: (callnumber.barcode unless callnumber.barcode == document[:preferred_barcode]),
+                view: :gallery
+              )
+            }
     )
   end
 end

app/views/catalog/record/_callnumber_browse.html.erb

@@ -20,7 +20,7 @@
   </div>
 
   <% document.holdings.browsable_callnumbers.each_with_index do |callnumber, index| %>
-    <div id="callnumber-<%=index%>" class="embed-callnumber-browse-container" style="<%= 'display:none;' unless index == 0 %>">
+    <div id="callnumber-<%=index%>" class="embed-callnumber-browse-container" aria-expanded="true" style="<%= 'display:none;' unless index == 0 %>">
       <div class="embedded-items"><div class="gallery"></div></div>
       <a class="left embed-browse-control" href="#" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>

spec/helpers/browse_helper_spec.rb

@@ -6,23 +6,16 @@
     let(:preferred_callnumber) { Holdings::Callnumber.new('123 -|- abc -|- home_location -|- current_location -|- type -|- truncated_callnumber -|- shelfkey -|- reverse_shelfkey -|- preferred-callnumber') }
     let(:callnumber) { Holdings::Callnumber.new('321 -|- abc -|- home_location -|- current_location -|- type -|- truncated_callnumber -|- shelfkey -|- reverse_shelfkey -|- callnumber') }
     it "should link to the callnumber" do
-      expect(link_to_callnumber_browse(document, callnumber)).to have_css('a', text: 'callnumber')
-    end
-    it "should link to the gallery view by default" do
-      expect(link_to_callnumber_browse(document, callnumber)).to match(/<a*.*href=\".*view=gallery.*\"/)
-    end
-    it "should include the barcode if the callnumber does not have the document's preferred barcode" do
-      expect(link_to_callnumber_browse(document, callnumber)).to match(/<a*.*href=\".*barcode=321.*\"/)
-    end
-    it "should not include the barcode if the callnumber's barcode is the same as the document's preferred barcode" do
-      expect(link_to_callnumber_browse(document, preferred_callnumber)).to_not match(/<a*.*href=\".*barcode.*\">/)
+      expect(link_to_callnumber_browse(document, callnumber)).to have_css('button', text: 'callnumber')
     end
     it "should include correct class" do
-      expect(link_to_callnumber_browse(document, callnumber)).to match(/<a*.*class=\"collapsed\"*/)
+      expect(link_to_callnumber_browse(document, callnumber)).to match(/<button*.*class=\"collapsed\"*/)
     end
     it "should include correct data attributes" do
-      link = Capybara.string(link_to_callnumber_browse(document, callnumber, 3))
-      expect(link).to have_css('a[data-behavior="embed-browse"][data-embed-viewport="#callnumber-3"][data-start="abc123"]')
+      button = Capybara.string(link_to_callnumber_browse(document, callnumber, 3))
+      expect(button).to have_css('button[data-behavior="embed-browse"][data-embed-viewport="#callnumber-3"][data-start="abc123"]')
+      # Should add [data-index-path="/browse?start=shelfkey&view=gallery"] to the check,
+      # but it's not clear how to create a dummy that would flow through correctly.
     end
   end
 end

spec/views/catalog/record/_callnumber_browse.html.erb_spec.rb

@@ -3,6 +3,7 @@
 describe "catalog/record/_callnumber_browse.html.erb" do
   let(:document) {
     SolrDocument.new(
+      id: 'abc123',
       item_display: [
         'barcode -|- library -|- home_location -|- current_location -|- type -|- truncated_callnumber -|- shelfkey -|- reverse_shelfkey -|- callnumber -|- full_shelfkey -|- -|- LC',
         'barcode2 -|- library -|- home_location -|- current_location -|- type -|- truncated_callnumber2 -|- shelfkey -|- reverse_shelfkey -|- callnumber2 -|- full_shelfkey -|- -|- DEWEY'
@@ -17,14 +18,16 @@
     expect(rendered).to have_css('div.record-browse-nearby')
     expect(rendered).to have_css(".section#browse-nearby")
   end
-  it "should render view full page link" do
-    expect(rendered).to have_css('.view-full-page a')
+  skip "should render browse index links with index url" do
+    expect(rendered).to have_link('View full page', href: '/browse?start=full_shelfkey&view=gallery')
+    expect(rendered).to have_link('Continue to full page', href: '/browse?start=full_shelfkey&view=gallery')
+    # Somehow we need to send in a fixture that will invoke the right ckey
   end
   it "should render a heading" do
     expect(rendered).to have_css('h2', text: /Browse related items/)
   end
   it "should include links to all unique callnumbers" do
-    expect(rendered).to have_css('.callnumber a', text: "callnumber")
-    expect(rendered).to have_css('.callnumber a', text: "callnumber2")
+    expect(rendered).to have_css('.callnumber button', text: "callnumber")
+    expect(rendered).to have_css('.callnumber button', text: "callnumber2")
   end
 end