Merge pull request #311 from BeAPI/fix/header-accessibility

fix (header) : handle escape keyup, add aria attributes

Author: francoistibo

components/parts/common/header.php

@@ -10,8 +10,9 @@
 			</a>
 
 			<button class="header__menu-toggle" aria-expanded="false" aria-controls="menu">
-				<span aria-hidden="true"></span>
-				<span class="sr-only"><?php esc_html_e( 'Open/Close the menu', 'beapi-frontend-framework' ); ?></span>
+				<span></span>
+				<span class="sr-only aria-expanded-false-text"><?php esc_html_e( 'Open the menu', 'beapi-frontend-framework' ); ?></span>
+				<span class="sr-only aria-expanded-true-text"><?php esc_html_e( 'Close the menu', 'beapi-frontend-framework' ); ?></span>
 			</button>
 
 			<nav id="menu" class="header__menu" aria-label="<?php esc_attr_e( 'Main navigation', 'beapi-frontend-framework' ); ?>" role="navigation">

inc/Helpers/Custom_Menu_Walker.php

@@ -21,8 +21,13 @@ public function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
 		parent::start_el( $output, $item, $depth, $args, $id );
 
 		if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
-			$output .= '<button class="header__sub-menu-toggle" type="button"><span>' . esc_html__( 'Toggle menu', 'beapi-frontend-framework' ) . '</span></button>';
-			$output .= '<div class="header__sub-menu header__sub-menu-level-' . $depth . '"><div>';
+			$sub_menu_id = 'header-sub-menu-' . $item->ID;
+
+			$output .= '<button class="header__sub-menu-toggle" type="button" aria-expanded="false" aria-controls="' . esc_attr( $sub_menu_id ) . '">';
+			$output .= sprintf( '<span class="aria-expanded-false-text">%s</span>', esc_html__( 'Open menu', 'beapi-frontend-framework' ) );
+			$output .= sprintf( '<span class="aria-expanded-true-text">%s</span>', esc_html__( 'Close menu', 'beapi-frontend-framework' ) );
+			$output .= '</button>';
+			$output .= sprintf( '<div id="%s" class="header__sub-menu %s"><div>', esc_attr( $sub_menu_id ), esc_attr( 'header__sub-menu-level-' . $depth ) );
 			$output .= '<ul>';
 		}
 	}

src/js/classes/Header.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import AbstractDomElement from './AbstractDomElement'
 import each from '../utils/each'
 import { Tween } from 'oneloop.js'
@@ -86,6 +85,7 @@ class Header extends AbstractDomElement {
   }
 
   openSubMenu(liParent) {
+    const toggle = liParent.children[1]
     const subMenu = liParent.children[2]
     var childHeight
 
@@ -96,6 +96,7 @@ class Header extends AbstractDomElement {
     childHeight = subMenu.children[0].offsetHeight
 
     liParent.classList.add(this._settings.liSubMenuOpenedClass)
+    toggle.setAttribute('aria-expanded', 'true')
 
     new Tween({
       duration: 500,
@@ -112,6 +113,7 @@ class Header extends AbstractDomElement {
   }
 
   closeSubMenu(liParent) {
+    const toggle = liParent.children[1]
     const subMenu = liParent.children[2]
     const currentHeight = subMenu.offsetHeight
 
@@ -120,6 +122,7 @@ class Header extends AbstractDomElement {
     subMenu.style.height = currentHeight
 
     liParent.classList.remove(this._settings.liSubMenuOpenedClass)
+    toggle.setAttribute('aria-expanded', 'false')
 
     new Tween({
       duration: 500,
@@ -153,7 +156,16 @@ Header.defaults = {
 function onKeyup(e) {
   const activeElement = document.activeElement
 
-  if (e.keyCode === 9 && !activeElement.classList.contains('header__sub-menu-toggle')) {
+  // escape
+  if (e.keyCode === 27) {
+    if (this._openedSubMenu && this._openedSubMenu.contains(activeElement)) {
+      this.closeSubMenu(this._openedSubMenu.parentNode)
+    } else if (this.isMenuOpen()) {
+      this.closeMenu()
+    }
+  }
+  // tab
+  else if (e.keyCode === 9 && !activeElement.classList.contains('header__sub-menu-toggle')) {
     if (this._openedSubMenu && !this._openedSubMenu.contains(activeElement)) {
       this.closeSubMenu(this._openedSubMenu.parentNode)
     }
@@ -217,18 +229,18 @@ function onMouseLeaveLi(e) {
   clearTimeout(this._mouseTimers[li.id])
 
   if (subMenu.style.display === 'block') {
-    this._mouseTimers[li.id] = setTimeout(function () {
-      that.closeSubMenu(li)
-    }, isFirstLevel ? 1500 : 250)
+    this._mouseTimers[li.id] = setTimeout(
+      function () {
+        that.closeSubMenu(li)
+      },
+      isFirstLevel ? 1500 : 250
+    )
   }
 }
 
 function onClickToggle() {
   this.toggleMenu()
 }
-// ----
-// utils
-// ----
 
 // ----
 // init
@@ -238,4 +250,4 @@ Header.init('#header')
 // ----
 // export
 // ----
-export default Header
+export default Header

src/scss/04-utilities/_aria.scss

@@ -0,0 +1,11 @@
+[aria-expanded="false"] {
+	.aria-expanded-true-text {
+		display: none !important;
+	}
+}
+
+[aria-expanded="true"] {
+	.aria-expanded-false-text {
+		display: none !important;
+	}
+}

src/scss/04-utilities/utilities.scss

@@ -6,3 +6,4 @@
 @import "./container";
 @import "./sr-only";
 @import "./js-animation";
+@import "./aria";

src/scss/08-template-parts/_header.scss

@@ -101,8 +101,8 @@
         }
 
         .has-sub-menu-open {
-            > #{$el}__sub-menu-toggle .icon {
-                transform: rotate(180deg);
+            > #{$el}__sub-menu-toggle::before {
+                transform: translateY(-50%) rotate(225deg);
             }
         }
     }
@@ -116,20 +116,25 @@
         height: 50px;
         padding: 0;
         color: $color-dark;
+        text-indent: -10000px;
         vertical-align: middle;
         cursor: pointer;
         background: none;
         border: none;
 
-        .icon {
+        &::before {
             position: absolute;
             top: 50%;
             left: 50%;
-            width: 10px;
+            width: 6px;
             height: 6px;
-            margin: -3px 0 0 -5px;
-            fill: currentColor;
-            transition: fill .25s, transform .5s $ease-in-out-expo;
+            margin: 0 0 0 -3px;
+            content: "";
+            border-color: currentColor;
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transition: transform .3s ease-in-out;
+            transform: translateY(-50%) rotate(45deg);
         }
     }
 
@@ -291,14 +296,8 @@
         &__sub-menu-toggle {
             top: 8px;
             right: 0;
-            width: 7px;
-            height: 4px;
-
-            .icon {
-                width: 100%;
-                height: 100%;
-                margin: -2px 0 0 -3px;
-            }
+            width: 6px;
+            height: 6px;
         }
 
         &__sub-menu {