Merge pull request #653 from projecthydra/batch-edit-access

Make batch-edit more accessible

app/assets/javascripts/sufia/batch.js

@@ -1,7 +1,12 @@
 Blacklight.onLoad(function() {
-  $('#add_descriptions').click(function() {
+  $('#show_addl_descriptions').click(function() {
     $('#more_descriptions').show();
-    $('#add_descriptions').hide();
+    $('#show_addl_descriptions').hide();
+    return false;
+  });
+  $('#hide_addl_descriptions').click(function() {
+    $('#more_descriptions').hide();
+    $('#show_addl_descriptions').show();
     return false;
   });
   $('#more_descriptions').hide();

app/assets/stylesheets/batch-edit.css.scss

@@ -0,0 +1,21 @@
+.help-icon {
+  @extend .glyphicon;
+  @extend .glyphicon-question-sign;
+  @extend .large-icon;
+  top: 5px;
+}
+
+.form-horizontal .batch-group {
+  @extend .form-group;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+#hide_addl_descriptions {
+  margin-bottom: 10px;
+}
+
+#additional_title_clone {
+  padding-top: 5px;
+}
+

app/assets/stylesheets/sufia.css.scss

@@ -23,6 +23,7 @@
 @import 'styles';
 @import 'file-listing';
 @import 'collections';
+@import 'batch-edit';
 
 #browse-everything {
   top:10%;

app/helpers/sufia/records_helper_behavior.rb

@@ -13,16 +13,16 @@ def help_icon(key, content = nil, title = nil)
       title = title || get_label(key)
       link_to '#', id: "generic_file_#{key.to_s}_help", rel: 'popover',
               'data-content' => content,
-              'data-original-title' => title do
-        content_tag(:span, "help", class: "sr-only") +
-        content_tag('i', '', "aria-hidden" => true, class: "glyphicon glyphicon-question-sign large-icon")
+              'data-original-title' => title,
+              'aria-label' => get_aria_label(key) do
+        content_tag 'i', '', "aria-hidden" => true, class: "help-icon"
       end
     end
 
     def help_icon_modal(modal_id)
-      link_to '#' + modal_id, id: "generic_file_#{modal_id}_help_modal", rel: 'button', data: { toggle: 'modal' } do
-        content_tag(:span, "help", class: "sr-only") +
-        content_tag('i', '', "aria-hidden" => true, class: 'glyphicon glyphicon-question-sign large-icon')
+      link_to '#' + modal_id, id: "generic_file_#{modal_id}_help_modal", rel: 'button', 
+              data: { toggle: 'modal' }, 'aria-label' => get_aria_label(modal_id) do
+        content_tag 'i', '', "aria-hidden" => true, class: 'help-icon'
       end
     end
 
@@ -33,16 +33,28 @@ def metadata_help(key)
     def get_label(key)
       I18n.t("sufia.field_label.#{key}", default: key.to_s.humanize)
     end
+
+    def get_aria_label(key)
+      I18n.t("sufia.aria_label.#{key}", default: default_aria_label(key.to_s.humanize))
+    end
 
     private
 
     def more_or_less_button(key, html_class, symbol)
       # TODO, there could be more than one element with this id on the page, but the fuctionality doesn't work without it.
       content_tag('button', class: "#{html_class} btn", id: "additional_#{key}_submit", name: "additional_#{key}") do
-        (symbol + content_tag('span', class: 'sr-only') do
+        (sr_hidden(symbol) + content_tag('span', class: 'sr-only') do
           "add another #{key.to_s}"
         end).html_safe
       end
     end
+
+    def sr_hidden text
+      content_tag :span, text, "aria-hidden" => true
+    end
+
+    def default_aria_label text
+      I18n.t("sufia.aria_label.default", title: text)
+    end
   end
 end

app/views/batch/_metadata.html.erb

@@ -1,16 +1,15 @@
-<h2>Individual Titles <small>(applied to individual files uploaded)</small><small class="pull-right"><span class="error">*</span> indicates required fields</small> </h2>
+<h2>Individual Titles  </h2>
 <div id="" class="well">
-  <p>
-  <i class="glyphicon glyphicon-info-sign"></i> Filename will be the default title.  Please provide a more meaningful title, and filenames will still be preserved by the system.
-  </p>
   <div class="row">
     <div class="col-sm-8">
+      <h3>Applies to individual files uploaded</h3>
+      <%= content_tag :p, t('sufia.batch.help.title'), class: "help-block" %>
       <% @batch.generic_files.sort! { |a,b| a.label.downcase <=> b.label.downcase }.each_with_index  do |gen_f, index| %>
-        <div class="form-group">
-          <%= f.label :title, "<span class='error'>*</span> Title #{index + 1}".html_safe, class: "control-label" %>
+        <div class="batch-group">
+          <%= f.label :title, "<span class='required-field'>*</span> Title #{index + 1}".html_safe, class: "control-label" %>
+          <%= help_icon(:title) %>
           <div id="additional_title_clone">
             <%= f.text_field :title, name: "title[#{gen_f.id}][]", value: gen_f.label, required: true %>
-            <%= help_icon(:title) %>
           </div>
         </div>
       <% end %>
@@ -24,55 +23,50 @@
 
 <%= hidden_field_tag(:extra_description_count, "1") %>
 <div  id="descriptions_display">
-  <h2 class="non lower">Bulk Descriptions <small>(applied to all files just uploaded)</small>  <small class="pull-right"><span class="error">*</span> indicates required fields</small></h2>
+  <h2>Bulk Descriptions</h2>
   <div class="well">
-    <div class="form-group" id="resources">
+    <h3>Applies to all files just uploaded</h3>
+    <div class="batch-group" id="resources">
       <%# See if this works: render_edit_field_partial(:type, f:f) %>
       <%= f.label :resource_type, "Resource Types", class: "control-label", for: "resource_type" %>
-      <p class="help-block">You may select multiple types to apply to all files<p>
-      <%= f.select "resource_type", Sufia::Engine::config.resource_types, {}, { multiple: true, size: 7 } %>
       <%= help_icon(:resource_type) %>
+      <%= content_tag :p, t('sufia.batch.help.resource_type'), class: "help-block" %>
+      <%= f.select "resource_type", Sufia::Engine::config.resource_types, {}, { multiple: true, size: 7, "aria-label" => "Rights combo box" } %>
     </div>
 
-    <div class="form-group">
-      <%= f.label :tag, "<span class='error'>*</span> Keyword".html_safe, class: "control-label" %>
+    <div class="batch-group">
+      <%= f.label :tag, "<span class='required-field'>*</span> Keyword".html_safe, class: "control-label" %>
+      <%= help_icon(:tag) %>
       <div id="additional_tag_clone">
         <%= f.text_field :tag, name: "generic_file[tag][]", value: "", required: true  %>
-        <button class="adder btn" name="additional_tag" id="additional_tag_submit">+<span class="sr-only">add another Tag</span></button>
-        &nbsp;
-        <%= help_icon(:tag) %>
+        <button class="adder btn" name="additional_tag" id="additional_tag_submit"><span aria-hidden="true">+</span><span class="sr-only">add another Keyword</span></button>
       </div>
       <div id="additional_tag_elements"></div>
     </div>
 
-    <div class="form-group">
-      <%= f.label :creator, "<span class='error'>*</span> Creator".html_safe, class: "control-label" %>
+    <div class="batch-group">
+      <%= f.label :creator, "<span class='required-field'>*</span> Creator".html_safe, class: "control-label" %>
+      <%= help_icon(:creator) %>
       <div id="additional_creator_clone">
         <%= f.text_field :creator, name: "generic_file[creator][]", value: "", required: true %>
-          <button class="adder btn" name="additional_creator" id="additional_creator_submit">+<span class="sr-only">add another Creator</span></button>
-          &nbsp;
-          <%= help_icon(:creator) %>
+        <button class="adder btn" name="additional_creator" id="additional_creator_submit"><span aria-hidden="true">+</span><span class="sr-only">add another Creator</span></button>
       </div>
       <div id="additional_creator_elements"></div>
     </div>
 
-    <div class="form-group">
-      <%= f.label :rights, '<span class="error">*</span> Rights'.html_safe, class: "control-label" %>
+    <div class="batch-group">
+      <%= f.label :rights, '<span class="required-field">*</span> Rights'.html_safe, class: "control-label" %>
+      <%= help_icon_modal('rightsModal') %>
       <div id="additional_rights_clone">
         <%= f.select "rights", options_for_select(Sufia::Engine::config.cc_licenses, 'http://creativecommons.org/licenses/by-nc-nd/3.0/us/'), required: true %>
-        <button class="adder btn" name="additional_rights" id="additional_rights_submit">+<span class="sr-only">add another Rights</span></button>
-        &nbsp;
-        <%= help_icon_modal('rightsModal') %>
+        <button class="adder btn" name="additional_rights" id="additional_rights_submit"><span aria-hidden="true">+</span><span class="sr-only">add another Rights</span></button>
         <%= render partial: "generic_files/rights_modal" %>
       </div>
-
       <div id="additional_rights_elements"></div>
     </div>
 
-    <div class="row" id="add_descriptions">
-      <a href="#" id="add_descriptions" >Add More Description Types</a>
-    </div>
-      <!-- hidden on initial load -->
+    <button id="show_addl_descriptions" class="btn btn-default" aria-label="reveal additional metadata description fields">Show Additional Fields</button>
+    <!-- hidden on initial load -->
 
     <%= render partial: 'more_metadata', locals: {f:f} %>
 

app/views/batch/_more_metadata.html.erb

@@ -1,5 +1,6 @@
-    <div id="more_descriptions">
-      <% (@generic_file.terms_for_editing - [:title, :creator, :rights, :tag, :resource_type]).each do |term| %>
-        <%= render partial: "generic_files/field_form", locals: { generic_file: @generic_file, f: f, render_req: false, key: term } %>
-      <% end %>
-    </div> <!-- /more_descriptions -->
+<div id="more_descriptions">
+  <button id="hide_addl_descriptions" class="btn btn-default" aria-label="hide additional metadata description fields">Hide Additional Fields</button>
+  <% (@generic_file.terms_for_editing - [:title, :creator, :rights, :tag, :resource_type]).each do |term| %>
+    <%= render partial: "generic_files/field_form", locals: { generic_file: @generic_file, f: f, render_req: false, key: term } %>
+  <% end %>
+</div> <!-- /more_descriptions -->

app/views/batch/edit.html.erb

@@ -3,13 +3,13 @@
 <% end %>
 
 <h1>Apply Metadata</h1>
-<div class="alert">
+<p>
   The information you provide for Title will be applied to the corresponding file only; however all other
   information you provide will be applied <em>to the entire batch of files</em> you have just 
   deposited into <%= t('sufia.product_name') %>. You may edit individual files from 
   <%= link_to "<i class='glyphicon glyphicon-dashboard'></i> #{t('sufia.bread_crumb.file_list')}".html_safe, sufia.dashboard_files_path %>
-  once this step is finished.
-</div>
+  once this step is finished. <span class="required-field">*</span> indicates required fields.
+</p>
 <%= form_for([@batch, @generic_file], url: sufia.batch_generic_files_path, html: { multipart: true, class: 'form-horizontal' }) do |f| %>
 
   <%= render partial: 'metadata', formats: [:html], locals: {f: f} %>

app/views/generic_files/_field_form.html.erb

@@ -1,13 +1,13 @@
 <% render_req ||= true # render_req is true for single file edit, false for batch edit%>
-<div class="form-group">
+<div class="batch-group">
   <% vals = generic_file[key] %>
   <% if render_req && required?(key) %>
     <% tmp = '<span class="required-field">*</span>' + get_label(key) %>
     <%= f.label key, tmp.html_safe  %>
   <% else %>
     <%= f.label key, get_label(key) %>
   <% end %>
-
+  <%= help_icon(key) %>
   <% if key == :resource_type %>
     <%# resource_type is a multiselect box, so don't render one row for each %>
     <%= render_edit_field_partial(key, record: generic_file, f: f, render_req: render_req) %>
@@ -16,4 +16,4 @@
       <%= render_edit_field_partial(key, record: generic_file, f: f,  v: v, index: index, render_req: render_req) %>
     <% end %>
   <% end %>
- </div><!-- /.form-group -->
+ </div><!-- /.batch-group -->

app/views/records/edit_fields/_suffix.html.erb

@@ -4,7 +4,6 @@
             <%= add_field(key) %>
           <% end %>
             &nbsp;
-          <%= help_icon(key) %>
           <%= render partial: "records/rights_modal" if key == "rights" %>
         <% else %>
           <%= subtract_field(key) %>

config/locales/sufia.en.yml

@@ -119,9 +119,15 @@ en:
       date_created: "The date on which the file was generated. Dates are accepted in the form YYYY-MM-DD, e.g. 1776-07-04."
       description: "Free-text notes about the file itself. Examples include abstracts of a paper, citation information for a journal article, or a tag indicating a larger collection to which the file belongs."
       identifier: "A unique handle describing the file. An example would be a DOI for a journal article, or an ISBN or OCLC number for a book."
-      language: " The language of the file content."
+      language: "The language of the file content."
       publisher: "The person or group making the file available. Generally this is the institution."
       rights: "Licensing and distribution information governing access to the file. Select from the provided drop-down list. <em>This is a required field</em>."
+    aria_label: 
+      default: "Usage information for %{title}"
+      based_near: "Usage information for location"
+      description: "Usage information for abstract or summary"
+      tag: "Usage information for keyword"
+      rightsModal: "Usage information for rights"
     background_attribution: "Background image courtesy of Penn State University"
     bread_crumb:
       search_results: "Back to search results"
@@ -131,3 +137,7 @@ en:
     user_profile:
       no_followers: "No one is following you."
       no_following: "You are not following anyone."
+    batch:
+      help:
+        title: "Filename will be the default title. Please provide a more meaningful title, and filenames will still be preserved by the system."
+        resource_type: "You may select multiple types to apply to all files"