Merge pull request #87 from 18F/584-accessbility-improvements

584 accessbility improvements
fecgov · Apr 24, 2015 · d65c8c5 · d65c8c5
2 parents 91559f3 + 2839177
commit d65c8c5
Show file tree

Hide file tree

Showing 20 changed files with 337 additions and 603 deletions.
diff --git a/static/js/init.js b/static/js/init.js
@@ -64,14 +64,22 @@ $(document).ready(function() {
     }
 
     // General reveal / disclosure 
-    $('.js-reveal').click(function(){
-        var revealElement = $(this).data('reveals');
-        $('#' + revealElement).attr('aria-hidden', false);
+    $('.js-reveal').on('click keypress', function(e){
+        if (e.which === 13 || e.type === 'click') {
+            var revealElement = $(this).data('reveals');
+            $('#' + revealElement).attr('aria-hidden', false);
+            // Set focus to the first input
+            $('#' + revealElement + ' input:first-of-type').focus();
+        }
     });
 
-    $('.js-hide').click(function(){
-        var hideElement = $(this).data('hides');
-        $('#' + hideElement).attr('aria-hidden', true);
+    $('.js-hide').on('click keypress', function(e){
+        if (e.which === 13 || e.type === 'click') {
+            var hideElement = $(this).data('hides');
+            $('#' + hideElement).attr('aria-hidden', true);
+            // Set focus back on the original triggering element
+            $('.js-reveal[data-reveals="' + hideElement + '"]').focus();
+        }
     })
 
     // Notice close-state persistence    
@@ -83,9 +91,11 @@ $(document).ready(function() {
         }
     }
 
-    $("#notice-close").click(function(){
-        if (typeof window.sessionStorage !== 'undefined') {
-            window.sessionStorage.setItem('keep-banner-closed', '1');
+    $("#notice-close").on('click keypress', function(e){
+        if (e.which === 13 || e.type === 'click') {
+            if (typeof window.sessionStorage !== 'undefined') {
+                window.sessionStorage.setItem('keep-banner-closed', '1');
+            }            
         }
     });
 

diff --git a/static/js/modules/glossary.js b/static/js/modules/glossary.js
@@ -30,7 +30,7 @@ indexToLowercase = function(arrayOfObjects, index){
 terms = indexToLowercase(terms, 'term');
 
 // Adding title to all terms
-$('.term').attr('title', 'Click to define');
+$('.term').attr('title', 'Click to define').attr('tabindex', 0);
 
 // Looks through the terms array to find the definition
 // Returnes a definedTerm object
@@ -97,11 +97,13 @@ clearTerm = function() {
 
 module.exports = {
   init: function(){
-    glossaryLink.click(function(){
-        var dataTerm = $(this).data('term'),
-            definedTerm = findDefinition(dataTerm);
-        showGlossary();
-        setDefinition(definedTerm);    
+    glossaryLink.on('click keypress', function(e){
+        if (e.which === 13 || e.type === 'click') {
+            var dataTerm = $(this).data('term'),
+                definedTerm = findDefinition(dataTerm);
+            showGlossary();
+            setDefinition(definedTerm); 
+        }
     })
 
     $('#glossary-toggle, #hide-glossary').click(function(){

diff --git a/static/styles/_base/_buttons.scss b/static/styles/_base/_buttons.scss
@@ -28,7 +28,9 @@
   &:active,
   &:focus {
     @include appearance(none);
-    outline: none;
+    outline: 3px solid $focus;
+    position: relative;
+    z-index: 10;
   }
 
   &.disabled {

diff --git a/static/styles/_base/_forms.scss b/static/styles/_base/_forms.scss
@@ -64,9 +64,7 @@ select[multiple=multiple] {
   }
 
   &:focus {
-    border-color: $form-border-color-focus;
-    box-shadow: $form-box-shadow-focus;
-    outline: none;
+    outline: 3px solid $focus;
   }
 }
 
@@ -100,15 +98,15 @@ select {
   @include clearfix();
 
   #{$all-text-inputs} {
-    border-radius: 4px;
+    border-radius: $base-border-radius;
     width: 100%;
     margin: 0 0 .5rem 0;
   }
 
   input[type="submit"],
   button,
   .button {
-    border-radius: 4px;
+    border-radius: $base-border-radius;
     width: 100%;
     margin: 0;
   }
@@ -118,7 +116,7 @@ select {
       width: 75%;
       float: left;
       margin: 0;
-      border-radius: 4px 0 0 4px;
+      border-radius: $base-border-radius 0 0 $base-border-radius;
       border-right: none;
     }
 
@@ -128,7 +126,7 @@ select {
       @include rem(height, 4.0rem);
       width: 25%;
       float: left;
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 $base-border-radius $base-border-radius 0;
     }    
   }
 }

diff --git a/static/styles/_base/_typography.scss b/static/styles/_base/_typography.scss
@@ -104,7 +104,11 @@ a {
   }
 
   &:active, &:focus {
-    color: $hover-link-color;
+    background: $focus;
+    color: #000;
+    // border-bottom: 2px solid $base-link-color;
+    // outline: none;
+    outline: 3px solid $focus;
   }
 
   &.link--delete {
@@ -122,7 +126,7 @@ a {
       color: $green-2;
     }
   }
-}
+} 
 
 .link--icon {
   text-decoration: none; // Don't underline if there's an icon in the link

diff --git a/static/styles/_base/_variables.scss b/static/styles/_base/_variables.scss
@@ -9,7 +9,7 @@ $header-font-family: $base-font-family;
 $base-line-height: 1.5;
 $unitless-line-height: $base-line-height / ($base-line-height * 0 + 1); // Strip units from line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values
 $header-line-height: 1.25;
-$base-border-radius: em(4);
+$base-border-radius: 0;
 
 // Colors
 $dark-gray: #515A61;
@@ -20,6 +20,7 @@ $light-blue-gray: #BDC4CD;
 $light-red: #FBE3E4;
 $light-yellow: #FFF6BF;
 $light-green: #E6EFC2;
+$focus: #0DD16E;
 
 // FEC Colors
 $blue: #2678BA;

diff --git a/static/styles/_base/mixins/_mixins.scss b/static/styles/_base/mixins/_mixins.scss
@@ -130,3 +130,24 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+// White links
+// This is how to style links on dark backgrounds
+// Just @include this mixin in the parent element
+
+@mixin white-links() {
+
+  a {
+    color: #fff;
+  }
+
+  a:active,
+  a:focus {
+    color: #000;
+    outline: 3px solid $focus;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/static/styles/_components/_entity.scss b/static/styles/_components/_entity.scss
@@ -4,6 +4,10 @@
   @include rem(padding-top, 2.0rem);
 }
 
+.entity__header {
+  @include white-links();
+}
+
 .entity__name {
   @include font-size(3.1);
   font-weight: bold;

diff --git a/static/styles/_components/_header.scss b/static/styles/_components/_header.scss
@@ -31,13 +31,9 @@
 }
 
 .site-header {
+  @include white-links();
   background: $licorice-2;
   color: #fff;
-
-  a {
-    color: #fff;
-    text-decoration: underline;
-  }
 }
 
 .header-nav {
@@ -55,87 +51,119 @@
   float: left;
 }
 
-.header-nav__link {
-  @include rem(padding, 1.6rem 2rem);	
-  @include font-size(1.8);
-  @include rem(line-height, 2.4rem);
-  @include transition(background-color .1s);
-  text-align: center;
-  display: block;
-  text-decoration: none;
+.site-header {
+  .header-nav__link {
+    @include rem(padding, 1.6rem 2rem); 
+    @include font-size(1.8);
+    @include rem(line-height, 2.4rem);
+    @include transition(background-color .1s);
+    text-align: center;
+    display: block;
+    text-decoration: none;
 
-  &:hover,
-  &:active {
-    background: $licorice;
+    &:hover,
+    &:active {
+      background: $licorice;
+      color: #fff;
+      text-decoration: none;
+    }
+  } 
+
+  .header-nav__link:focus,
+  .header-brand:focus {
+    position: relative;
+    z-index: 9;
+    background: $licorice-2;
     color: #fff;
-    text-decoration: none;
-  }
+  }    
 }
 
+.header__left {
+  @include span-columns(20, block-collapse);
+}
+
+.header__right {
+  @include span-columns(4, block-collapse);
+}
 
 .header-brand {
+  @include span-columns(15 of 20, block-collapse);
   padding: 1rem 2rem;
   display: block;
   text-align: center;
   position: relative;
-  float: left;
-  width: 70%;
+}
+
+.site-header .side-toggle {
+  padding: 1.6rem 0;
 
   @include media($medium) {
     width: auto;
+    padding: 1.6rem 2rem;
   }
 }
 
-.site-header .side-toggle {
-  width: 15%;
-  padding: 1.6rem 0;
+#site-menu-toggle {
+  @include span-columns(4 of 20, block-collapse);
+  float: left;
 
   @include media($medium) {
+    display: none;
+  }
+}
+
+#glossary-toggle {
+  @include span-columns(8 of 8, block-collapse);
+  border-left: 1px solid $light-gray;
+  border-right: none;
+  float: right;
+}
+
+@include media($medium) {
+  .header__left {
+    @include span-columns(16 of 24, block-collapse);
+  }
+
+  .header__right {
+    @include span-columns(8 of 24, block-collapse);
+  }
+
+  .header-brand {
     width: auto;
-    padding: 1.6rem 2rem;
+    float: left;
+  }
+
+  #glossary-toggle {
+    @include span-columns(2 of 8, block-collapse);
   }
 }
 
 .header-search {
   @include clearfix();
   display: none; // Hiding on $small
-  padding: 1rem 2rem;
+  padding: 1rem 0;
   margin-right: 0;
-  float: right;
-  width: 340px;
+  float: left;
 
   input[type="text"],
   button {
-  	@include rem(height, 3.2rem);
+  	height: 3rem;
     margin-bottom: 0;
     border: none;
   }
 
   input[type="text"],
   .tt-dropdown-menu {
-  	width: 260px;
+  	width: 80%;
   }
 
   .search-submit {
-  	width: 40px;
+  	width: 20%;
   	padding: 0;
   }
 
   @include media($medium) {
+    @include span-columns(6 of 8);
     display: block;
   }
-}
-
-#site-menu-toggle {
-  float: left;
-
-  @include media($medium) {
-    display: none;
-  }
-}
-
-#glossary-toggle {
-  border-left: 1px solid $light-gray;
-  border-right: none;
-  float: right;
 }
diff --git a/static/styles/_components/_hero.scss b/static/styles/_components/_hero.scss
@@ -1,5 +1,6 @@
 // MODULE: Hero Unit
 .hero {
+  @include white-links();
   padding: 2rem 0;
   color: #fff;
   text-align: center;

diff --git a/static/styles/_components/_modals.scss b/static/styles/_components/_modals.scss
@@ -45,4 +45,8 @@
     left: 25%;
     background: none;
     color: #fff;
+
+    &:focus {
+        position: absolute;
+    }
 }