fix(component): megamenu accessibility

nav-link padding and outline on focus tabindex fix on go back function
Orange-OpenSource · Feb 2, 2017 · f0836cd · f0836cd
1 parent f5c3a75
commit f0836cd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -157,7 +157,7 @@ const MegaMenu = (($) => {
 
       // make only visible elements focusable
       $targetNav.find(Selector.NAV_LINK).attr({'tabindex': '0', 'aria-hidden': false})
-      if(currentTranslatePos === -100) {
+      if(currentTranslatePercentage === -100) {
           $rootNav.find('>.nav-item .nav-link').attr({'tabindex': '0', 'aria-hidden': false})
       }
 

diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -315,7 +315,7 @@
           }
 
           .nav-item {
-            padding: 1rem 0 1rem .625rem;
+            // padding: 1rem 0 1rem .625rem;
             margin-left: 0;
             font-size: $font-size-h5;
             line-height: 1;
@@ -354,15 +354,15 @@
 
           .nav-item > .nav-link {
             @include focus {
-              outline: 0;
+              outline-offset: -1px;
             }
 
-            padding: 0;
+            padding: 1rem 0 1rem .625rem;
             margin-top: 0;
           }
+
           .nav-item > .nav-link.icon {
             padding: .78125rem .625rem;
-            margin-top: 0;
           }
 
           .nav-item.dropdown {
@@ -395,11 +395,11 @@
           }
 
           .mega-menu > .navbar-nav > .nav-item {
-            padding: 1rem 0 0;
+            // padding: 1rem 0 0;
           }
 
           .mega-menu > .navbar-nav > .nav-item > .nav-link {
-            margin: 0 0 1rem .625rem;
+            // margin: 0 0 1rem .625rem;
           }
 
           .mega-menu .nav-link[data-toggle="collapse"]::before {