Merge pull request #2217 from thostetler/some-a11y-fixes

Some accessibility updates

src/js/page_managers/templates/aria-announcement.html

@@ -1,20 +1,23 @@
 {{#compare page "SearchPage" }}
-<a href="#main-content" id="skip-to-main-content" class="sr-only sr-only-focusable" data-dont-handle="true">Skip to main content</a>
+<a
+  href="#main-content"
+  id="skip-to-main-content"
+  class="sr-only sr-only-focusable"
+  data-dont-handle="true"
+  >Skip to main content</a
+>
+{{/compare}} {{#compare page "DetailsPage" }}
+<a
+  href="#main-content"
+  id="skip-to-main-content"
+  class="sr-only sr-only-focusable"
+  data-dont-handle="true"
+  >Skip to main content</a
+>
 {{/compare}}
-{{#compare page "DetailsPage" }}
-<a href="#main-content"  id="skip-to-main-content" class="sr-only sr-only-focusable" data-dont-handle="true">Skip to main content</a>
-{{/compare}}
-
-<div id="aria-announcement-container">
-    Now on
-    {{#compare page "LandingPage" }}
-    home page
-    {{/compare}}
-    {{#compare page "SearchPage" }}
-    search results page
-    {{/compare}}
-    {{#compare page "DetailsPage" }}
-    article abstract page
-    {{/compare}}
 
+<div id="aria-announcement-container" role="status">
+  Now on {{#compare page "LandingPage" }} home page {{/compare}} {{#compare page
+  "SearchPage" }} search results page {{/compare}} {{#compare page "DetailsPage"
+  }} article abstract page {{/compare}}
 </div>

src/js/widgets/navbar/template/navbar.html

@@ -9,7 +9,8 @@
                 <span class="icon-bar" aria-hidden="true"></span>
             </button>
             {{#unless hourly}}
-            <a class="navbar-brand s-navbar-brand" href="#"><img class="s-ads-icon" src="/styles/img/transparent_logo.svg" alt="ads icon"/>
+            <a class="navbar-brand s-navbar-brand" href="#">
+                <img class="s-ads-icon" src="/styles/img/transparent_logo.svg" alt="Astrophysics Data System Home Page"/>
                 <h1 style="font-weight: bold;">ads</h1>
             </a>
             {{else}}

src/js/widgets/paper_search_form/form.html

@@ -1,6 +1,6 @@
 <div class="row" style="margin-bottom: 15px">
   <div class="col-sm-12 well well-default">
-    <form class="form-horizontal" role="form" data-form-type="journal">
+    <form class="form-horizontal" data-form-type="journal">
       <legend>Journal Search</legend>
       <div class="col-sm-12">
         <div class="form-group help-block">
@@ -60,11 +60,12 @@
       </button>
     </form>
   </div>
+  <div class="error-container" role="alert"></div>
 </div>
 
 <div class="row" style="margin-bottom: 15px">
   <div class="well well-default col-sm-12">
-    <form class="form-horizontal" role="form" data-form-type="reference">
+    <form class="form-horizontal" data-form-type="reference">
       <legend>Reference Query</legend>
       <div class="col-sm-12">
         <div class="form-group">
@@ -91,11 +92,12 @@
       </button>
     </form>
   </div>
+  <div class="error-container" role="alert"></div>
 </div>
 
 <div class="row" style="margin-bottom: 15px">
   <div class="well well-default col-sm-12">
-    <form class="form-horizontal" role="form" data-form-type="bibcodes">
+    <form class="form-horizontal" data-form-type="bibcodes">
       <legend>Bibliographic Code Query</legend>
       <div class="col-sm-12">
         <div class="form-group">
@@ -124,4 +126,5 @@
       </button>
     </form>
   </div>
+  <div class="error-container" role="alert"></div>
 </div>

src/js/widgets/paper_search_form/widget.js

@@ -126,11 +126,11 @@ define([
       // show an error message, and then remove it next time the user focuses on an input
       const $el = $(this.el);
       const $submittedContainer = $('form.submitted', $el).closest('.row');
-      $(`
-        <div class="alert alert-danger" id="error-message">
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <strong>${msg}</strong>
-        </div>
-      `).insertAfter($submittedContainer);
+      $('.error-container', $submittedContainer).html(`
+      <div class="alert alert-danger" id="error-message">
+        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <strong>Error: ${msg}</strong>
+      </div>
+    `);
       this.setFormDisabled(false);
       $('input, textarea, button', $el).one('focus', () => {
         $('#error-message', $el).remove();

src/js/widgets/resources/components/app.jsx.js

@@ -41,6 +41,7 @@ define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
                     g.open ? 'unlock' : ''
                   }`}
                 >
+                  <span className="sr-only">{g.description}</span>
                   {g.type === 'PDF' && (
                     <i className="fa fa-file-pdf-o" aria-hidden="true" />
                   )}

src/js/widgets/search_bar/templates/search_bar_template.html

@@ -61,7 +61,13 @@ <h2 class="sr-only">Search Bar to Enter New Query</h2>
   </div>
 </div>
 <div class="row">
-  <div class="s-num-found">
+  <div class="s-num-found" role="status" aria-atomic="true" aria-labelledby="num-found-title">
+    <div class="sr-only" id="num-found-title">
+      Your search returned {{numFound}} results
+      {{#if citationCount}}
+      with {{citationCount}} total {{citationLabel}}
+      {{/if}}
+    </div>
     <span class="s-light-font description">Your search returned</span>
       <span class="num-found-container" style="font-weight: bold;">{{numFound}}</span>
       <span class="s-light-font"> results </span>

src/js/widgets/tabs/templates/tabs_title.html

@@ -1 +1,3 @@
-<li class="{{#if default}} active {{/if}}"> <a href="#{{id}}" data-toggle="tab"> <h5>{{title}}</h5></a></li>
+<li class="{{#if default}} active {{/if}}">
+  <a href="#{{id}}" data-toggle="tab"> <h3 class="h5">{{title}}</h3></a>
+</li>