diff --git a/DP-23086.yml b/DP-23086.yml
new file mode 100644
index 0000000000..00f02c945d
--- /dev/null
+++ b/DP-23086.yml
@@ -0,0 +1,59 @@
+# Every PR must have a changelog. To create a changelog:
+# 1. Make a copy of this file and name it with the ticket number.
+# 2. Keep the original format of one of the examples at the bottom, and override each element of it using ___TEMPLATE___ for reference
+# 3. Remove all comments from the copied file
+
+#___CHANGE TYPES___
+# - Added for new features.
+# - Changed for changes in existing functionality.
+# - Deprecated for soon-to-be removed features.
+# - Removed for now removed features.
+# - Fixed for any bug fixes.
+# - Security in case of vulnerabilities.
+# e.g. Added
+
+#___PROJECT___
+# - Patternlab
+# - React
+# - Docs
+# e.g. React
+# e.g. React, Patternlab
+
+#___COMPONENT___
+# Component name(s) in `PascalCase`
+# e.g. Header
+# e.g. Form, InputSlider, InputTextTypeAhead
+
+#___DESCRIPTION___
+# PR description and PR number (append PR number with # to create a link to the PR in Github)
+# If you need multiple lines, start the first line with the following "|-" characters.
+# For any breaking changes, add a comment in the PR describing the necessary changes on the consumer side and link that comment in the description.
+#e.g. Adds apples to apple trees for admin apple pickers (#PR)
+
+#___ISSUE___
+# A Jira ticket or a Github issue number (append Github issue number with # to create a link to the issue in Github)
+# e.g. DP-12345 or #123
+
+#___IMPACT___
+# - Major impact when you make incompatible API changes,
+# - Minor impact when you add functionality in a backwards compatible manner, and
+# - Patch impact when you make backwards compatible bug fixes.
+# e.g. Minor
+# See https://semver.org/ for more info.
+
+
+#___TEMPLATE___
+# ChangeType [enter a valid option, see __CHANGE TYPES___ e.g. Added]:
+#  - project: Enter one or multiple (comma separated) valid project prefix(es) - see ___PROJECT___ e.g. React, Patternlab
+#    component: Enter one or multiple (comma separated) valid component name(s) - see ___COMPONENT___ e.g. Color
+#    description: Describe the change and add the PR number. see ___DESCRIPTION___ e.g. Adds apples to apple trees for admin apple pickers (#PR)
+#    issue: Add a Jira ticket or issue number, e.g. DP-12345 or 124
+#    impact: Enter a valid impact, e.g. Minor
+
+#___EXAMPLE___
+Fixed:
+  - project: Patternlab
+    component: OrganizationNavigation
+    description: Fixes keyboard navigation for organization search. (#1531)
+    issue: DP-23086
+    impact: patch
diff --git a/packages/assets/scss/03-organisms/_organization-navigation-item.scss b/packages/assets/scss/03-organisms/_organization-navigation-item.scss
index 9141b8563a..c5bbbdd612 100644
--- a/packages/assets/scss/03-organisms/_organization-navigation-item.scss
+++ b/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;
@@ -33,11 +31,11 @@
       box-shadow: 0;
       transition: 0.8s ease-out;
 
-      button {
+      .subnav-toggle {
 
         @include ma-chevron;
 
-        &::after {
+        &:after {
           float: right;
           border-color: $c-primary-alt;
           transition: 0.5s ease-out;
@@ -123,6 +121,7 @@
 
   &__subitems {
     -ms-overflow-style: none;
+    visibility: hidden;
 
     @media ($bp-large-max) {
       height: 200vh;
@@ -134,9 +133,11 @@
       transition: right 0.5s ease;
       z-index: $z-dropdown;
       background-color: $c-white;
+      // display: none;
 
       .item-open & {
         right: 0;
+        // display: block;
       }
     }
 
@@ -144,7 +145,7 @@
       position: absolute;
       left: 0;
       max-height: 0;
-      top: -100vh;
+      // top: -100vh;
       overflow-y: hidden;
       transition: 0.2s ease-in-out;
       width: auto;
@@ -181,37 +182,53 @@
 
   @media ($bp-large-min) {
     display: flex;
+
+    .ma__comp-heading {
+      display: block;
+
+      &--mobile {
+        display: none;
+      }
+
+    }
   }
 
-  .ma__comp-heading {
+  @media ($bp-large-max) {
+    .ma__comp-heading {
+      display: none;
 
-    @media ($bp-large-max) {
+
+    &--mobile {
+      display: block;
       font-size: $fonts-medium;
       font-weight: $fonts-normal;
       color: $c-primary;
       margin-bottom: 0;
       padding-bottom: 1rem;
 
-      &::after {
-        display: none;
-      }
 
-      &::before {
-        content: $close-icon;
-        font-size: $fonts-2xlarge;
-        font-weight: 200;
-        line-height: 0;
-        position: absolute;
-        top: 35%;
-        right: 0;
-        transform: translate(-50%, -50%) rotate(135deg);
-        transition: 0.2s ease-out;
+      & > button {
+        @include ma-button-reset;
+        color: $c-primary;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        &:after {
+          content: $close-icon;
+          font-size: $fonts-2xlarge;
+          line-height: 0;
+          transform: translate(-50%, -50%) rotate(135deg);
+          transition: 0.2s ease-out;
+        }
       }
-
-      &.item-open::before {
+      &.item-open >  button:after {
         transform: translate(-50%, -50%) rotate(90deg);
       }
     }
+    }
+
   }
 
   &-section {
diff --git a/packages/assets/scss/03-organisms/_organization-navigation.scss b/packages/assets/scss/03-organisms/_organization-navigation.scss
index 4ac15b3e36..bbc631df46 100644
--- a/packages/assets/scss/03-organisms/_organization-navigation.scss
+++ b/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;
@@ -57,6 +57,7 @@ $menu-transition-time: 0.3s;
 
   &__mobile-toggle {
 
+    width: 100%;
     @include ma-container;
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -67,6 +68,7 @@ $menu-transition-time: 0.3s;
     font-weight: $fonts-bold;
     line-height: 1.2;
     color: $c-font-dark;
+    border: 0;// Reset default button borders.
     border-bottom: 1px solid $c-gray-light;
     background-color: $c-gray-lightest;
     z-index: $z-dropdown;
@@ -80,6 +82,7 @@ $menu-transition-time: 0.3s;
       max-width: 90%;
       margin-right: -1em;
       padding-right: 1em;
+      text-align: left;
 
       &::before {
         content: '...';
@@ -150,13 +153,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;
 
@@ -172,6 +173,11 @@ $menu-transition-time: 0.3s;
       }
     }
 
+    #org-search-note {
+      // Hide aria-describedby content
+      display: none;
+    }
+
     .ma__form {
       display: flex;
       width: 100%;
@@ -190,6 +196,7 @@ $menu-transition-time: 0.3s;
         max-width: 0;
         pointer-events: none;
         opacity: 0;
+        visibility: hidden;
         transition: 0s;
 
         .form-open & {
@@ -197,6 +204,7 @@ $menu-transition-time: 0.3s;
           width: 100%;
           pointer-events: auto;
           opacity: 1;
+          visibility: visible;
           transition: $menu-transition-time;
           margin-right: 15px;
         }
@@ -262,22 +270,29 @@ $menu-transition-time: 0.3s;
         padding-left: 40px;
       }
 
+      :not(.form-open) &--icon {
+        display: none;
+      }
+
       .form-open & {
         font-size: $fonts-smaller;
         padding-right: 1.5rem;
         padding-left: 1rem;
         font-weight: $fonts-normal;
 
-        &::after {
+        // &::after {
+        &--icon {
+          display: block;
           color: $c-primary-alt;
-          content: $close-icon;
+          // content: $close-icon;
           font-size: $fonts-2xlarge;
           font-weight: 600;
           line-height: 0;
           position: absolute;
           right: 0;
           transform: translateY(-50%);
-          top: 50%;
+          top: 40%;
+          padding-top: 5px;
         }
 
         svg {
diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/org-nav-i-want-to-menu.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/org-nav-i-want-to-menu.twig
index fb50fe43bb..d95b5c5d70 100644
--- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/org-nav-i-want-to-menu.twig
+++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/org-nav-i-want-to-menu.twig
@@ -4,6 +4,7 @@
   {% if findService  %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__findService">
     {% set linkList = findService.linkList %}
+    <h3 class="ma__comp-heading--mobile"><button>{{ linkList.compHeading.title}}</button></h3>
     {% include "@organisms/by-author/link-list.twig" %}
   </div>
   {% endif %}
@@ -13,6 +14,7 @@
   {% if learnAbout  %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__learnAbout">
     {% set linkList = learnAbout.linkList %}
+    <h3 class="ma__comp-heading--mobile"><button>{{ linkList.compHeading.title}}</button></h3>
     {% include "@organisms/by-author/link-list.twig" %}
   </div>
   {% endif %}
@@ -21,6 +23,7 @@
   {% block login %}
   {% if login.href %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__login">
+    <h3 class="ma__comp-heading--mobile"><button>Log in to...</button></h3>
     <h3 class="ma__comp-heading">Log in to...</h3>
     <a class="ma__link-list__container" href="{{ login.href }}">{{ login.text }}</a>
   </div>
diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig
index 38333fc348..0f20de96cb 100644
--- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig
+++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig
@@ -1,8 +1,8 @@
 <nav class="ma__organization-navigation" aria-label="{{ organizationNavigation.orgNavTitle }}">
- <div class="ma__organization-navigation__mobile-toggle">
-      <span class="mobile-toggle-label">{{ organizationNavigation.orgNavTitle }}</span>
-      <span class="mobile-toggle-icon"></span>
-    </div>
+  <button class="ma__organization-navigation__mobile-toggle" aria-expanded="false" aria-haspopup="true">
+    <span class="mobile-toggle-label">{{ organizationNavigation.orgNavTitle }}</span>
+    <span class="mobile-toggle-icon" aria-hidden="true"></span>
+  </button>
   <div class="ma__organization-navigation--inner-wrapper">
     <ul role="menubar" class="ma__organization-navigation__items" aria-label="{{ organizationNavigation.orgNavTitle }}">
       {% for nav in organizationNavigation.orgNav %}
@@ -10,20 +10,20 @@
         {% 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" 
-        aria-haspopup="true">
-        <button 
+        role="none">
+        <button
           tabindex="0"
-          id="{{ buttonId }}" 
-          {% if nav.subNav %}class="subnav-toggle"{% endif %}
+          id="{{ buttonId }}"
+          role="menuitem"
+          {% if nav.subNav %}class="subnav-toggle"  aria-controls="{{menuId}}"{% endif %}
           {{ nav.subNav ? 'aria-haspopup="true" aria-expanded="false"' : '' }}>
             {{ nav.title }}
         </button>
         {% if nav.subNav %}
-          <div id="{{menuId}}" class="ma__organization-navigation__subitems {{ nav.section }}">
+          <div id="{{menuId}}" class="ma__organization-navigation__subitems {{ nav.section }}" aria-hidden="true">
             {% if nav.section == "i-want-to" %}
             {% block iWantToTab %}
-              <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
+              <div class="ma__organization-navigation__subitem" role="region" aria-labelledby="{{ buttonId }}">
                 {% set findService = nav.subNav.findService  %}
                 {% set learnAbout = nav.subNav.learnAbout %}
                 {% set login = nav.subNav.login %}
@@ -31,10 +31,10 @@
               </div>
             {% endblock %}
             {% endif %}
-            
+
             {% if nav.section == "about" %}
             {% block aboutTab %}
-              <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
+              <div class="ma__organization-navigation__subitem" role="region" aria-labelledby="{{ buttonId }}">
                 {% set  linkList = nav.subNav.linkList %}
                 {% include "@organisms/by-author/link-list.twig" %}
               </div>
@@ -43,21 +43,21 @@
 
             {% if nav.section == "contact-us" %}
               {% block contactTab %}
-              <div class="ma__organization-navigation__subitem" role="menu" aria-label="{{ nav.section }}">
+              <div class="ma__organization-navigation__subitem" role="region" aria-labelledby="{{ buttonId }}">
                 {% 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 }}">
+              <div class="ma__organization-navigation__subitem" role="region" aria-labelledby="{{ buttonId }}">
                 {% set  contactGroup = nav.subNav.mobileLogin %}
                 {% include "@molecules/contact-group.twig" %}
               </div>
             {% endif %}
-          </div>         
+          </div>
         {% endif %}
         </li>
         {% endif %}
@@ -65,10 +65,12 @@
     </ul>
     {% if organizationNavigation.orgSearch %}
     <div class="ma__organization-navigation__search">
-      <button class="ma__organization-navigation__search--toggle js-search-toggle">
-        {{ icon('search') }} 
+      <button class="ma__organization-navigation__search--toggle js-search-toggle" aria-label="open the search box for the organization specific search" aria-describedby="org-search-note" aria-expanded="false">
+        {{ icon('search') }}
         <span class="search-label">Search this organization</span>
+        <span class="ma__organization-navigation__search--toggle--icon">x</span>
       </button>
+      <div id="org-search-note">You can search within this organization. When you hit the search button, you'd leave this page.</div>
       <div class="ma__organization-navigation__search--wrapper">
         <form action="https://search.mass.gov/?" class="ma__form js-organization-navigation__search">
           <label for="organization-navigation-search" class="visuallyhidden">Search this organization</label>
diff --git a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js
index 22154395ff..b2b85d9381 100644
--- a/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js
+++ b/packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js
@@ -1,12 +1,18 @@
+import focusTrapping from "../helpers/focusTrapping.js";
 export default (function (window, document, $, undefined) {
 
+
   $('.ma__organization-navigation').each(function () {
+    // Toggle classname
+    const classMainNavOpen = "menu-open";
+    const classSubNavOpen = "item-open";
+
     // Org Nav Wrapper.
     const $orgNav = $(this);
-    const $orgNavItems = $orgNav.find('.ma__organization-navigation__items');
     const $menuWrapper = $orgNav.find('.ma__organization-navigation--inner-wrapper');
+    const $orgNavItems = $orgNav.find('.ma__organization-navigation__items');
 
-    // 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,47 +30,55 @@ 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');
+    let $sectionIWantTo= $orgNav.find('.ma__org-nav-i-want-to-section');
+    let $sectionButton = $sectionIWantTo.find('.ma__comp-heading--mobile > button');
 
     // 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');
+      $mobileToggle.add($menuWrapper).toggleClass(classMainNavOpen);
+      $mobileToggle.attr('aria-expanded', (_, attr) => attr == 'false' ? 'true' : 'false');
       // Close items when closing menu.
-      $('.item-open').removeClass('item-open');
-      // Remove cloned button if present. 
+      $(`.${ classSubNavOpen }`).removeClass(classSubNavOpen);
+      // $('.classSubNavOpen').removeClass(classSubNavOpen);
+      // Remove cloned button if present.
       $('.section-toggle').remove();
 
       // Lock body scroll on mobile open/close.
@@ -72,6 +86,48 @@ export default (function (window, document, $, undefined) {
 
       feedbackButton.toggle();
 
+      if($mobileToggle.hasClass(classMainNavOpen)) {
+        $orgNavSearch.prependTo($menuWrapper);
+      } else {
+        $orgNavSearch.appendTo($menuWrapper);
+      stickyOnScroll();
+
+      }
+    }
+
+      // Keyboard focus trapping.
+      $(document).keydown(function(e) {
+        // check if main menu open
+        if ($mobileToggle.hasClass(classMainNavOpen)) {
+          const $subNavOpen = $orgNavItems.find(`.${classSubNavOpen}`)
+          const hasSubNavOpen = $subNavOpen.length > 0;
+          if (hasSubNavOpen) {
+            focusTrapping({
+              focusableSelectors: '.ma__organization-navigation__mobile-toggle, .ma__organization-navigation__item.item-open button, .ma__organization-navigation__item.item-open a',
+              modalSelector: '.ma__organization-navigation',
+              keyEvent: e
+            });
+          } else {
+            focusTrapping({
+              focusableSelectors: '.ma__organization-navigation__mobile-toggle, button.ma__organization-navigation__search--toggle, .ma__organization-navigation__items > li > button, .ma__organization-navigation__items > li > a',
+              modalSelector: '.ma__organization-navigation',
+              keyEvent: e
+            });
+          }
+        }
+
+      });
+
+
+    // Capture click, spacebar and enter keys.
+    $mobileToggle.keypress(function(keyboardEvent) {
+      if (keyboardEvent.code == "Enter" || keyboardEvent.code == "Space") {
+        mobileToggleClick();
+      }
+    });
+
+    $mobileToggle.on('click', function () {
+      mobileToggleClick();
     });
 
     // Search form swing open/closed.
@@ -80,6 +136,8 @@ export default (function (window, document, $, undefined) {
 
       let $buttonLabel = $searchToggle.find('.search-label');
       $buttonLabel.text($buttonLabel.text() == "Close" ? "Search this organization" : "Close");
+      $searchToggle.attr("aria-expanded", (_, attr) => attr == "false" ? "true" : "false");
+      $searchToggle.attr("aria-label", (_, attr) => attr == "open the search box for the organization specific search" ? "close the organization specific search component" : "open the search box for the organization specific search");
     });
 
     $orgNavSearchForm.on('submit', function () {
@@ -96,58 +154,113 @@ export default (function (window, document, $, undefined) {
       let $otherMenus = $('.ma__organization-navigation__subitems').not($thisMenu);
       let menuHeight = $menuWrapper.outerHeight();
 
-      $buttonParent.on('mouseenter mouseleave', function () {
-        let windowWidth = $(window).width();
-
-        if (windowWidth > mobileBreak) {
-          $('.section-toggle').remove();
-          $buttonParent.toggleClass('item-open');
-          $thisMenu.css('top', menuHeight);
-        }
-        else {
-          return false;
-        };
+      // $buttonParent.on('mouseenter mouseleave', function () {
+      $button.on("click", function (e) {
+        toggleMenu ();
+
+        // When focus moves to another menu item, close the open menu container.
+        // Only one menu container opens at a time.
+        $(".ma__organization-navigation__items .has-subnav").each(function () {
+          let $orgNavMenuButton = $(this).find(".subnav-toggle");
+
+          if ($(this).hasClass(classSubNavOpen)) {
+            if($(this).find(":focus").length === 0){
+              $(this).removeClass(classSubNavOpen);
+              $orgNavMenuButton.attr("aria-expanded", "false");
+              $(this).find(".ma__organization-navigation__subitems").attr("aria-hidden", "true");
+              $(this).find(".ma__organization-navigation__subitems").removeAttr("style");
+            }
+          }
+        });
       });
 
-      $button.on('focus', function () {
-        $thisMenu.find("a[href]").attr("tabindex", -1);
-        $otherMenus.find("a[href]").attr("tabindex", -1);
-
-        $button.keyup(function (e) {
+      // Close container with ESC.
+      $("body").on("keyup", function(e) {
+        if (e.key === "Escape") {
+          // Close submenu with ESC
+          // Set focus on its parent menubutton.
+          if ($buttonParent.find(":focus").length !== 0) {
+            closeMenuTasks();
+            $button.focus();
+          }
 
-          $('.item-open').removeClass('item-open');
+          // TO DO: Close mobile menu container.
 
-          if (e.keyCode == 13 || e.keyCode == 32) {
-            $('.section-toggle').remove();
+        }
+      });
 
-            $thisMenu.find("a[href]").attr("tabindex", 0);
-            $buttonParent.toggleClass('item-open');
-            $thisMenu.css('top', menuHeight);
+      // Next two prevent covering the main page content when submenu is not in use on desktop.
+      // Close submenu when tabbed to next component.
+      $thisMenu.find("a").last().on("keydown", (e) => {
+        if (e.key == "Tab") {
+          closeMenuTasks();
+        }
+      });
 
-            $buttonParent.add($thisMenu).on('mouseenter mouseleave', function () {
-              return false;
-            });
-          }
-        });
+      // Close submenu when shift + tab to previous component.
+      $button.on("keydown", (e) => {
+        if (e.shiftKey && e.key == "Tab") {
+          closeMenuTasks();
+        }
       });
 
-      $button.on('click', function () {
+
+      function toggleMenu () {
         let windowWidth = $(window).width();
 
+        // Common tasks
+        $buttonParent.toggleClass(classSubNavOpen);
+        $button.attr("aria-expanded", (_, attr) => attr == "false" ? "true" : "false");
+        // Open submenu
+        if ($buttonParent.hasClass(classSubNavOpen)) {
+          $thisMenu.removeAttr("aria-hidden");
+          $thisMenu.css("visibility","visible");
+        }
+        else {
+          closeMenuTasks();
+        }
+
+        // Desktop
+        if (windowWidth > mobileBreak) {
+          $(".section-toggle").remove();
+        }
+
+        // Mobile
         if (windowWidth < mobileBreak) {
-          $buttonParent.toggleClass('item-open');
+          // $buttonParent.toggleClass(classSubNavOpen);
           let $buttonClone = $button.clone(true);
 
           // Copy the link as a close button inside the menu section.
           if (!$('.section-toggle').length) {
             $buttonClone.addClass('section-toggle').prependTo($thisMenu);
           }
+
+          // As submenu opens, make original menu button,
+          // which is overwrapped by submenu container, unfocusable,
+          // move focus to cloned button, which is visible.
+          if ($buttonParent.hasClass(classSubNavOpen)) {
+            $button.attr("tabindex", "-1");
+            $buttonClone.focus();
+          }
+          else {
+          // As submenu close, make original button focusable,
+          // set focus on original button.
+            $button.attr("tabindex", "0");
+            $button.focus();
+          }
         }
-        else {
-          return false;
-        };
-      });
+        // else {
+        //   return false;
+        // };
+      }
 
+      function closeMenuTasks () {
+        $buttonParent.removeClass(classSubNavOpen);
+        $button.attr("aria-expanded", "false");
+        $button.attr("tabindex", "0");
+        $thisMenu.attr("aria-hidden", "true");
+        $thisMenu.removeAttr("style");
+      }
     });
 
     $('body').on('click', '.section-toggle', function () {
@@ -158,12 +271,14 @@ export default (function (window, document, $, undefined) {
     $sectionButton.each(function () {
 
       let $button = $(this);
-      let $seeAll = $button.parent().find('.ma__link-list__see-all');
       $button.on('click', function () {
         let windowWidth = $(window).width();
         if (windowWidth < mobileBreak) {
-          $button.toggleClass('item-open');
-          $button.next('.ma__link-list__container').add($seeAll).toggleClass('item-open');
+          const $heading = $button.parent();
+          const $wrapper = $heading.parent();
+          $heading.toggleClass(classSubNavOpen);
+          $wrapper.find('.ma__link-list__container').toggleClass(classSubNavOpen);
+          $wrapper.find('.ma__link-list__see-all').toggleClass(classSubNavOpen);
         }
       });
 
@@ -192,13 +307,13 @@ export default (function (window, document, $, undefined) {
     $('.ma__organization-navigation__item.mobileLogin').appendTo($orgNavItems);
 
     $(".internal-link").on('focus', function (e) {
-      $('.item-open').removeClass('item-open');
+      $('.classSubNavOpen').removeClass(classSubNavOpen);
     });
 
     $(".internal-link").on('click', function (e) {
       // Close open menus and reset markup.
-      $('.menu-open').removeClass('menu-open');
-      $('.item-open').removeClass('item-open');
+      $(`.${classMainNavOpen}`).removeClass(classMainNavOpen);
+      $(`.${classSubNavOpen}`).removeClass(classSubNavOpen);
       $('.form-open').removeClass('form-open');
       $('.section-toggle').remove();