WordPress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js
laurelfulford fcc423097c Twenty Nineteen: Improve menu semantics and keyboard navigation.
The menu's original markup included some non-semantic tags and an unnecessary `tabindex` attribute that made it difficult to navigate via keyboard. 

Props allancole, anevins, kjellr.
Fixes #45713.


Built from https://develop.svn.wordpress.org/trunk@44376


git-svn-id: http://core.svn.wordpress.org/trunk@44206 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-12-31 17:49:50 +00:00

355 lines
9.2 KiB
JavaScript

/**
* Touch & Keyboard navigation.
*
* Contains handlers for touch devices and keyboard navigation.
*/
(function() {
/**
* Debounce
*
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
*/
function debounce(func, wait, immediate) {
'use strict';
var timeout;
wait = (typeof wait !== 'undefined') ? wait : 20;
immediate = (typeof immediate !== 'undefined') ? immediate : true;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
}
/**
* Add class
*
* @param {Object} el
* @param {string} cls
*/
function addClass(el, cls) {
if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) {
el.className += ' ' + cls;
}
}
/**
* Delete class
*
* @param {Object} el
* @param {string} cls
*/
function deleteClass(el, cls) {
el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' );
}
/**
* Has class?
*
* @param {Object} el
* @param {string} cls
*
* @returns {boolean} Has class
*/
function hasClass(el, cls) {
if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) {
return true;
}
}
/**
* Toggle Aria Expanded state for screenreaders
*
* @param {Object} ariaItem
*/
function toggleAriaExpandedState( ariaItem ) {
'use strict';
var ariaState = ariaItem.getAttribute('aria-expanded');
if ( ariaState === 'true' ) {
ariaState = 'false';
} else {
ariaState = 'true';
}
ariaItem.setAttribute('aria-expanded', ariaState);
}
/**
* Open sub-menu
*
* @param {Object} currentSubMenu
*/
function openSubMenu( currentSubMenu ) {
'use strict';
// Update classes
// classList.add is not supported in IE11
currentSubMenu.parentElement.className += ' off-canvas';
currentSubMenu.parentElement.lastElementChild.className += ' expanded-true';
// Update aria-expanded state
toggleAriaExpandedState( currentSubMenu );
}
/**
* Close sub-menu
*
* @param {Object} currentSubMenu
*/
function closeSubMenu( currentSubMenu ) {
'use strict';
var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode
var menuItemAria = menuItem.querySelector('a[aria-expanded]');
var subMenu = currentSubMenu.closest('.sub-menu');
// If this is in a sub-sub-menu, go back to parent sub-menu
if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) {
// Update classes
// classList.remove is not supported in IE11
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
subMenu.className = subMenu.className.replace( 'expanded-true', '' );
// Update aria-expanded and :focus states
toggleAriaExpandedState( menuItemAria );
// Or else close all sub-menus
} else {
// Update classes
// classList.remove is not supported in IE11
menuItem.className = menuItem.className.replace( 'off-canvas', '' );
menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' );
// Update aria-expanded and :focus states
toggleAriaExpandedState( menuItemAria );
}
}
/**
* Find first ancestor of an element by selector
*
* @param {Object} child
* @param {String} selector
* @param {String} stopSelector
*/
function getCurrentParent( child, selector, stopSelector ) {
var currentParent = null;
while ( child ) {
if ( child.matches(selector) ) {
currentParent = child;
break;
} else if ( stopSelector && child.matches(stopSelector) ) {
break;
}
child = child.parentElement;
}
return currentParent;
}
/**
* Remove all off-canvas states
*/
function removeAllFocusStates() {
'use strict';
var siteBranding = document.getElementsByClassName( 'site-branding' )[0];
var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
var i;
var o;
for ( i = 0; i < getFocusedElements.length; i++) {
getFocusedElements[i].blur();
}
for ( o = 0; o < getFocusedClassElements.length; o++) {
deleteClass( getFocusedClassElements[o], 'is-focused' );
}
}
/**
* Matches polyfill for IE11
*/
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}
/**
* Toggle `focus` class to allow sub-menu access on touch screens.
*/
function toggleSubmenuDisplay() {
document.addEventListener('touchstart', function(event) {
if ( event.target.matches('a') ) {
var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';
// Open submenu if url is #
if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) {
openSubMenu( event.target );
}
}
// Check if .submenu-expand is touched
if ( event.target.matches('.submenu-expand') ) {
openSubMenu(event.target);
// Check if child of .submenu-expand is touched
} else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
// Check if .menu-item-link-return is touched
} else if ( event.target.matches('.menu-item-link-return') ) {
closeSubMenu( event.target );
// Check if child of .menu-item-link-return is touched
} else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
closeSubMenu( event.target );
}
// Prevent default mouse/focus events
removeAllFocusStates();
}, false);
document.addEventListener('touchend', function(event) {
var mainNav = getCurrentParent( event.target, '.main-navigation' );
if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) {
// Prevent default mouse events
event.preventDefault();
} else if (
event.target.matches('.submenu-expand') ||
null != getCurrentParent( event.target, '.submenu-expand' ) &&
getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ||
event.target.matches('.menu-item-link-return') ||
null != getCurrentParent( event.target, '.menu-item-link-return' ) &&
getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
// Prevent default mouse events
event.preventDefault();
}
// Prevent default mouse/focus events
removeAllFocusStates();
}, false);
document.addEventListener('focus', function(event) {
if ( event.target.matches('.main-navigation > div > ul > li a') ) {
// Remove Focused elements in sibling div
var currentDiv = getCurrentParent( event.target, 'div', '.main-navigation' );
var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling;
var focusedElement = currentDivSibling.querySelector( '.is-focused' );
var focusedClass = 'is-focused';
var prevLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling;
var nextLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling;
if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) {
deleteClass( focusedElement, focusedClass );
}
// Add .is-focused class to top-level li
if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) {
addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass );
}
// Check for previous li
if ( prevLi && hasClass( prevLi, focusedClass ) ) {
deleteClass( prevLi, focusedClass );
}
// Check for next li
if ( nextLi && hasClass( nextLi, focusedClass ) ) {
deleteClass( nextLi, focusedClass );
}
}
}, true);
document.addEventListener('click', function(event) {
// Remove all focused menu states when clicking outside site branding
if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) {
removeAllFocusStates();
} else {
// nothing
}
}, false);
}
/**
* Run our sub-menu function as soon as the document is `ready`
*/
document.addEventListener( 'DOMContentLoaded', function() {
toggleSubmenuDisplay();
});
/**
* Run our sub-menu function on selective refresh in the customizer
*/
document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) {
if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
toggleSubmenuDisplay();
}
});
/**
* Run our sub-menu function every time the window resizes
*/
var isResizing = false;
window.addEventListener( 'resize', function() {
isResizing = true;
debounce( function() {
if ( isResizing ) {
return;
}
toggleSubmenuDisplay();
isResizing = false;
}, 150 );
} );
})();