Topbar accessibility enhancements: enabled ability to tab through all menu links...

diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index 6ab852975576ffa4e15c1d3e3dec6f92a6953d3f..3146a4fd9437e6c2066a0ecaa9edb148596a3daa 100644 (file)
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -173,6 +173,29 @@ $base-line-height: 150% !default;
   transform: translate($horizontal,$vertical)
 }
 
+// @mixins
+//
+// Makes an element visually hidden, but accessible.
+// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// @mixins
+//
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  height: auto;
+  width: auto;
+  overflow: visible;
+  clip: auto;
+}
+
 // We use these to control various global styles
 $body-bg: #fff !default;
 $body-font-color: #222 !default;

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 2a202b5f26bf850d7271c60495b28c4e7c5a31f6..68117ece8c423490d904745e6cdeb09d30d0df2f 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -77,6 +77,19 @@ $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness:
 $topbar-sticky-class: ".sticky" !default;
 $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
 
+// Accessibility mixins for hiding and showing the menu dropdown items
+@mixin topbar-hide-dropdown {
+  // Makes an element visually hidden by default, but visible when focused.
+  display: block;
+  @include element-invisible();
+}
+
+@mixin topbar-show-dropdown {
+  display: block;
+  @include element-invisible-off();
+  position: absolute !important; // Reset the position from static to absolute
+}
+
 @include exports("top-bar") {
   // Used to provide media query values for javascript components.
   // This class is generated despite the value of $include-html-top-bar-classes
@@ -371,7 +384,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         &.moved { position: static;
           & > .dropdown {
-            display: block;
+            @include topbar-show-dropdown();
+            width: 100%;
           }
           & > a:after {
             display: none;
@@ -384,8 +398,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         position: absolute;
         #{$default-float}: 100%;
         top: 0;
-        display: none;
         z-index: 99;
+        @include topbar-hide-dropdown();
 
         li {
           width: 100%;
@@ -508,12 +522,14 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           }
 
           &.moved { position: relative;
-            & > .dropdown { display: none; }
+            & > .dropdown {
+              @include topbar-hide-dropdown();
+            }
           }
 
           &.hover, &.not-click:hover {
             & > .dropdown {
-              display: block;
+              @include topbar-show-dropdown();
             }
           }
 
@@ -523,7 +539,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
                 border: none;
                 content: "\00bb";
                 top: 1rem;
-                margin-top: -2px;
+                margin-top: -7px;
                 #{$opposite-direction}: 5px;
                 line-height: 1.2;
               }
@@ -614,7 +630,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         .has-dropdown {
           &:hover {
             & > .dropdown {
-              display: block;
+              @include topbar-show-dropdown();
             }
           }
         }