modify heading levels to meet accessibility WCAG 2.0 AA guidelines

projectblacklight · Jul 2, 2015 · c4bf487 · c4bf487
1 parent dd3dff9
commit c4bf487
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 22 deletions.
diff --git a/app/assets/stylesheets/blacklight/_catalog.scss b/app/assets/stylesheets/blacklight/_catalog.scss
@@ -100,6 +100,10 @@ span.constraints-label {
     padding-top: $padding-base-vertical;
     border-bottom:1px dotted $table-border-color;
     @extend .clearfix;
+
+    .document-title-heading {
+      @extend h5;
+    }
   }
 }
 

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -3,6 +3,10 @@
   padding-bottom: $padding-large-vertical;
 }
 
+.facets .facets-heading {
+  @extend h4;
+}
+
 .no-js {
   #sidebar .collapse {
     @extend .in;

diff --git a/app/views/bookmarks/index.html.erb b/app/views/bookmarks/index.html.erb
@@ -1,11 +1,11 @@
 <% @page_title = t('blacklight.bookmarks.page_title', :application_name => application_name) %>
 
 <div id="content" class="col-md-12">
-<h1 class='page-heading'><%= t('blacklight.bookmarks.title') %></h1>
+<h2 class='page-heading'><%= t('blacklight.bookmarks.title') %></h2>
 
 <%- if current_or_guest_user.blank? -%>
 
-  <h2 class='section-heading'><%= t('blacklight.bookmarks.need_login') %></h2>
+  <h3 class='section-heading'><%= t('blacklight.bookmarks.need_login') %></h3>
 
 <%- elsif @document_list.blank? -%>
 

diff --git a/app/views/catalog/_facet_layout.html.erb b/app/views/catalog/_facet_layout.html.erb
@@ -1,9 +1,8 @@
 <div class="panel panel-default facet_limit blacklight-<%= facet_field.key.parameterize %> <%= 'facet_limit-active' if facet_field_in_params?(facet_field.key) %>">
   <div class="<%= "collapsed" if should_collapse_facet?(facet_field) %> collapse-toggle panel-heading" data-toggle="collapse" data-target="#<%= facet_field_id(facet_field) %>">
-    <h5 class="panel-title facet-field-heading">
-
+    <h3 class="panel-title facet-field-heading">
       <%= link_to facet_field_label(facet_field.key), "#", :"data-no-turbolink" => true %>
-    </h5>
+    </h3>
   </div>
   <div id="<%= facet_field_id(facet_field) %>" class="panel-collapse facet-content <%= should_collapse_facet?(facet_field) ? 'collapse' : 'in' %>">
     <div class="panel-body">

diff --git a/app/views/catalog/_facets.html.erb b/app/views/catalog/_facets.html.erb
@@ -10,10 +10,9 @@
       <span class="icon-bar"></span>
     </button>
 
-  <h4 class='facets-heading'>
-
+  <h2 class='facets-heading'>
   	<%= t('blacklight.search.facets.title') %>
-  </h4>
+  </h2>
     </div>
 
   <div id="facet-panel-collapse" class="collapse panel-group">

diff --git a/app/views/catalog/_home_text.html.erb b/app/views/catalog/_home_text.html.erb
@@ -1,17 +1,16 @@
 <div class="page-header row">
-  <h1 class="col-md-8 page-heading"><%= t('blacklight.welcome') %></h1>
+  <h2 class="col-md-8 page-heading"><%= t('blacklight.welcome') %></h2>
 
   <ul class="nav nav-pills col-md-4">
     <li><a href="https://github.com/projectblacklight/blacklight/">Github</a></li>
     <li><a href="https://github.com/projectblacklight/blacklight/wiki">Wiki</a></li>
     <li><a href="https://github.com/projectblacklight/blacklight/releases/tag/v<%= Blacklight::VERSION %>">Release Notes</a></li>
   </ul>
 
-
 </div>
 
 <div id="getting-started">
-  <h2 class='section-heading'>Here&rsquo;s how to get started:</h2>
+  <h3 class='section-heading'>Here&rsquo;s how to get started:</h3>
 
   <ol>
     <li>To modify this text, you need to <a href="http://guides.rubyonrails.org/engines.html#improving-engine-functionality">override the Blacklight-provided view</a>.

diff --git a/app/views/catalog/_index_header_default.html.erb b/app/views/catalog/_index_header_default.html.erb
@@ -9,14 +9,14 @@
     <%= render_index_doc_actions document, wrapping_class: "index-document-functions col-sm-3 col-lg-2" %>
   <% end %>
 
-  <h5 class="index_title document-title-heading <%= document_actions.present? ? "col-sm-9 col-lg-10" : "col-md-12" %>">
+  <h3 class="index_title document-title-heading <%= document_actions.present? ? "col-sm-9 col-lg-10" : "col-md-12" %>">
     <% if counter = document_counter_with_offset(document_counter) %>
       <span class="document-counter">
         <%= t('blacklight.search.documents.counter', counter: counter) %>
       </span>
     <% end %>
     <%= link_to_document document, document_show_link_field(document), counter: counter %>
-  </h5>
+  </h3>
 
   <%= document_actions %>
 </div>
diff --git a/app/views/saved_searches/index.html.erb b/app/views/saved_searches/index.html.erb
@@ -2,23 +2,22 @@
 
 <div id="content" class="col-md-9">
 
-<h1 class='page-heading'><%= t('blacklight.saved_searches.title') %></h1>
+<h2 class='page-heading'><%= t('blacklight.saved_searches.title') %></h2>
 
 <%- if current_or_guest_user.blank? -%>
 
-  <h2 class='section-heading'><%= t('blacklight.saved_searches.need_login') %></h2>
+  <h3 class='section-heading'><%= t('blacklight.saved_searches.need_login') %></h3>
 
 <%- elsif @searches.blank? -%>
 
-  <h2 class='section-heading'><%= t('blacklight.saved_searches.no_searches') %></h2>
+  <h3 class='section-heading'><%= t('blacklight.saved_searches.no_searches') %></h3>
 
 <%- else -%>
   <p>
   <%= link_to t('blacklight.saved_searches.clear.action_title'), clear_saved_searches_path, :method => :delete, :data => { :confirm => t('blacklight.saved_searches.clear.action_confirm') } %>
   </p>
 
-  <h2 class='section-heading'><%= t('blacklight.saved_searches.list_title') %></h2>
-
+  <h3 class='section-heading'><%= t('blacklight.saved_searches.list_title') %></h3>
   <table class="table table-striped">
   <%- @searches.each do |search| -%>
     <tr>

diff --git a/app/views/search_history/index.html.erb b/app/views/search_history/index.html.erb
@@ -1,9 +1,9 @@
 <% @page_title = t('blacklight.search_history.page_title', :application_name => application_name) %>
 
 <div id="content" class="col-md-12">
-<h1 class='page-heading'><%=t('blacklight.search_history.title')%></h1>
+<h2 class='page-heading'><%=t('blacklight.search_history.title')%></h2>
 <%- if @searches.blank? -%>
-  <h2 class='section-heading'><%=t('blacklight.search_history.no_history')%></h2>
+  <h3 class='section-heading'><%=t('blacklight.search_history.no_history')%></h3>
 <%- else -%>
     <%= link_to t('blacklight.search_history.clear.action_title'), clear_search_history_path, :method => :delete, :data => { :confirm => t('blacklight.search_history.clear.action_confirm') }, :class => 'btn btn-danger pull-right' %>
   <h3 class='section-heading'><%=t('blacklight.search_history.recent')%></h3>

diff --git a/config/locales/blacklight.en.yml b/config/locales/blacklight.en.yml
@@ -148,7 +148,7 @@ en:
         title: '%{constraints} - %{application_name} Search Results'
         constraint: '%{label}: %{value}'
         many_constraint_values: '%{values} selected'
-      search_results_header: 'Search'
+      search_results_header: 'Search Constraints'
       search_results: 'Search Results'
       errors:
         request_error: "Sorry, I don't understand your search."

diff --git a/spec/views/catalog/_facet_layout.html.erb_spec.rb b/spec/views/catalog/_facet_layout.html.erb_spec.rb
@@ -23,7 +23,7 @@
 
   it "should have a title with a link for a11y" do
     render partial: 'catalog/facet_layout', locals: { facet_field: facet_field }
-    expect(rendered).to have_selector 'h5 a', text: 'Some Field'
+    expect(rendered).to have_selector 'h3 a', text: 'Some Field'
   end
 
   it "should be collapsable" do