DP-23086 A11y when org search is not shown, it should be fully hidden for all users

packages/assets/scss/03-organisms/_organization-navigation-item.scss

@@ -6,10 +6,8 @@
     position: relative;
     padding: 0 20px;
     margin-bottom: 0;
-    order: 2;
 
     @media ($bp-large-min) {
-      order: 1;
       display: flex;
       padding: 0;
       border-bottom: 0;

packages/assets/scss/03-organisms/_organization-navigation.scss

@@ -20,7 +20,7 @@ $menu-transition-time: 0.3s;
     left: 0;
     width: 100%;
     margin-top: 0;
-    z-index: $z-dropdown;
+    z-index: $z-modal;
 
     .show-menu & {
       opacity: 0;
@@ -150,13 +150,11 @@ $menu-transition-time: 0.3s;
 
   &__search {
     border-bottom: 1px solid $c-gray-light;
-    order: 1;
     padding: 20px;
 
     @media ($bp-large-min) {
       display: flex;
       flex-direction: row-reverse;
-      order: 2;
       border-bottom: 0;
       padding: 0;
 

packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig

@@ -1,5 +1,5 @@
 <nav class="ma__organization-navigation" aria-label="{{ organizationNavigation.orgNavTitle }}">
- <div class="ma__organization-navigation__mobile-toggle">
+ <div class="ma__organization-navigation__mobile-toggle" tabindex="0">
       <span class="mobile-toggle-label">{{ organizationNavigation.orgNavTitle }}</span>
       <span class="mobile-toggle-icon"></span>
     </div>
@@ -10,11 +10,11 @@
         {% set buttonId =  'button' ~ loop.index %}
         {% set menuId =  'menu' ~ loop.index %}
         <li class="ma__organization-navigation__item {{ nav.section }}{% if nav.subNav %} has-subnav{% endif %}"
-        role="menuitem" 
+        role="menuitem"
         aria-haspopup="true">
-        <button 
+        <button
           tabindex="0"
-          id="{{ buttonId }}" 
+          id="{{ buttonId }}"
           {% if nav.subNav %}class="subnav-toggle"{% endif %}
           {{ nav.subNav ? 'aria-haspopup="true" aria-expanded="false"' : '' }}>
             {{ nav.title }}
@@ -31,7 +31,7 @@
               </div>
             {% endblock %}
             {% endif %}
-            
+
             {% if nav.section == "about" %}
             {% block aboutTab %}
               <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
@@ -46,18 +46,18 @@
               <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
                 {% set orgMenuContactRow = nav.subNav.orgMenuContactRow %}
                 {% set customItems = nav.subNav.customItems %}
-                {% include "@organisms/by-template/org-nav-contact-menu.twig" %}   
+                {% include "@organisms/by-template/org-nav-contact-menu.twig" %}
               </div>
               {% endblock %}
             {% endif %}
-            
+
             {% if nav.section == "mobileLogin" %}
               <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
                 {% set  contactGroup = nav.subNav.mobileLogin %}
                 {% include "@molecules/contact-group.twig" %}
               </div>
             {% endif %}
-          </div>         
+          </div>
         {% endif %}
         </li>
         {% endif %}
@@ -66,7 +66,7 @@
     {% if organizationNavigation.orgSearch %}
     <div class="ma__organization-navigation__search">
       <button class="ma__organization-navigation__search--toggle js-search-toggle">
-        {{ icon('search') }} 
+        {{ icon('search') }}
         <span class="search-label">Search this organization</span>
       </button>
       <div class="ma__organization-navigation__search--wrapper">

packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js

@@ -6,7 +6,7 @@ export default (function (window, document, $, undefined) {
     const $orgNavItems = $orgNav.find('.ma__organization-navigation__items');
     const $menuWrapper = $orgNav.find('.ma__organization-navigation--inner-wrapper');
 
-    // Page wrapper and fillers. 
+    // Page wrapper and fillers.
     const $pageWrapper = $orgNav.parent().next();
     let $newsLink = $pageWrapper.find('.ma__press-listing');
     let $eventsLink = $pageWrapper.find('.ma__event-listing');
@@ -24,54 +24,72 @@ export default (function (window, document, $, undefined) {
     const mobileBreak = 910;
 
     // Search Wrapper vars.
+    const $orgNavSearch = $orgNav.find('.ma__organization-navigation__search');
     const $orgNavSearchForm = $orgNav.find('.js-organization-navigation__search');
     const $orgNavSearchInput = $orgNav.find('#organization-navigation-search');
     const $searchToggle = $orgNav.find('.ma__organization-navigation__search .js-search-toggle');
 
-    // Subnav buttons. 
+    // Subnav buttons.
     let $menuButton = $orgNav.find('.subnav-toggle');
 
     // I want to section.
     let $sectionButton = $orgNav.find('.ma__org-nav-i-want-to-section .ma__comp-heading');
 
     // Sticky on scroll.
+    const bannerBottom = $('.ma__page-banner').offset().top + $('.ma__page-banner').height();
+    const menuHeight = $orgNav.height();
+
+    function stickyOnScroll() {
+      const orgWindowTop = $(window).scrollTop();
+
+      // Active Sticky TOC when on page TOC scrolls past.
+      if (bannerBottom > orgWindowTop) {
+        $('.pre-content').removeAttr('style');
+        $orgNav.removeClass('stuck');
+      }
+      else {
+        $('.pre-content').css('padding-top', menuHeight);
+        $orgNav.addClass('stuck');
+      }
+    }
+
     if ($('.pre-content').length) {
-      const bannerBottom = $('.ma__page-banner').offset().top + $('.ma__page-banner').height();
-      let menuHeight = $orgNav.height();
       $(window).scroll(function () {
-        const orgWindowTop = $(window).scrollTop();
-        let windowWidth = $(window).width();
-
-        // Active Sticky TOC when on page TOC scrolls past.
-        if (bannerBottom > orgWindowTop) {
-          $('.pre-content').removeAttr('style');
-          $orgNav.removeClass('stuck');
-        }
-        else {
-          $('.pre-content').css('padding-top', menuHeight);
-          $orgNav.addClass('stuck');
-        }
+        stickyOnScroll();
       });
     }
 
-    // Mobile toggle. 
-    $mobileToggle.on('click', function () {
+    // Mobile toggle.
+    function mobileToggleClick() {
 
       if (!$orgNav.hasClass('stuck')) {
-        $orgNav.addClass('stuck')
+        $orgNav.addClass('stuck');
       }
 
       $mobileToggle.add($menuWrapper).toggleClass('menu-open');
       // Close items when closing menu.
       $('.item-open').removeClass('item-open');
-      // Remove cloned button if present. 
+      // Remove cloned button if present.
       $('.section-toggle').remove();
 
       // Lock body scroll on mobile open/close.
       $('body').toggleClass('scroll-disabled');
 
       feedbackButton.toggle();
 
+      if($mobileToggle.hasClass('menu-open')) {
+        $orgNavSearch.prependTo($menuWrapper);
+      } else {
+        $orgNavSearch.appendTo($menuWrapper);
+        stickyOnScroll();
+      }
+    }
+    // Capture click, spacebar and enter keys.
+    $mobileToggle.keypress(function() {
+      if (event.which == 13 || event.which == 32) mobileToggleClick();
+    });
+    $mobileToggle.on('click', function () {
+      mobileToggleClick()
     });
 
     // Search form swing open/closed.