VOTE-2125 make mobile menu close button accessible by keyboard (#770)

web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss

@@ -29,6 +29,10 @@
     background-color: transparent;
     color: $base-dark;
 
+    @include hover {
+      @include u-text-decoration('underline');
+    }
+
     @include after {
       @include u-width(2);
       @include u-display('inline-block');
@@ -42,19 +46,4 @@
       @include u-display('none');
     }
   }
-
-  .usa-menu-btn--close {
-    @include u-display('none');
-
-    @include after {
-      background: url( '../../img/svg/close.svg' ) no-repeat;
-      background-size: contain;
-    }
-
-    &[aria-hidden="true"] {
-      @include at-media-max('tablet-lg') {
-        @include u-display('block');
-      }
-    }
-  }
 }

web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss

@@ -5,6 +5,10 @@
 .usa-nav {
   @include u-width('full');
 
+  @include at-media-max('tablet-lg') {
+    overflow: visible;
+  }
+
   //desktop
   @include at-media('tablet-lg') {
     .usa-search {
@@ -277,3 +281,42 @@
     }
   }
 }
+
+.usa-nav__close-container {
+  @include u-height(0);
+}
+
+.usa-nav__close {
+  @include u-margin(0);
+  @include u-width('auto');
+  @include u-height('auto');
+  @include u-font-size('sans', 6);
+  @include u-font-weight('medium');
+  @include u-padding-x(0);
+  @include u-padding-y(2);
+  @include u-display('block');
+  @include u-margin-left('auto');
+  @include u-float('none');
+  @include u-text-decoration('no-underline');
+  transform: translateY(-4.2rem);
+  cursor: pointer;
+  background-color: transparent;
+  color: $base-dark;
+
+  @include hover {
+    @include u-text-decoration('underline');
+  }
+
+  @include after {
+    @include u-width(2);
+    @include u-display('inline-block');
+    margin-inline-start: 0.5rem;
+    height: 0.75rem;
+    background: url( '../../img/svg/close.svg' ) no-repeat;
+    background-size: contain;
+  }
+}
+
+body.usa-js-mobile-nav--active {
+  @include u-padding-right(0, '!important');
+}

web/themes/custom/votegov/templates/layout/page.html.twig

@@ -85,7 +85,6 @@
       {{ drupal_entity('block', 'votegov_sitebranding') }}
 
       <button type="button" class="usa-menu-btn" data-test="mobileBtn">{{ 'Menu' | t }}</button>
-      <button type="button" class="usa-menu-btn usa-menu-btn--close" data-test="closeBtn">{{ 'Close' | t }}</button>
 
     </div>
 

web/themes/custom/votegov/templates/navigation/menu--main--votegov-mainnavigation.html.twig

@@ -29,6 +29,9 @@ We call a macro which calls itself to render the full tree.
 {% set attributes = attributes.addClass('menu') %}
 <nav aria-label="{{ 'Primary' | t }}" class="usa-nav" data-test="mainNav">
   <div class="usa-nav__inner">
+    <div class="grid-container usa-nav__close-container">
+      <button type="button" class="usa-nav__close" data-test="closeBtn">{{ 'Close' | t }}</button>
+    </div>
   {{ menus.menu_links(items, attributes, 0, 'basic-mega-nav-section-') }}
   <div class="usa-nav__secondary">
   <section id="usa-search--expandable" aria-label="{{ 'Search' | t }}">