From: mmikitka <matt@mikitka.net>
Date: Wed, 26 Feb 2014 20:52:01 +0000 (-0500)
Subject: Topbar accessibility enhancements: enabled ability to tab through all menu links... 
X-Git-Tag: v5.2.1~5^2~12^2~22^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F4552%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Topbar accessibility enhancements: enabled ability to tab through all menu links by replacing display:none with the element-invisible mixin and display:block with the element-visible mixin
---

diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index 6ab852975..3146a4fd9 100644
--- 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 2a202b5f2..68117ece8 100644
--- 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();
             }
           }
         }