Improve the accecibility of the mobil menu. Also switch to SVG hamburger icon that is animated.

assets/js/cookieconsent.js

@@ -11,10 +11,7 @@
     cookiebanner.classList.add('js-cookieconsent-open');
   }
 
-  const cookie_buttons = Array.prototype.slice.call(
-    document.querySelectorAll('button[data-consent]')
-  );
-
+  const cookie_buttons = document.querySelectorAll('button[data-consent]');
   cookie_buttons.forEach(function (button) {
     button.addEventListener('click', function () {
       if (button.getAttribute('data-consent') === 'true') {

assets/js/mobile.js

@@ -3,19 +3,46 @@
  * A JavaScript file for the mobile menu.
  */
 
-(function ($) {
+(function () {
 
   'use strict';
 
+  const body = document.querySelector('body');
+  const sheet = document.querySelector('.mobile-nav__sheet');
+  const toggle = document.querySelector('.mobile-nav__toggle');
+
+  function navopen () {
+    body.classList.add('js-nav-open');
+    sheet.setAttribute('aria-hidden', 'false');
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+
+  function navclose () {
+    body.classList.remove('js-nav-open');
+    sheet.setAttribute('aria-hidden', 'true');
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+
   // Toggle the mobile nav sheet.
-  $('.mobile-nav__cover, .mobile-nav__toggle').handle('click', function () {
-    $('body').scroll().toggleClass('js-nav-open');
+  const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle');
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', function (e) {
+      e.preventDefault();
+      if (body.classList.contains('js-nav-open')) {
+        navclose ();
+      }
+      else {
+        navopen ();
+      }
+    });
   });
 
   // Close the nav sheet after click (needed for anchor links).
-  $('.mobile-nav__sheet').find('a').on('click', function () {
-    $('body').removeClass('js-nav-open');
+  const links = document.querySelectorAll('.mobile-nav__sheet a');
+  links.forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      navclose ();
+    });
   });
 
-})(u);
-
+})();

assets/sass/mobile.scss

@@ -11,7 +11,7 @@
   @include respond-to(s) {
     display: block;
   }
-}
+} // stylelint-enable selector-class-pattern
 
 .mobile-nav {
   @include typeface(headings);
@@ -46,18 +46,18 @@
   }
 
   &__toggle {
-    display: block;
+    @include padding(0 .2);
+    display: flex;
+    align-items: center;
     position: absolute;
     top: $zen-gutters;
     right: $zen-gutters;
-    padding: 6px 30px 6px 6px;
-    z-index: 22;
-    text-decoration: none;
+    margin: 0;
     font-weight: bold;
-    line-height: 1;
-    border: 1px solid var(--color-border);
-    border-radius: $s-radius;
+    background-color: transparent;
     color: var(--color-text);
+    z-index: 22;
+    border: 1px solid var(--color-border);
     pointer-events: auto;
 
     @include respond-to(s) {
@@ -68,22 +68,45 @@
       color: var(--color-text-bg);
     }
 
-    &::after {
-      position: absolute;
-      content: '';
-      margin-left: 4px;
-      width: 20px;
-      height: 20px;
-      border-top: 12px double var(--color-text);
-      border-bottom: 4px solid var(--color-text);
-    }
-
-    .js-nav-open &::after {
-      border-color: var(--color-text-bg);
+    &:hover svg,
+    &:focus svg {
+      fill: var(--color-text-bg);
     }
   }
 
+  &__hamburger {
+    display: inline-block;
+    fill: var(--color-text);
+    width: 1.6rem;
+    margin-left: 0.1rem;
+
+    rect {
+      transform-origin: center;
+    }
+
+    .js-nav-open & { // stylelint-disable max-nesting-depth
+      fill: var(--color-text-bg);
+
+      rect {
+        y: 45;
+
+        &:nth-of-type(1) {
+          transform: rotate(45deg);
+        }
+
+        &:nth-of-type(2) {
+          opacity: 0;
+        }
+
+        &:nth-of-type(3) {
+          transform: rotate(-45deg);
+        }
+      }
+    } // stylelint-enable max-nesting-depth
+  }
+
   &__sheet {
+    visibility: hidden;
     background-color: var(--color-mobile-menu);
     width: 90vw;
     height: 100vh;
@@ -102,6 +125,7 @@
     }
 
     .js-nav-open & {
+      visibility: visible;
       pointer-events: auto;
       box-shadow: -10px 0 10px -10px var(--color-nearblack);
       transform: translateX(10vw);
@@ -122,7 +146,7 @@
 
   &__cover,
   &__toggle,
-  &__toggle::after,
+  &__hamburger rect,
   &__sheet {
     transition: all 130ms ease-in;