OESO Menu ARIA Support
The snippet can be accessed without any authentication.
Authored by
Joel Crawford-Smith
Paste the code below into a JS file. NOTE/TIP: Do not nest the code into two (document).ready functions.
menu-aria.js 1.22 KiB
$( document ).ready(function() {
/**
* ARIA support for clicks and keys
*/
$(".js__header-has-sub").find(".primary-item").on("click", function() {
var expandedState = $(this).attr('aria-expanded');
if (expandedState == 'true') {
$(this).attr("aria-expanded","false");
$(this).parent().parent().removeClass("active");
}
else {
$(this).attr("aria-expanded","true");
$(this).parent().parent().addClass("active");
}
return false
}).keyup(function (e) { // make keyboard enter key act like a mouse click.
if (e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar
$(this).click();
}
});
/**
* ARIA support for hover at desktop width (NBD that it only measures on first page load)
*/
if ($(window).width() > 980) {
$(".js__header-has-sub").find(".primary-item").on("mouseenter", function() {
$(this).attr("aria-expanded","true");
$(this).parent().parent().addClass("active");
});
$(".js__header-has-sub").find(".primary-item").on("mouseleave", function() {
$(this).attr("aria-expanded","false");
$(this).parent().parent().removeClass("active");
});
}
});
Please register or sign in to comment