Fix modal header display order; fixes #1620

projectblacklight · Feb 1, 2017 · cc271c0 · cc271c0
1 parent 7634cbc
commit cc271c0
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 12 deletions.
diff --git a/app/assets/javascripts/blacklight/modal.js b/app/assets/javascripts/blacklight/modal.js
@@ -106,8 +106,10 @@ Blacklight.modal.modalCloseSelector   = "[data-blacklight-modal~=close]";
 // network errors. 
 Blacklight.modal.onFailure = function(data) {
   var contents =  "<div class='modal-header'>" +
-           "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" +
-           "Network Error</div>";
+            "<div class='modal-title'>Network Error</div>" +
+            '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' +
+            '  <span aria-hidden="true">&times;</span>' +
+            '</button>';
   $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
   $(Blacklight.modal.modalSelector).modal('show'); 
 }

diff --git a/app/views/catalog/citation.js.erb b/app/views/catalog/citation.js.erb
@@ -1,6 +1,8 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3><%= t('blacklight.tools.citation') %></h3>
+  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
 </div>
 <div class="modal-body">
 <%= render :partial => 'citation' -%>

diff --git a/app/views/catalog/email.html.erb b/app/views/catalog/email.html.erb
@@ -1,5 +1,7 @@
 <div class="modal-header">
-<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-hidden="true">×</button>
-<h1 class="modal-title"><%= t('blacklight.email.form.title') %></h1>
-  </div>
+  <h1 class="modal-title"><%= t('blacklight.email.form.title') %></h1>
+  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
 <%= render :partial => 'email_form' %>
diff --git a/app/views/catalog/email_success.html.erb b/app/views/catalog/email_success.html.erb
@@ -1,6 +1,8 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h1><%= t('blacklight.email.form.title') %></h1>
+  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
 </div>
 
 <div class="modal-body">

diff --git a/app/views/catalog/facet.html.erb b/app/views/catalog/facet.html.erb
@@ -3,9 +3,10 @@
 </div>
 
 <div class="modal-header">
-  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-hidden="true">×</button>
-
   <h3 class="modal-title"><%= facet_field_label(@facet.key) %></h3>
+  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
   <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>
 
 </div>

diff --git a/app/views/catalog/sms.html.erb b/app/views/catalog/sms.html.erb
@@ -1,5 +1,7 @@
 <div class="modal-header">
-	<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-hidden="true">×</button>
 	<h1 class="modal-title"><%= t('blacklight.sms.form.title') %></h1>
+	<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
 </div>
 <%= render :partial => 'sms_form' %>
diff --git a/app/views/catalog/sms_success.html.erb b/app/views/catalog/sms_success.html.erb
@@ -1,6 +1,8 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h1 class="modal-title"><%= t('blacklight.sms.form.title') %></h1>
+  <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+    <span aria-hidden="true">&times;</span>
+  </button>
 </div>
 
 <div class="modal-body">

diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
@@ -1,5 +1,5 @@
 <div id="blacklight-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal menu" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
     </div>
   </div>

diff --git a/config/locales/blacklight.en.yml b/config/locales/blacklight.en.yml
@@ -25,6 +25,9 @@ en:
     and: 'and'
     or: 'or'
 
+    modal:
+      close: "Close"
+
     bookmarks:
       title: 'Bookmarks'
       page_title: 'Bookmarks - %{application_name}'