Improve the accecibility of the mobil menu. Also switch to SVG hambur…

…ger icon that is animated.
bestony · Dec 21, 2022 · 7f91caa · 7f91caa
1 parent 4e4ebc1
commit 7f91caa
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 39 deletions.
diff --git a/assets/js/cookieconsent.js b/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') {

diff --git a/assets/js/mobile.js b/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);
-
+})();
diff --git a/assets/sass/mobile.scss b/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);
+    &:hover svg,
+    &:focus svg {
+      fill: var(--color-text-bg);
     }
+  }
+
+  &__hamburger {
+    display: inline-block;
+    fill: var(--color-text);
+    width: 1.6rem;
+    margin-left: 0.1rem;
 
-    .js-nav-open &::after {
-      border-color: var(--color-text-bg);
+    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;
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -23,6 +23,7 @@ <h1 class="header__site-name">
 {{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end -}}
 {{ if $.Param "menuinheader" }}{{ partial "menu.html" . }}{{ end -}}
 </div>
+{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
 </header>
 
 {{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}}
@@ -40,6 +41,5 @@ <h1 class="header__site-name">
 {{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}}
 
 </div>
-{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
 </body>
 </html>
diff --git a/layouts/partials/language-selector.html b/layouts/partials/language-selector.html
@@ -1,5 +1,4 @@
-<h2 class="visually-hidden">{{ i18n "lang_select_title" }}</h2>
-<nav class="language-selector layout__language-selector">
+<nav class="language-selector layout__language-selector" aria-label="{{ i18n "lang_select_title" }}">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="language-icon" width="24" height="24" viewBox="0 0 961 1113">
 <path d="M848 3a17654 17654 0 00-349 118l-39 13-6 2-171-60-173-62c-2 0-2 6-2 118v119l-50 16-53 19c-5 3-5-19-5 343 0 335 0 336 2 339l6 5a92499 92499 0 00459-150l12-4 10 3 467 148 4 2V302l-45-15-45-14-1-132c0-124-1-132-2-134-4-7-9-8-19-5zm-4 145l-1 117-178-57-178-57L843 30l1 118zM458 481l-1 319-216 72-216 72V305l215-72 217-72 1 320zm262-131c17 4 30 9 30 9 1 0 20 67 42 149l57 203 15 56-64-19a2060 2060 0 01-24-84 2094 2094 0 00-130-40l-15 33-14 34-64-18 22-55 55-136 46-112c10-24 13-30 14-30l31 10z"/>
 <path d="M257 360l-35 9c-23 7-25 7-34 7a72 72 0 01-20-3c-1 1 2 11 5 18 4 8 13 17 23 21 6 3 7 3 18 3 19 0 37-6 52-17 12-8 16-18 15-29-2-11-8-13-24-9zM335 413l-35 16c-13 7-23 12-28 13l-38 12a1636 1636 0 01-106 32c-19 3-17 2-17 9l2 8c2 4 9 10 14 12 12 6 42 3 51-6 2-2 3-3 3-7v-6l31-10 40-11a515 515 0 0148-13l-48 96c-10 19-23 40-45 71l-52 71-55 64-7 8h4c7 0 17-2 20-4a929 929 0 00149-179l23 17c26 20 30 23 51 35 25 14 39 21 56 27 8 2 12 3 13 1 1-4-6-30-9-33l-26-12-47-20-40-17-16-7 10-17c22-35 34-56 53-95l20-40 1-10v-11h-3l-17 6zM716 451l-23 56-23 55 86 26a4814 4814 0 00-40-137zM680 972a460 460 0 0026 44 422 422 0 01-319 66 517 517 0 01-175-66c-7-3-14-2-17 4-2 3-2 9 0 12s24 16 46 27a536 536 0 00222 53c36 1 39 0 68-4a480 480 0 00181-65l8-5 12 21 13 19 7-19 17-48 10-32-99-7z"/>

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -1,5 +1,4 @@
-<nav class="main-menu layout__navigation">
-<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
+<nav class="main-menu layout__navigation" aria-label="{{ i18n "menu_title" }}">
 <ul class="navbar">
 {{ if site.Menus.main -}}
 

diff --git a/layouts/partials/mobilemenu.html b/layouts/partials/mobilemenu.html
@@ -1,12 +1,18 @@
 <div class="mobile-nav" dir="ltr">
   <div class="mobile-nav__cover"></div>
-  <a href="#navigation" class="mobile-nav__toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
-  <div class="mobile-nav__sheet">
+  <button class="mobile-nav__toggle" aria-expanded="false" aria-controls="sheet">
+    {{ i18n "menu_mobile" }}
+    <svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+      <rect width="80" height="12" x="10" y="20" rx="5"></rect>
+      <rect width="80" height="12" x="10" y="45" rx="5"></rect>
+      <rect width="80" height="12" x="10" y="70" rx="5"></rect>
+    </svg>
+  </button>
+  <div class="mobile-nav__sheet" id="sheet" aria-hidden="true">
     <div class="mobile-nav__region">
     {{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
     </div>
-    <nav class="mobile-nav__main-menu">
-    <h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
+    <nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
     <ul class="mobile-nav__navbar">
     {{ if site.Menus.main -}}