Skip to content
Snippets Groups Projects

OESO Menu ARIA Support

  • Clone with SSH
  • Clone with HTTPS
  • Embed
  • Share
    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");
          });
       }
    });
    0% Loading or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment