Merge pull request #43 from govCMS/feature/accessibility-combined

Feature/accessibility combined

.gitignore

@@ -0,0 +1,2 @@
+assets/uikit
+node_modules

assets/js/back_to_top.js

@@ -7,24 +7,25 @@
 
   Drupal.behaviors.govcms8_uikit_starter_BackToTop = {
     attach: function (context, settings) {
-      var backToTop = $("#back-to-top button");
+      var $body = $('body, html');
+      var backToTop = $('.back-to-top__link', context);
 
       // Toggle class on backToTop.
-      $(function () {
-        $(window).scroll(function () {
-          if ($(this).scrollTop() > 250) {
-            backToTop.addClass('is-visible');
-          } else {
-            backToTop.removeClass('is-visible');
-          }
-        });
+      $(window).scroll(function () {
+        if ($(this).scrollTop() > 250) {
+          backToTop.addClass('is-visible');
+        } else {
+          backToTop.removeClass('is-visible');
+        }
       });
 
       // Scroll smoothly to top on click.
       backToTop.click(function (event) {
-        $('body,html').animate({
+        $body.animate({
           scrollTop: 0
-        }, 800);
+        }, 800, function () {
+          $body.attr('tabindex','-1').focus().removeAttr('tabindex');
+        });
         event.preventDefault();
       });
 

assets/scss/components/header/_header.scss

@@ -7,7 +7,17 @@
 
 // Logo and search box should be aligned.
 .header--vertical-align {
-  display: flex;
-  align-items: center;
-}
+  @include AU-media(xs) {
+    display: flex;
+    align-items: center;
+  }
+
+  .logo,
+  .search {
+    width: 100%;
 
+    @include AU-media(xs) {
+      width: 50%;
+    }
+  }
+}

assets/scss/components/header/_header_search.scss

@@ -0,0 +1,28 @@
+/**
+* Styling for header search form.
+ */
+
+@function magnifying-glass($color) {
+  $color-no-hash: unquote(str-slice(quote($color), 2));
+  @return url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210.5%22%20stroke%3D%22%23#{$color-no-hash}%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M21%2019L30%2028L28%2030L19%2021L21%2019Z%22%20fill%3D%22%23#{$color-no-hash}%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.search {
+  @include AU-space(margin-top, 1.6unit);
+
+  @include AU-media(xs) {
+    margin-top: 0;
+  }
+
+  .form-submit {
+    text-indent: -999px;
+    background-image: magnifying-glass($AU-color-background);
+    background-size: 24px;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .au-header--dark & {
+      background-image: magnifying-glass($AU-colordark-background);
+    }
+  }
+}

assets/scss/components/navigation/_back-to-top.scss

@@ -10,6 +10,7 @@
   transition: all 600ms ease-in-out;
   z-index: -1;
 
+  &:focus,
   &.is-visible {
     opacity: 1;
     transition: all 300ms ease-in-out;

assets/scss/components/navigation/_main_nav.scss

@@ -0,0 +1,6 @@
+/**
+* Main menu styling for default and alt style.
+*/
+.au-main-nav {
+  @include AU-space(margin-top, 1.6unit);
+}

assets/scss/components/search/_search.scss

@@ -23,7 +23,7 @@ form#views-exposed-form-content-search-page-1 {
 
   .form-text {
     @include AU-fontgrid( xs, nospace );
-    @include AU-space( padding, 0.8unit 2unit 0.8unit 1unit );
+    @include AU-space( padding, 0.8unit 1unit 0.8unit 1unit );
     @include AU-space( border-top-right-radius, 0 );
     @include AU-space( border-bottom-right-radius, 0 );
     appearance: none;
@@ -34,6 +34,7 @@ form#views-exposed-form-content-search-page-1 {
     display: block;
     margin: 0;
     width: 100%;
+    min-width: 100%;
 
     @include AU-media( sm ) {
       @include AU-fontgrid( sm, nospace);
@@ -44,27 +45,27 @@ form#views-exposed-form-content-search-page-1 {
     }
 
     &::placeholder {
-      color: $AU-color-foreground-muted-suggestion;
+      color: $AU-color-foreground-muted;
       opacity: 1;
     }
 
     &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $AU-color-foreground-muted-suggestion;
+      color: $AU-color-foreground-muted;
       opacity: 1;
     }
 
     &::-moz-placeholder { /* Firefox 19+ */
-      color: $AU-color-foreground-muted-suggestion;
+      color: $AU-color-foreground-muted;
       opacity: 1;
     }
 
     &:-ms-input-placeholder { /* IE 10+ */
-      color: $AU-color-foreground-muted-suggestion;
+      color: $AU-color-foreground-muted;
       opacity: 1;
     }
 
     &:-moz-placeholder { /* Firefox 18- */
-      color: $AU-color-foreground-muted-suggestion;
+      color: $AU-color-foreground-muted;
       opacity: 1;
     }
   }

assets/scss/components/table/_table.scss

@@ -9,13 +9,13 @@ table {
   }
 
   thead th {
-    border-bottom: 2px solid $AU-color-background-alt-shade-suggestion;
+    border-bottom: 2px solid $AU-color-background-alt-shade;
   }
 
   &.table-bordered {
     td,
     th {
-      border: 1px solid $AU-color-background-alt-shade-suggestion;
+      border: 1px solid $AU-color-background-alt-shade;
     }
 
     thead th {
@@ -44,7 +44,7 @@ table {
 
   &.table-striped tbody {
     tr:nth-child(odd) {
-      background: $AU-color-background-alt-suggestion;
+      background: $AU-color-background-alt;
     }
 
     tr:nth-child(even) {