Merge pull request #144 from Shopify/updated-accessible-nav

Cleaned up accessible nav JS

Author: cshold

assets/shop.js.liquid

@@ -26,42 +26,78 @@ timber.accessibleNav = function () {
       allLinks = nav.find('a'),
       topLevel = nav.children('li').find('a'),
       parents = nav.find('.site-nav--has-dropdown'),
-      subMenus = nav.find('.site-nav--dropdown');
+      subMenus = nav.find('.site-nav--dropdown'),
+      subMenuLinks = subMenus.find('a'),
+      activeClass = 'nav-hover',
+      focusClass = 'nav-focus';
 
   // Mouseenter
-  parents.on('mouseenter', function() {
-    $(this).addClass('nav-hover');
+  parents.on('mouseenter touchstart', function(evt) {
+    var el = $(this);
+
+    if (!el.hasClass(activeClass)) {
+      evt.preventDefault();
+    }
+
+    showDropdown(el);
   });
 
   // Mouseout
-  parents.on('mouseout', function() {
-    $(this).removeClass('nav-hover');
+  parents.on('mouseleave', function() {
+    hideDropdown($(this));
   });
 
-  // Focus
-  allLinks.focus(function(e) {
+  subMenuLinks.on('touchstart', function(evt) {
+    // Prevent touchstart on body from firing instead of link
+    evt.stopImmediatePropagation();
+  });
+
+  allLinks.focus(function() {
     handleFocus($(this));
   });
 
-  // Blur
-  allLinks.blur(function(e) {
-    topLevel.removeClass('nav-focus');
+  allLinks.blur(function() {
+    removeFocus(topLevel);
   });
 
   // accessibleNav private methods
   function handleFocus (el) {
     var subMenu = el.next('ul');
-        hasSubMenu = subMenu.hasClass('site-nav--dropdown') ? true : false,
-        isSubItem = $('.site-nav--dropdown').has(el).length;
+        hasSubMenu = subMenu.hasClass('sub-nav') ? true : false,
+        isSubItem = $('.site-nav--dropdown').has(el).length,
+        newFocus = null;
 
     // Add focus class for top level items, or keep menu shown
     if ( !isSubItem ) {
-      topLevel.removeClass('nav-focus');
-      el.addClass('nav-focus');
+      removeFocus(topLevel);
+      addFocus(el);
     } else {
-      el.closest('.site-nav--has-dropdown').find('a').addClass('nav-focus');
+      newFocus = el.closest('.site-nav--has-dropdown').find('a');
+      addFocus(newFocus);
     }
+  }
+
+  function showDropdown (el) {
+    el.addClass(activeClass);
+
+    setTimeout(function() {
+      timber.cache.body.on('touchstart', function() {
+        hideDropdown(el);
+      });
+    }, 250);
+  }
+
+  function hideDropdown (el) {
+    el.removeClass(activeClass);
+    timber.cache.body.off('touchstart');
+  }
+
+  function addFocus (el) {
+    el.addClass(focusClass);
+  }
 
+  function removeFocus (el) {
+    el.removeClass(focusClass);
   }
 }
 

assets/timber.scss.liquid

@@ -1704,7 +1704,7 @@ label.error {
   left: 0;
   z-index: 5;
 
-  .site-nav--has-dropdown:hover &,
+  .supports-no-touch .site-nav--has-dropdown:hover &,
   .site-nav--has-dropdown.nav-hover &,
   .nav-focus + & {
     display: block;

config/settings_data.json

@@ -39,4 +39,4 @@
       "logo_use_image": false
     }
   }
-}
+}