Merge pull request #134 from joelcollinsdc/129-a11y

Accessibility changes

smartsearch/templates/smartsearch/search_panel.html

@@ -434,8 +434,8 @@ <h3>{% firstof heading "Search" %}</h3>
                 <label for="searchform_field_{{field.field_name}}" style="margin: 0;">{% if field.label %}{{field.label}}{% else %}{{field.field_name}}{% endif %}</label>
 				{% endif %}
                 {% if field.type == "text" %}
-                    <input id="searchform_field_{{field.field_name}}" name="{{field.field_name}}" type="text" class="text with_search_button" onchange="$('#show_more').hide()" style="width: 65%; margin-right: 5px;"> </input>
-                    <input id="searchform_field_{{field.field_name}}_button" class="btn-search-small" type="submit" value="Search" value="Go" onclick="update_search()"> </input>
+                    <input id="searchform_field_{{field.field_name}}" name="{{field.field_name}}" type="text" class="text with_search_button" onchange="$('#show_more').hide()" style="width: 65%; margin-right: 5px;">
+                    <input id="searchform_field_{{field.field_name}}_button" class="btn-search-small" type="submit" value="Search" onclick="update_search()">
                     	{% comment %}when the text value changes, hide Show More so that we don't try to access a later page on a different search query than what we've loaded so far{% endcomment %}
                 {% elif field.type == "select" %}
                     <select id="searchform_field_{{field.field_name}}" name="{{field.field_name}}" size="1" onchange="update_search()" style="width: 100%"> </select>

static/css/all.css

@@ -91,8 +91,7 @@ h2 {
 	}
 	#content h2 {
 		border-bottom: 1px solid #1D4E70;
-		font-size: 14px;
-		margin: 1.85em 0 1.25em 0;
+		margin: 1em 0;
 	}
 		#content h2 span {
 			display: inline-block;
@@ -192,7 +191,7 @@ blockquote {
 		#masthead .nav a {
 			color: inherit;
 		}
-		#masthead .nav a:hover, #masthead .nav a:focus {
+		#masthead .nav a:hover, #masthead .nav a:focus, #masthead .nav .open>a {
 			background-color: #258;
 			color: white;
 		}
@@ -202,7 +201,7 @@ blockquote {
 		#masthead .dropdown-menu {
 			margin-top: -2px;
 		}
-		#masthead .dropdown-menu a:hover {
+		#masthead .dropdown-menu a:hover, #masthead .dropdown-menu a:focus {
 			color: black;
 		}
 		#masthead .navbar-toggle {
@@ -1107,3 +1106,35 @@ ul.singlesignon {
 		.sidebar-events h2:first-child {
 			margin-top: -10px;
 		}
+
+/* A11y Changes, merge? */
+
+/* skiptocontent from http://webaim.org/techniques/skipnav/ */
+#skiptocontent a {
+	padding:6px;
+	position: absolute;
+	top:-40px;
+	left:0px;
+	color:white;
+	border-right:1px solid white;
+	border-bottom:1px solid white;
+	border-bottom-right-radius:8px;
+	background:transparent;
+	-webkit-transition: top 1s ease-out, background 1s linear;
+    transition: top 1s ease-out, background 1s linear;
+    z-index: 100;
+}
+
+#skiptocontent a:focus {
+	position:absolute;
+	left:0px;
+	top:0px;
+	background:#BF1722;
+	outline:0;	
+	-webkit-transition: top .1s ease-in, background .5s linear;
+    transition: top .1s ease-in, background .5s linear;
+}
+
+.nowrap {
+	white-space: nowrap;
+}

templates/bill/bill_details.html

@@ -20,11 +20,11 @@
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="{{bill.title}}">
 	{% if subtitle %}<meta name="twitter:description" content="{{subtitle}}">{% endif %}
-	<meta name="twitter:label1" value="Current Status">
-	<meta name="twitter:data1" value="{{bill.get_current_status_display}}">
+	<meta name="twitter:label1" content="Current Status">
+	<meta name="twitter:data1" content="{{bill.get_current_status_display}}">
 	{% if bill.sponsor %}
-		<meta name="twitter:label2" value="Sponsor">
-		<meta name="twitter:data2" value="{{bill.sponsor.name}}">
+		<meta name="twitter:label2" content="Sponsor">
+		<meta name="twitter:data2" content="{{bill.sponsor.name}}">
 	{% endif %}
 {% endblock %}
 
@@ -629,7 +629,7 @@ <h2><span>History</span></h2>
 					<tr class="status-item {% if not item.date or item.different_congress %}pending{% endif %} {% if item.bill %}related-bill{% endif %}">
 						<td class="date {% if forloop.last %}last{% endif %} {% if item.last_occurred or not item.date or item.different_congress %}ghosted{% endif %}">
 							<div class="wrapper">
-								{% if item.date %}<nobr>{{item.date|date:"DATE_FORMAT"}}</nobr>{% endif %}
+								{% if item.date %}<span class="nowrap">{{item.date|date:"DATE_FORMAT"}}</span>{% else %}Pending{% endif %}
 							</div>
 						</td>
 						<td>
@@ -780,7 +780,7 @@ <h3 style="margin: 0 0 5px 0; font-weight: bold;">
 {% with bill.get_prognosis as p %}
 {% if p %}
 <div id="prognosis-details" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="prognosis-details-title" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

templates/bill/bill_docket.html

@@ -87,7 +87,7 @@ <h1 style="margin-top: 30px; border: none">Bills and Resolutions</h1>
 			{% for bill in coming_up %}
 				<tr>
 				<td>
-                  <nobr>{{bill.scheduled_consideration_date|date}}</nobr>
+                  <span style="nowrap">{{bill.scheduled_consideration_date|date}}</span>
                   {% if bill.docs_house_gov_postdate and not bill.senate_floor_schedule_postdate %}<div><small>(week of)</small></div>{% endif %}
                 </td>
 				<td>
@@ -109,10 +109,11 @@ <h1 style="margin-top: 30px; border: none">Bills and Resolutions</h1>
 	{% endif %}
 
 	<div id="find" class="tab-pane {% if coming_up|length == 0 %}active{% endif %}">
+		<h2>Find a Bill</h2>
 		<div class="row">
 			<div class="col-sm-7">
 			<div style="padding-right: 30px">
-				<p style="margin-top: 30px">
+				<p>
 					{% if 5000 > total %}
 					Each year the United States Congress considers about 5,000 bills and resolutions,
 					{% else %}
@@ -126,14 +127,14 @@ <h1 style="margin-top: 30px; border: none">Bills and Resolutions</h1>
 				<p>Because there are so many bills and resolutions, it can be difficult to find the one you are looking for. Please consider your options:</p>
 
 
-				<h2><span>Suggested ways to find a bill</span></h2>
+				<h3><span>Suggested ways to find a bill</span></h3>
 
 				<p>Start by using the <b>subject areas</b> listed on this page.</p>
 
 				<p>Or use our <a href="/congress/bills/browse">advanced search</a> to find bills by status, subject area, sponsor, or other fields.</p>
 
 
-				<h2><span>Search for bills whose text contains a keyword</span></h2>
+				<h3><span>Search for bills whose text contains a keyword</span></h3>
 
 				<form method="get" action="/congress/bills/browse" class="clearfix" style="margin-bottom: 1em">
 					<input type="text" placeholder="search query" style="max-width: 75%; height: 25px; float: left;" name="text"/>
@@ -142,14 +143,14 @@ <h2><span>Search for bills whose text contains a keyword</span></h2>
 
 				<p>Since bills often contain legal terminology in place of everyday words, it is often easier to find a bill using one of the other methods above.</p>
 
-				<h2><span>Advanced tools</span></h2>
+				<h3><span>Advanced tools</span></h3>
 
 				<p>Browse bills <a href="/congress/bills/uscode">by the section of the United States Code</a> they refer to.</p>
 			</div>
 			</div>
 
 			<div class="col-sm-5">
-				<h2><span>Subject areas</span></h2>
+				<h3><span>Subject areas</span></h3>
 
 		<div id="subject_list">
 		{% for topterm, subterms in subjects %}
@@ -171,10 +172,11 @@ <h2><span>Subject areas</span></h2>
 	</div>
 
 	<div id="get-alerts" class="tab-pane">
+		<h2>Get Alerts</h2>
 		<div class="row">
 			<div class="col-sm-6">
 			<div style="padding-right: 30px">
-				<h2><span>Basic alerts</span></h2>
+				<h3><span>Basic alerts</span></h3>
 				<ul id="basic_trackers" style="padding: 0">
 					{% for feed in feeds %}
 					<li onclick="window.location='{{feed.link}}'">
@@ -186,7 +188,7 @@ <h2><span>Basic alerts</span></h2>
 			</div>
 			</div>
 			<div class="col-sm-6">
-				<h2><span>Other ways to get alerts</span></h2>
+				<h3><span>Other ways to get alerts</span></h3>
 
 				<p>There are many ways to get email alerts about bills in Congress from GovTrack.</p>
 
@@ -210,6 +212,7 @@ <h2><span>Advanced alerts</span></h2>
 	</div>
 
 	<div id="bystatus" class="tab-pane">	
+		<h2>All Bills</h2>
 		<p style="margin-top: 15px">Here is a breakdown of all {{total|intcomma}} bills and resolutions currently before Congress:</p>
 
 		{% for name, descr1, descr2, href, count, queryset in groups %}
@@ -242,7 +245,7 @@ <h3>Historical Information</h3>
 
 	<div id="hot" class="tab-pane">
 		{% if trending_bill_feeds|length > 0 %}
-		<h3>Trending now:</h3>
+		<h2>Trending now:</h2>
 		<div style="margin-bottom: 1.5em">
 		{% for f in trending_bill_feeds %}
 			<div style="margin-bottom: .5em;">
@@ -252,7 +255,7 @@ <h3>Trending now:</h3>
 		</div>
 		{% endif %}
 
-		<h3>Top bills tracked by GovTrack users:</h3>
+		<h2>Top bills tracked by GovTrack users:</h2>
 		<div id="top_tracked_bills">
 		{% for bill, count in top_tracked_bills %}
 			<div style="margin-bottom: .5em;">

templates/bill/bill_statistics.html

@@ -105,7 +105,7 @@ <h2>Bills by Final Status</h2>
 			<tr>
 				<td style="padding: 0 1em 1em 0">
 					<b>{{cong.congress|ordinalhtml}}</b>
-					<div style="font-size: 90%; color: #777"><nobr>{{cong.dates.0|date}}</nobr><br/> <nobr>-{% if forloop.first %}present{% else %}{{cong.dates.1|date}}{% endif %}</nobr></div>
+					<div style="font-size: 90%; color: #777"></span>{{cong.dates.0|date}}</span><br/> <span class="nowrap">-{% if forloop.first %}present{% else %}{{cong.dates.1|date}}{% endif %}</span></div>
 				</td>
 				{% for c in cong.counts %}
 					<td style="padding-right: 1em; text-align: center;">

templates/bill/subject.html

@@ -47,7 +47,7 @@ <h1>{{term.name}}</h1>
 
 
 <div id="subterms_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="subterms_modal_title" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

templates/committee/committee_details.html

@@ -63,17 +63,18 @@
 				{% endfor %}
 			</dl>
 
-			<p style="line-height: 110%"><small>
+
 			{% if member_highlights|length > 0 %}
-			The chair is always selected from the majority party and the ranking member is the most senior member of the minority party.
+			<p style="line-height: 110%"><small>The chair is always selected from the majority party and the ranking member is the most senior member of the minority party.</small></p>
 			{% endif %}
 			{% if party_counts|length > 0 and committee.code != "HSSO" %}
-			The majority party ensures it has a majority on every committee.
+			<p style="line-height: 110%"><small>The majority party ensures it has a majority on every committee.</small></p>
 			{% endif %}
 
 			{% if members|length == 0 %}
 			<p>The membership of this committee is not yet available.</p>
 			{% endif %}
+
 	</div>
 
 
@@ -99,6 +100,7 @@
 	<div class="tab-content">
 		{% if members|length > 0 %}
 		<div id="members" class="tab-pane active members-grid">
+			<h2>Members</h2>
 		    <div class="row">
 	        {% for member in members %}
 		        {% if forloop.counter0|divisibleby:6 %}<div class="clearfix visible-md"></div><div class="clearfix visible-lg"></div>{% endif %}
@@ -107,7 +109,7 @@
 		        <div class="member col-xs-6 col-sm-3 col-md-2">
 
 		            <div class="photo">
-	            		<a href="{{ member.person.get_absolute_url }}"><img src="{{ member.person.get_photo_url_100 }}" width="100" height="120"/></a>
+	            		<a href="{{ member.person.get_absolute_url }}"><img src="{{ member.person.get_photo_url_100 }}" width="100" height="120" alt="Portrait of {{ member.person.name_no_details }}"/></a>
 	            	</div>
 
 		            {% with member.person.get_current_role as role %}
@@ -149,6 +151,7 @@ <h5><a href="{{ member.person.get_absolute_url }}" class="plain">{{ member.perso
 		{% endif %}
 
 		<div id="activity" class="tab-pane {% if members|length == 0 %}active{% endif %}">
+				<h2>Bills</h2>
 				{% if committee.has_current_bills %}
 					{% with committee.current_bills_sorted as current_bills_sorted %}
 					<p>There are <a href="/congress/bills/browse#committees={{committee.id}}">{{current_bills_sorted.count|intcomma}} bills referred to this {% if parent %}sub{% endif %}committee</a>{% if current_bills_sorted.count > 100 %}. Below find the top 100{% endif %}:</p>
@@ -173,11 +176,12 @@ <h5><a href="{{ member.person.get_absolute_url }}" class="plain">{{ member.perso
 
 		{% if subcommittees %}
 		<div id="subcommittees" class="tab-pane active">
-				<ul class="bullets">
-					{% for item in subcommittees %}
-					<li><a href="{{ item.get_absolute_url }}">{{ item.name_no_article }}</a></li>
-					{% endfor %}
-				</ul>
+			<h2>Subcommittees</h2>
+			<ul class="bullets">
+				{% for item in subcommittees %}
+				<li><a href="{{ item.get_absolute_url }}">{{ item.name_no_article }}</a></li>
+				{% endfor %}
+			</ul>
 		</div>
 		{% endif %}
 	</div><!-- /panes -->

templates/events/subscribe_inline.html

@@ -144,7 +144,7 @@
 </script>
 
 <div class="modal fade" id="track_panel" tabindex="-1" role="dialog" aria-labelledby="track_panel_ModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

templates/master.html

@@ -3,7 +3,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -57,6 +57,8 @@
 
 	<div id="bodybody">
 
+	<div id="skiptocontent"><a href="#maincontent">skip to main content</a></div>
+
 	<div id="masthead">
 	<nav class="navbar">
 	  <div class="container">
@@ -194,7 +196,7 @@
 	{% endblock %}
 
 	{% block body_with_container %}
-		<div class="container">
+		<div id="maincontent" class="container">
 			<div id="content">
 				{% block body %}
 				{% endblock %}
@@ -248,17 +250,16 @@ <h4><span>follow</span> GovTrack</h4>
 				</section>
 
 			</div>
-			</p>
+			</div>
 		</footer>
 
-	</div><!-- /wrapper -->
 
     <div id="error_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true">
-      <div class="modal-dialog">
+      <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title" id="errorModalTitle"> </h4>
+            <h4 class="modal-title" id="errorModalTitle">[error message]</h4>
           </div>
           <div class="modal-body">
           </div>

templates/master_a.html

@@ -3,13 +3,25 @@
 {% block body_with_container %}
 <div class="container">
 	<div class="row">
-		<div id="master-a-sidebar" class="col-sm-4 col-sm-push-8" style="font-size: 90%; color: #555;">
+
+
+		<div id="maincontent" class="col-sm-8">
+			{% block summary %}
+			{% endblock %}
+
+			<div id="content">
+				{% block body %}
+				{% endblock %}
+			</div>
+		</div><!-- /summary-box -->
+
+		<div id="master-a-sidebar" class="col-sm-4" style="font-size: 90%; color: #555;">
 			<div class="hidden-xs sidebar-events" style="margin-top: -1em">
 
 			<h2 class="sr-only">Follow GovTrack on social media for more updates:</h2>
 			<p class="hide-sr">Follow GovTrack on social media for more updates:</p>
 			<p>
-			<a href="https://www.facebook.com/govtrack/" title="Facebook Page"><i class="fa fa-facebook fa-fw"></i><span class="sr-only">Visit us on Facebook</span></a></li>
+			<a href="https://www.facebook.com/govtrack/" title="Facebook Page"><i class="fa fa-facebook fa-fw"></i><span class="sr-only">Visit us on Facebook</span></a>
 			<a href="http://twitter.com/govtrack" title="Twitter Page"><i class="fa fa-twitter fa-fw"></i><span class="sr-only">Visit us on Twitter</span></a>
 			<a href="https://medium.com/govtrack-insider" title="Medium Page"><i class="fa fa-medium fa-fw"></i><span class="sr-only">Visit us on Medium</span></a>
 			<a href="https://github.com/govtrack/govtrack.us-web" title="Github"><i class="fa fa-github-alt fa-fw"></i><span class="sr-only">Visit us on Github</span></a>
@@ -55,16 +67,6 @@ <h2 class="sr-only">Follow GovTrack on social media for more updates:</h2>
 			</div>
 			{% endcomment %}
 		</div>
-
-		<div class="col-sm-8 col-sm-pull-4">
-			{% block summary %}
-			{% endblock %}
-
-			<div id="content">
-				{% block body %}
-				{% endblock %}
-			</div>
-		</div><!-- /summary-box -->
 	</div> <!-- /row -->
 </div> <!-- /container -->